> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.icommkt.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# HTML disponibles para automatizar Remarketing desde Sitios

El Remarketing es una estrategia de marketing que permite mostrar contenido relevante a usuarios que ya han interactuado con tu sitio web, productos o servicios. Esta técnica ayuda a incrementar la conversión, recordando a los usuarios los productos que han visto y motivándolos a completar una compra.

¿Deseas configurar Remarketing en tu sitio? Consulta nuestra guía [¿Cómo configurar y automatizar remarketing desde Sitios?](https://help.icommkt.com/es/article/como-configurar-y-automatizar-remarketing-desde-sitios-rojgsw/)

En este artículo encontrarás las diferentes opciones de HTML disponibles para automatizar tu estrategia de remarketing desde Sitios:

* [HTML Dinámico con un botón único al final del newsletter](#6-html-dinamico-con-un-boton-unico-al-final-del-newsletter)
Permite mostrar productos dinámicamente según la interacción del usuario, con un solo botón que dirige a la página de producto o carrito.
* [HTML Estático para 1 producto con botón por producto](#6-html-estatico-para-1-producto-con-boton-por-producto)
Ideal para newsletters que promocionan un solo producto, mostrando un botón específico de acción para cada producto.
* [HTML Estático para 2 productos con botón por producto](#6-html-estatico-para-2-productos-con-boton-por-producto)
Permite mostrar dos productos específicos en el newsletter, cada uno con su botón individual.
* [HTML Estático para 3 productos con botón por producto](#6-html-estatico-para-3-productos-con-boton-por-producto)
Para newsletters que promocionan tres productos, con botones independientes para cada producto.

###### Importante
Para la correcta configuración de cada envío, es necesario **crear y utilizar el segmento correspondiente según la cantidad de productos que se mostrarán en el newsletter**:
* Si el newsletter es dinámico utilizar el segmento asociado a la fecha de abandono.
* Si el newsletter muestra **1 producto**, se debe segmentar la base de datos que recolecta la información de remarketing con **1 producto**.
* Si muestra **2 productos**, se debe usar el segmento que contenga **2 productos**.
* Si muestra **3 productos**, se debe usar el segmento que contenga **3 productos**.
Este segmento es el que debe ser seleccionado en la **audiencia** dentro de la configuración del envío para que el HTML funcione correctamente.

## Opciones disponibles

###### HTML Dinámico con un botón único al final del newsletter

En icomm contamos con una versión de HTML diseñada para mostrar hasta 3 productos en el correo de Remarketing de productos. Este diseño se ajusta automáticamente según la cantidad de productos que haya en la base de datos.

Es importante tener en cuenta que el HTML está maquetado para mostrar siempre 3 bloques de productos. Si en la base solo se recibe información para 1 o 2 productos, los bloques restantes se visualizarán vacíos, a menos que se configure correctamente el contenido para evitarlo.

###### ¿Qué hacer si hay menos de 3 productos?
Para que los bloques vacíos no se visualicen, es necesario:

1. Enviar un píxel transparente en la ruta de la imagen del producto que no se quiere mostrar.
Para ello, pueden implementar la versión ya subida a los servidores de icomm:
👉 https://df9xluswrtwog.cloudfront.net/ImagesRepo/NzAyLTE0MjItZGVtb2Fy0/1422/2025/ImagenesCarrito/Px_Transparente_600x1.png

2. Dejar vacíos los valores de las demás variables de ese producto (nombre, precio, botón, etc.).


| En caso de abandono de más de tres productos, se enviará la información a la BBDD de los tres de mayor valor.

###### ¿Se pueden hacer variantes del diseño?
¡Sí! En caso de requerir una variante del diseño del HTML, es importante compartirlo con su Customer Success para evaluar los cambios y coordinar los ajustes necesarios.

Pasos a seguir:

1. Ingresar al módulo de Canales -> Email Marketing -> Newsletters -> Crear Newsletter.
2. Seleccionar la plantilla Editor.
3. Una vez dentro del editor, selecciona un bloque de texto y haz click en Source:
![](https://storage.crisp.chat/users/helpdesk/website/-/e/4/b/4/e4b41ef8ae96c800/image_7f0e55.png)
4. Copia y pega todo el contenido del código HTML:

```html
<style type="text/css">
	<!--
	.Alinear_Texto_Center_Mob {
		text-align: left;
	}
	/* MEDIA QUERIES */

	@media screen and (max-width: 600px) {
		.img-max {
			width: 100% !important;
			max-width: 100% !important;
			height: auto !important;
		}

		.img-max-60 {
			width: 60% !important;
			max-width: 60% !important;
			height: auto !important;
		}

		.mobile-hide {
			display: none !important;
		}

		.Columna_1 {
			display: table-header-group !important;
			width: 100% !important;
		}

		.Columna_2 {
			display: table-footer-group !important;
			width: 100% !important;
		}

		.Alinear_Texto_Center_Mob {
			text-align: center !important;
		}

		.Display_Block {
			display: block !important;
		}
	}
	-->
</style>
<table style="max-width: 600px;" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
	<tbody>
		<tr>
			<td style="height: 20px; font-size: 1px; font-family: Arial; line-height: 10px; mso-line-height-alt: 10px; mso-line-height-rule: exactly;" height="20" valign="top" align="center">&nbsp;</td>
		</tr>
		<tr>
			<td style="font-size: 0; padding: 0; margin: 0;" valign="top" align="left">
				<table width="100%" class="img-max" align="center" cellpadding="0" cellspacing="0" border="0" role="presentation">
					<tbody>
						<tr>
							<td style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" height="1" width="30">&nbsp;</td>
							<td width="560" style="font-family: Verdana, Arial, Helvetica, Open Sans, sans-serif; font-size: 20px; font-weight: bold; line-height: 24px; color: #ffffff;" align="left">
								<table cellspacing="0" cellpadding="0" border="0" align="center">
									<tbody>
										<tr>
											<td class="Columna_1" align="center" valign="middle" width="36%">
												<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
													<tbody>
														<tr>
															<td width="200" valign="middle" align="center"><a href="&lt;*url_prod1*&gt;" target="_blank"><img src="&lt;*prod1_img_url*&gt;" alt="&lt;*prod1_name*&gt;" title="&lt;*prod1_name*&gt;" style="width: 200px; max-width: 200px !important; display: block; font-family: Arial,Helvetica,Open Sans,sans-serif; font-size: 16px; font-weight: normal; line-height: 20px; color: #3c3c3a; text-align: left;" width="200" /></a></td>
														</tr>
														<tr>
															<td style="height: 5px; font-size: 1px; font-family: Arial; line-height: 5px; mso-line-height-alt: 5px; mso-line-height-rule: exactly;" height="5" valign="top" align="center">&nbsp;</td>
														</tr>
													</tbody>
												</table>
											</td>
											<td class="Columna_2" align="center" valign="middle" width="64%">
												<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
													<tbody>
														<tr>
															<td style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" height="1" width="30">&nbsp;</td>
															<td align="left">
																<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
																	<tbody>
																		<tr>
																			<td class="Alinear_Texto_Center_Mob" style="font-family: Arial, Helvetica, Open Sans, sans-serif; font-size: 16px; font-weight: bold; line-height: 150%; color: #3c3c3a; text-align: left;" align="center"><a href="&lt;*url_prod1*&gt;" style="color: #3c3c3a; text-decoration: none;" target="_blank">&lt;*prod1_name*&gt;</a></td>
																		</tr>
																	</tbody>
																</table>
															</td>
															<td style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" height="1" width="30">&nbsp;</td>
														</tr>
													</tbody>
												</table>
											</td>
										</tr>
									</tbody>
								</table>
							</td>
							<td style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" height="1" width="30">&nbsp;</td>
						</tr>
					</tbody>
				</table>
			</td>
		</tr>
		<tr>
			<td style="font-size: 0; padding: 0; margin: 0;" valign="top" align="left">
				<table width="100%" class="img-max" align="center" cellpadding="0" cellspacing="0" border="0" role="presentation">
					<tbody>
						<tr>
							<td style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" height="1" width="30">&nbsp;</td>
							<td width="560" style="font-family: Verdana, Arial, Helvetica, Open Sans, sans-serif; font-size: 20px; font-weight: bold; line-height: 24px; color: #ffffff;" align="left">
								<table cellspacing="0" cellpadding="0" border="0" align="center">
									<tbody>
										<tr>
											<td class="Columna_1" align="center" valign="middle" width="36%">
												<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
													<tbody>
														<tr>
															<td width="200" valign="middle" align="center"><a href="&lt;*url_prod2*&gt;" target="_blank"><img src="&lt;*prod2_img_url*&gt;" alt="&lt;*prod2_name*&gt;" title="&lt;*prod2_name*&gt;" style="width: 200px; max-width: 200px !important; display: block; font-family: Arial,Helvetica,Open Sans,sans-serif; font-size: 16px; font-weight: normal; line-height: 20px; color: #3c3c3a; text-align: left;" width="200" /></a></td>
														</tr>
														<tr>
															<td style="height: 5px; font-size: 1px; font-family: Arial; line-height: 5px; mso-line-height-alt: 5px; mso-line-height-rule: exactly;" height="5" valign="top" align="center">&nbsp;</td>
														</tr>
													</tbody>
												</table>
											</td>
											<td class="Columna_2" align="center" valign="middle" width="64%">
												<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
													<tbody>
														<tr>
															<td style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" height="1" width="30">&nbsp;</td>
															<td align="left">
																<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
																	<tbody>
																		<tr>
																			<td class="Alinear_Texto_Center_Mob" style="font-family: Arial, Helvetica, Open Sans, sans-serif; font-size: 16px; font-weight: bold; line-height: 150%; color: #3c3c3a; text-align: left;" align="center"><a href="&lt;*url_prod2*&gt;" style="color: #3c3c3a; text-decoration: none;" target="_blank">&lt;*prod2_name*&gt;</a></td>
																		</tr>
																	</tbody>
																</table>
															</td>
															<td style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" height="1" width="30">&nbsp;</td>
														</tr>
													</tbody>
												</table>
											</td>
										</tr>
									</tbody>
								</table>
							</td>
							<td style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" height="1" width="30">&nbsp;</td>
						</tr>
					</tbody>
				</table>
			</td>
		</tr>
		<tr>
			<td style="font-size: 0; padding: 0; margin: 0;" valign="top" align="left">
				<table width="100%" class="img-max" align="center" cellpadding="0" cellspacing="0" border="0" role="presentation">
					<tbody>
						<tr>
							<td style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" height="1" width="30">&nbsp;</td>
							<td width="560" style="font-family: Verdana, Arial, Helvetica, Open Sans, sans-serif; font-size: 20px; font-weight: bold; line-height: 24px; color: #ffffff;" align="left">
								<table cellspacing="0" cellpadding="0" border="0" align="center">
									<tbody>
										<tr>
											<td class="Columna_1" align="center" valign="middle" width="36%">
												<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
													<tbody>
														<tr>
															<td width="200" valign="middle" align="center"><a href="&lt;*url_prod3*&gt;" target="_blank"><img src="&lt;*prod3_img_url*&gt;" alt="&lt;*prod3_name*&gt;" title="&lt;*prod3_name*&gt;" style="width: 200px; max-width: 200px !important; display: block; font-family: Arial,Helvetica,Open Sans,sans-serif; font-size: 16px; font-weight: normal; line-height: 20px; color: #3c3c3a; text-align: left;" width="200" /></a></td>
														</tr>
														<tr>
															<td style="height: 5px; font-size: 1px; font-family: Arial; line-height: 5px; mso-line-height-alt: 5px; mso-line-height-rule: exactly;" height="5" valign="top" align="center">&nbsp;</td>
														</tr>
													</tbody>
												</table>
											</td>
											<td class="Columna_2" align="center" valign="middle" width="64%">
												<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
													<tbody>
														<tr>
															<td style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" height="1" width="30">&nbsp;</td>
															<td align="left">
																<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
																	<tbody>
																		<tr>
																			<td class="Alinear_Texto_Center_Mob" style="font-family: Arial, Helvetica, Open Sans, sans-serif; font-size: 16px; font-weight: bold; line-height: 150%; color: #3c3c3a; text-align: left;" align="center"><a href="&lt;*url_prod3*&gt;" style="color: #3c3c3a; text-decoration: none;" target="_blank">&lt;*prod3_name*&gt;</a></td>
																		</tr>
																	</tbody>
																</table>
															</td>
															<td style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" height="1" width="30">&nbsp;</td>
														</tr>
													</tbody>
												</table>
											</td>
										</tr>
									</tbody>
								</table>
							</td>
							<td style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" height="1" width="30">&nbsp;</td>
						</tr>
					</tbody>
				</table>
			</td>
		</tr>
		<tr>
			<td style="height: 20px; font-size: 1px; font-family: Arial; line-height: 10px; mso-line-height-alt: 10px; mso-line-height-rule: exactly;" height="20" valign="top" align="center">&nbsp;</td>
		</tr>
	</tbody>
</table>
```

5. (Opcional) Arrastra el elemento **Botón** y personalízalo con el llamado a la acción que desees. Finalmente, coloca la URL de tu sitio para que cuando un usuario haga click, pueda visitar la página completa.

||| Para saber cómo invocar los campos dinámicos consulta nuestro artículo [Cómo configurar campos personalizados en newsletter Editor](https://help.icommkt.com/es/article/como-configurar-campos-personalizados-en-newsletter-editor-1bhcu0g/)


###### HTML Estático para 1 producto con botón por producto

```
<p style="margin-top: 0px; margin-bottom: 0px;">
<style type="text/css"><!--
	.Alinear_Texto_Center_Mob {
		text-align: left;
	}
	/* MEDIA QUERIES */

	@media screen and (max-width: 600px) {
		.img-max {
			width: 100% !important;
			max-width: 100% !important;
			height: auto !important;
		}

		.img-max-60 {
			width: 60% !important;
			max-width: 60% !important;
			height: auto !important;
		}

		.mobile-hide {
			display: none !important;
		}

		.Columna_1 {
			display: table-header-group !important;
			width: 100% !important;
		}

		.Columna_2 {
			display: table-footer-group !important;
			width: 100% !important;
		}

		.Alinear_Texto_Center_Mob {
			text-align: center !important;
		}
		.Boton_Mobile_Center {
			margin: 0 auto !important;
			float: none !important;
			text-align: center !important;
		}

		.Display_Block {
			display: block !important;
		}
	}
	-->
</style>
</p>

<table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width: 600px;" width="100%">
	<tbody>
		<tr>
			<td align="center" height="20" style="height: 20px; font-size: 1px; font-family: Arial; line-height: 10px; mso-line-height-alt: 10px; mso-line-height-rule: exactly;" valign="top">&nbsp;</td>
		</tr>
		<tr>
			<td align="left" style="font-size: 0; padding: 0; margin: 0;" valign="top">
			<!-- PRODUCTO 1 -->
			<table align="center" border="0" cellpadding="0" cellspacing="0" class="img-max" role="presentation" width="100%">
				<tbody>
					<tr>
						<td height="1" style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" width="30">&nbsp;</td>
						<td align="left" style="font-family: Verdana, Arial, Helvetica, Open Sans, sans-serif; font-size: 20px; font-weight: bold; line-height: 24px; color: #ffffff;" width="560">
						<table align="center" border="0" cellpadding="0" cellspacing="0">
							<tbody>
								<tr>
									<td align="center" class="Columna_1" valign="middle" width="36%">
									<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
										<tbody>
											<tr>
												<td align="center" valign="middle" width="200"><a href="&lt;*url_prod1*&gt;" target="_blank"><img alt="&lt;*prod1_name*&gt;" src="&lt;*prod1_img_url*&gt;" style="width: 200px; max-width: 200px !important; display: block; font-family: Arial,Helvetica,Open Sans,sans-serif; font-size: 16px; font-weight: normal; line-height: 20px; color: #3c3c3a; text-align: left;" title="&lt;*prod1_name*&gt;" width="200" /></a></td>
											</tr>
											<tr>
												<td align="center" height="5" style="height: 5px; font-size: 1px; font-family: Arial; line-height: 5px; mso-line-height-alt: 5px; mso-line-height-rule: exactly;" valign="top">&nbsp;</td>
											</tr>
										</tbody>
									</table>
									</td>
									<td align="center" class="Columna_2" valign="middle" width="64%">
									<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
										<tbody>
											<tr>
												<td height="1" style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" width="30">&nbsp;</td>
												<td align="left">
												<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
													<tbody>
														<tr>
															<td align="center" class="Alinear_Texto_Center_Mob" style="font-family: Arial, Helvetica, Open Sans, sans-serif; font-size: 16px; font-weight: bold; line-height: 150%; color: #3c3c3a; text-align: left;"><a href="&lt;*url_prod1*&gt;" style="color: #3c3c3a; text-decoration: none;" target="_blank">&lt;*prod1_name*&gt;</a></td>
														</tr>
													</tbody>
												</table>

												<table align="left" border="0" cellpadding="0" cellspacing="0" class="Boton_Mobile_Center" role="presentation">
													<tbody>
														<tr>
															<td height="15" style="height: 15px; font-size: 1px; line-height: 15px;">&nbsp;</td>
														</tr>
														<tr>
															<td bgcolor="#000000" style="border-radius: 5px; text-align: center;"><a href="&lt;*url_prod1*&gt;" style="display: inline-block; font-family: Arial, Helvetica, Open Sans, sans-serif; font-size: 12px; color: #ffffff; text-decoration: none; padding: 8px 20px; border-radius: 5px; background-color: #000000; line-height:18px; font-weight: bold;" target="_blank"><span style="background-color:#000000;">COMPRAR </span></a></td>
														</tr>
													</tbody>
												</table>
												</td>
												<td height="1" style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" width="30">&nbsp;</td>
											</tr>
										</tbody>
									</table>
									</td>
								</tr>
							</tbody>
						</table>
						</td>
						<td height="1" style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" width="30">&nbsp;</td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
		<tr>
			<td align="center" height="20" style="height: 20px; font-size: 1px; font-family: Arial; line-height: 10px; mso-line-height-alt: 10px; mso-line-height-rule: exactly;" valign="top">&nbsp;</td>
		</tr>
	</tbody>
</table>
```

Referencia de visualización

![](https://storage.crisp.chat/users/helpdesk/website/-/e/4/b/4/e4b41ef8ae96c800/image_f1j33v.png =847xauto)
###### HTML Estático para 2 productos con botón por producto

```
<p style="margin-top: 0px; margin-bottom: 0px;">
<style type="text/css"><!--
	.Alinear_Texto_Center_Mob {
		text-align: left;
	}
	/* MEDIA QUERIES */

	@media screen and (max-width: 600px) {
		.img-max {
			width: 100% !important;
			max-width: 100% !important;
			height: auto !important;
		}

		.img-max-60 {
			width: 60% !important;
			max-width: 60% !important;
			height: auto !important;
		}

		.mobile-hide {
			display: none !important;
		}

		.Columna_1 {
			display: table-header-group !important;
			width: 100% !important;
		}

		.Columna_2 {
			display: table-footer-group !important;
			width: 100% !important;
		}

		.Alinear_Texto_Center_Mob {
			text-align: center !important;
		}
		.Boton_Mobile_Center {
			margin: 0 auto !important;
			float: none !important;
			text-align: center !important;
		}

		.Display_Block {
			display: block !important;
		}
	}
	-->
</style>
</p>

<table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width: 600px;" width="100%">
	<tbody>
		<tr>
			<td align="center" height="20" style="height: 20px; font-size: 1px; font-family: Arial; line-height: 10px; mso-line-height-alt: 10px; mso-line-height-rule: exactly;" valign="top">&nbsp;</td>
		</tr>
		<tr>
			<td align="left" style="font-size: 0; padding: 0; margin: 0;" valign="top">
			<!-- PRODUCTO 1 -->
			<table align="center" border="0" cellpadding="0" cellspacing="0" class="img-max" role="presentation" width="100%">
				<tbody>
					<tr>
						<td height="1" style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" width="30">&nbsp;</td>
						<td align="left" style="font-family: Verdana, Arial, Helvetica, Open Sans, sans-serif; font-size: 20px; font-weight: bold; line-height: 24px; color: #ffffff;" width="560">
						<table align="center" border="0" cellpadding="0" cellspacing="0">
							<tbody>
								<tr>
									<td align="center" class="Columna_1" valign="middle" width="36%">
									<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
										<tbody>
											<tr>
												<td align="center" valign="middle" width="200"><a href="&lt;*url_prod1*&gt;" target="_blank"><img alt="&lt;*prod1_name*&gt;" src="&lt;*prod1_img_url*&gt;" style="width: 200px; max-width: 200px !important; display: block; font-family: Arial,Helvetica,Open Sans,sans-serif; font-size: 16px; font-weight: normal; line-height: 20px; color: #3c3c3a; text-align: left;" title="&lt;*prod1_name*&gt;" width="200" /></a></td>
											</tr>
											<tr>
												<td align="center" height="5" style="height: 5px; font-size: 1px; font-family: Arial; line-height: 5px; mso-line-height-alt: 5px; mso-line-height-rule: exactly;" valign="top">&nbsp;</td>
											</tr>
										</tbody>
									</table>
									</td>
									<td align="center" class="Columna_2" valign="middle" width="64%">
									<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
										<tbody>
											<tr>
												<td height="1" style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" width="30">&nbsp;</td>
												<td align="left">
												<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
													<tbody>
														<tr>
															<td align="center" class="Alinear_Texto_Center_Mob" style="font-family: Arial, Helvetica, Open Sans, sans-serif; font-size: 16px; font-weight: bold; line-height: 150%; color: #3c3c3a; text-align: left;"><a href="&lt;*url_prod1*&gt;" style="color: #3c3c3a; text-decoration: none;" target="_blank">&lt;*prod1_name*&gt;</a></td>
														</tr>
													</tbody>
												</table>

												<table align="left" border="0" cellpadding="0" cellspacing="0" class="Boton_Mobile_Center" role="presentation">
													<tbody>
														<tr>
															<td height="15" style="height: 15px; font-size: 1px; line-height: 15px;">&nbsp;</td>
														</tr>
														<tr>
															<td bgcolor="#000000" style="border-radius: 5px; text-align: center;"><a href="&lt;*url_prod1*&gt;" style="display: inline-block; font-family: Arial, Helvetica, Open Sans, sans-serif; font-size: 12px; color: #ffffff; text-decoration: none; padding: 8px 20px; border-radius: 5px; background-color: #000000; line-height:18px; font-weight: bold;" target="_blank"><span style="background-color:#000000;">COMPRAR </span></a></td>
														</tr>
													</tbody>
												</table>
												</td>
												<td height="1" style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" width="30">&nbsp;</td>
											</tr>
										</tbody>
									</table>
									</td>
								</tr>
							</tbody>
						</table>
						</td>
						<td height="1" style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" width="30">&nbsp;</td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
		<tr>
			<td height="16" style="height: 16px; font-size: 1px; line-height: 16px;">&nbsp;</td>
		</tr>
		<tr>
			<td align="left" style="font-size: 0; padding: 0; margin: 0;" valign="top">
			<!-- PRODUCTO 2 -->
			<table align="center" border="0" cellpadding="0" cellspacing="0" class="img-max" role="presentation" width="100%">
				<tbody>
					<tr>
						<td height="1" style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" width="30">&nbsp;</td>
						<td align="left" style="font-family: Verdana, Arial, Helvetica, Open Sans, sans-serif; font-size: 20px; font-weight: bold; line-height: 24px; color: #ffffff;" width="560">
						<table align="center" border="0" cellpadding="0" cellspacing="0">
							<tbody>
								<tr>
									<td align="center" class="Columna_1" valign="middle" width="36%">
									<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
										<tbody>
											<tr>
												<td align="center" valign="middle" width="200"><a href="&lt;*url_prod2*&gt;" target="_blank"><img alt="&lt;*prod2_name*&gt;" src="&lt;*prod2_img_url*&gt;" style="width: 200px; max-width: 200px !important; display: block; font-family: Arial,Helvetica,Open Sans,sans-serif; font-size: 16px; font-weight: normal; line-height: 20px; color: #3c3c3a; text-align: left;" title="&lt;*prod2_name*&gt;" width="200" /></a></td>
											</tr>
											<tr>
												<td align="center" height="5" style="height: 5px; font-size: 1px; font-family: Arial; line-height: 5px; mso-line-height-alt: 5px; mso-line-height-rule: exactly;" valign="top">&nbsp;</td>
											</tr>
										</tbody>
									</table>
									</td>
									<td align="center" class="Columna_2" valign="middle" width="64%">
									<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
										<tbody>
											<tr>
												<td height="1" style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" width="30">&nbsp;</td>
												<td align="left">
												<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
													<tbody>
														<tr>
															<td align="center" class="Alinear_Texto_Center_Mob" style="font-family: Arial, Helvetica, Open Sans, sans-serif; font-size: 16px; font-weight: bold; line-height: 150%; color: #3c3c3a; text-align: left;"><a href="&lt;*url_prod2*&gt;" style="color: #3c3c3a; text-decoration: none;" target="_blank">&lt;*prod2_name*&gt;</a></td>
														</tr>
													</tbody>
												</table>

												<table align="left" border="0" cellpadding="0" cellspacing="0" class="Boton_Mobile_Center" role="presentation">
													<tbody>
														<tr>
															<td height="15" style="height: 15px; font-size: 1px; line-height: 15px;">&nbsp;</td>
														</tr>
														<tr>
															<td bgcolor="#000000" style="border-radius: 5px; text-align: center;"><a href="&lt;*url_prod2*&gt;" style="display: inline-block; font-family: Arial, Helvetica, Open Sans, sans-serif; font-size: 12px; color: #ffffff; text-decoration: none; padding: 8px 20px; border-radius: 5px; background-color: #000000; line-height:18px; font-weight: bold;" target="_blank">COMPRAR </a></td>
														</tr>
													</tbody>
												</table>
												</td>
												<td height="1" style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" width="30">&nbsp;</td>
											</tr>
										</tbody>
									</table>
									</td>
								</tr>
							</tbody>
						</table>
						</td>
						<td height="1" style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" width="30">&nbsp;</td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
		<tr>
			<td align="center" height="20" style="height: 20px; font-size: 1px; font-family: Arial; line-height: 10px; mso-line-height-alt: 10px; mso-line-height-rule: exactly;" valign="top">&nbsp;</td>
		</tr>
	</tbody>
</table>
```

Referencia de visualización

![](https://storage.crisp.chat/users/helpdesk/website/-/e/4/b/4/e4b41ef8ae96c800/image_1ahag94.png)

###### HTML Estático para 3 productos con botón por producto

```
<p style="margin-top: 0px; margin-bottom: 0px;">
<style type="text/css"><!--
	.Alinear_Texto_Center_Mob {
		text-align: left;
	}
	/* MEDIA QUERIES */

	@media screen and (max-width: 600px) {
		.img-max {
			width: 100% !important;
			max-width: 100% !important;
			height: auto !important;
		}

		.img-max-60 {
			width: 60% !important;
			max-width: 60% !important;
			height: auto !important;
		}

		.mobile-hide {
			display: none !important;
		}

		.Columna_1 {
			display: table-header-group !important;
			width: 100% !important;
		}

		.Columna_2 {
			display: table-footer-group !important;
			width: 100% !important;
		}

		.Alinear_Texto_Center_Mob {
			text-align: center !important;
		}
		.Boton_Mobile_Center {
			margin: 0 auto !important;
			float: none !important;
			text-align: center !important;
		}

		.Display_Block {
			display: block !important;
		}
	}
	-->
</style>
</p>

<table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width: 600px;" width="100%">
	<tbody>
		<tr>
			<td align="center" height="20" style="height: 20px; font-size: 1px; font-family: Arial; line-height: 10px; mso-line-height-alt: 10px; mso-line-height-rule: exactly;" valign="top">&nbsp;</td>
		</tr>
		<tr>
			<td align="left" style="font-size: 0; padding: 0; margin: 0;" valign="top">
			<table align="center" border="0" cellpadding="0" cellspacing="0" class="img-max" role="presentation" width="100%">
				<tbody>
					<tr>
						<td height="1" style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" width="30">&nbsp;</td>
						<td align="left" style="font-family: Verdana, Arial, Helvetica, Open Sans, sans-serif; font-size: 20px; font-weight: bold; line-height: 24px; color: #ffffff;" width="560">
						<table align="center" border="0" cellpadding="0" cellspacing="0">
							<tbody>
								<tr>
									<td align="center" class="Columna_1" valign="middle" width="36%">
									<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
										<tbody>
											<tr>
												<td align="center" valign="middle" width="200"><a href="&lt;*url_prod1*&gt;" target="_blank"><img alt="&lt;*prod1_name*&gt;" src="&lt;*prod1_img_url*&gt;" style="width: 200px; max-width: 200px !important; display: block; font-family: Arial,Helvetica,Open Sans,sans-serif; font-size: 16px; font-weight: normal; line-height: 20px; color: #3c3c3a; text-align: left;" title="&lt;*prod1_name*&gt;" width="200" /></a></td>
											</tr>
											<tr>
												<td align="center" height="5" style="height: 5px; font-size: 1px; font-family: Arial; line-height: 5px; mso-line-height-alt: 5px; mso-line-height-rule: exactly;" valign="top">&nbsp;</td>
											</tr>
										</tbody>
									</table>
									</td>
									<td align="center" class="Columna_2" valign="middle" width="64%">
									<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
										<tbody>
											<tr>
												<td height="1" style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" width="30">&nbsp;</td>
												<td align="left">
												<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
													<tbody>
														<tr>
															<td align="center" class="Alinear_Texto_Center_Mob" style="font-family: Arial, Helvetica, Open Sans, sans-serif; font-size: 16px; font-weight: bold; line-height: 150%; color: #3c3c3a; text-align: left;"><a href="&lt;*url_prod1*&gt;" style="color: #3c3c3a; text-decoration: none;" target="_blank">&lt;*prod1_name*&gt;</a></td>
														</tr>
													</tbody>
												</table>

												<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
													<tbody>
													</tbody>
												</table>

												<table align="left" border="0" cellpadding="0" cellspacing="0" class="Boton_Mobile_Center" role="presentation">
													<tbody>
														<tr>
															<td height="15" style="height: 15px; font-size: 1px; line-height: 15px;">&nbsp;</td>
														</tr>
														<tr>
															<td bgcolor="#000000" style="border-radius: 5px; text-align: center;"><a href="&lt;*url_prod1*&gt;" style="display: inline-block; font-family: Arial, Helvetica, Open Sans, sans-serif; font-size: 12px; color: #ffffff; text-decoration: none; padding: 8px 20px; border-radius: 5px; background-color: #000000; line-height:18px; font-weight: bold;" target="_blank"><span style="background-color:#000000;">COMPRAR </span></a></td>
														</tr>
													</tbody>
												</table>
												</td>
												<td height="1" style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" width="30">&nbsp;</td>
											</tr>
										</tbody>
									</table>
									</td>
								</tr>
							</tbody>
						</table>
						</td>
						<td height="1" style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" width="30">&nbsp;</td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
		<tr>
			<td height="16" style="height: 16px; font-size: 1px; line-height: 16px;">&nbsp;</td>
		</tr>
		<tr>
			<td align="left" style="font-size: 0; padding: 0; margin: 0;" valign="top">
			<table align="center" border="0" cellpadding="0" cellspacing="0" class="img-max" role="presentation" width="100%">
				<tbody>
					<tr>
						<td height="1" style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" width="30">&nbsp;</td>
						<td align="left" style="font-family: Verdana, Arial, Helvetica, Open Sans, sans-serif; font-size: 20px; font-weight: bold; line-height: 24px; color: #ffffff;" width="560">
						<table align="center" border="0" cellpadding="0" cellspacing="0">
							<tbody>
								<tr>
									<td align="center" class="Columna_1" valign="middle" width="36%">
									<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
										<tbody>
											<tr>
												<td align="center" valign="middle" width="200"><a href="&lt;*url_prod2*&gt;" target="_blank"><img alt="&lt;*prod2_name*&gt;" src="&lt;*prod2_img_url*&gt;" style="width: 200px; max-width: 200px !important; display: block; font-family: Arial,Helvetica,Open Sans,sans-serif; font-size: 16px; font-weight: normal; line-height: 20px; color: #3c3c3a; text-align: left;" title="&lt;*prod2_name*&gt;" width="200" /></a></td>
											</tr>
											<tr>
												<td align="center" height="5" style="height: 5px; font-size: 1px; font-family: Arial; line-height: 5px; mso-line-height-alt: 5px; mso-line-height-rule: exactly;" valign="top">&nbsp;</td>
											</tr>
										</tbody>
									</table>
									</td>
									<td align="center" class="Columna_2" valign="middle" width="64%">
									<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
										<tbody>
											<tr>
												<td height="1" style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" width="30">&nbsp;</td>
												<td align="left">
												<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
													<tbody>
														<tr>
															<td align="center" class="Alinear_Texto_Center_Mob" style="font-family: Arial, Helvetica, Open Sans, sans-serif; font-size: 16px; font-weight: bold; line-height: 150%; color: #3c3c3a; text-align: left;"><a href="&lt;*url_prod2*&gt;" style="color: #3c3c3a; text-decoration: none;" target="_blank">&lt;*prod2_name*&gt;</a></td>
														</tr>
													</tbody>
												</table>

												<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
													<tbody>
														<tr>
														</tr>
													</tbody>
												</table>

												<table align="left" border="0" cellpadding="0" cellspacing="0" class="Boton_Mobile_Center" role="presentation">
													<tbody>
														<tr>
															<td height="15" style="height: 15px; font-size: 1px; line-height: 15px;">&nbsp;</td>
														</tr>
														<tr>
															<td bgcolor="#000000" style="border-radius: 5px; text-align: center;"><a href="&lt;*url_prod2*&gt;" style="display: inline-block; font-family: Arial, Helvetica, Open Sans, sans-serif; font-size: 12px; color: #ffffff; text-decoration: none; padding: 8px 20px; border-radius: 5px; background-color: #000000; line-height:18px; font-weight: bold;" target="_blank">COMPRAR </a></td>
														</tr>
													</tbody>
												</table>
												</td>
												<td height="1" style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" width="30">&nbsp;</td>
											</tr>
										</tbody>
									</table>
									</td>
								</tr>
							</tbody>
						</table>
						</td>
						<td height="1" style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" width="30">&nbsp;</td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
		<tr>
			<td height="16" style="height: 16px; font-size: 1px; line-height: 16px;">&nbsp;</td>
		</tr>
		<tr>
			<td align="left" style="font-size: 0; padding: 0; margin: 0;" valign="top">
			<table align="center" border="0" cellpadding="0" cellspacing="0" class="img-max" role="presentation" width="100%">
				<tbody>
					<tr>
						<td height="1" style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" width="30">&nbsp;</td>
						<td align="left" style="font-family: Verdana, Arial, Helvetica, Open Sans, sans-serif; font-size: 20px; font-weight: bold; line-height: 24px; color: #ffffff;" width="560">
						<table align="center" border="0" cellpadding="0" cellspacing="0">
							<tbody>
								<tr>
									<td align="center" class="Columna_1" valign="middle" width="36%">
									<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
										<tbody>
											<tr>
												<td align="center" valign="middle" width="200"><a href="&lt;*url_prod3*&gt;" target="_blank"><img alt="&lt;*prod3_name*&gt;" src="&lt;*prod3_img_url*&gt;" style="width: 200px; max-width: 200px !important; display: block; font-family: Arial,Helvetica,Open Sans,sans-serif; font-size: 16px; font-weight: normal; line-height: 20px; color: #3c3c3a; text-align: left;" title="&lt;*prod3_name*&gt;" width="200" /></a></td>
											</tr>
											<tr>
												<td align="center" height="5" style="height: 5px; font-size: 1px; font-family: Arial; line-height: 5px; mso-line-height-alt: 5px; mso-line-height-rule: exactly;" valign="top">&nbsp;</td>
											</tr>
										</tbody>
									</table>
									</td>
									<td align="center" class="Columna_2" valign="middle" width="64%">
									<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
										<tbody>
											<tr>
												<td height="1" style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" width="30">&nbsp;</td>
												<td align="left">
												<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
													<tbody>
														<tr>
															<td align="center" class="Alinear_Texto_Center_Mob" style="font-family: Arial, Helvetica, Open Sans, sans-serif; font-size: 16px; font-weight: bold; line-height: 150%; color: #3c3c3a; text-align: left;"><a href="&lt;*url_prod3*&gt;" style="color: #3c3c3a; text-decoration: none;" target="_blank">&lt;*prod3_name*&gt;</a></td>
														</tr>
													</tbody>
												</table>

												<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
													<tbody>
														<tr>
														</tr>
													</tbody>
												</table>

												<table align="left" border="0" cellpadding="0" cellspacing="0" class="Boton_Mobile_Center" role="presentation">
													<tbody>
														<tr>
															<td height="15" style="height: 15px; font-size: 1px; line-height: 15px;">&nbsp;</td>
														</tr>
														<tr>
															<td bgcolor="#000000" style="border-radius: 5px; text-align: center;"><a href="&lt;*url_prod3*&gt;" style="display: inline-block; font-family: Arial, Helvetica, Open Sans, sans-serif; font-size: 12px; color: #ffffff; text-decoration: none; padding: 8px 20px; border-radius: 5px; background-color: #000000; line-height:18px; font-weight: bold;" target="_blank">COMPRAR </a></td>
														</tr>
													</tbody>
												</table>
												</td>
												<td height="1" style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" width="30">&nbsp;</td>
											</tr>
										</tbody>
									</table>
									</td>
								</tr>
							</tbody>
						</table>
						</td>
						<td height="1" style="height: 1px; font-size: 1px; font-family: Arial; line-height: 1px; mso-line-height-alt: 1px; mso-line-height-rule: exactly;" width="30">&nbsp;</td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
		<tr>
			<td align="center" height="20" style="height: 20px; font-size: 1px; font-family: Arial; line-height: 10px; mso-line-height-alt: 10px; mso-line-height-rule: exactly;" valign="top">&nbsp;</td>
		</tr>
	</tbody>
</table>
```

Referencia de visualización

![](https://storage.crisp.chat/users/helpdesk/website/-/e/4/b/4/e4b41ef8ae96c800/image_17wa0f0.png)


