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?
En este artículo encontrarás las diferentes opciones de HTML disponibles para automatizar tu estrategia de remarketing desde Sitios:
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.
Ideal para newsletters que promocionan un solo producto, mostrando un botón específico de acción para cada producto.
Permite mostrar dos productos específicos en el newsletter, cada uno con su botón individual.
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:
- 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:
- Dejar vacíos los valores de las demás variables de ese producto (nombre, precio, botón, etc.).
¿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:
- Ingresar al módulo de Email Marketing -> Newsletters -> Crear Newsletter.
- Seleccionar la plantilla Editor.
- Una vez dentro del editor, selecciona un bloque de texto y haz click en Source:
- Copia y pega todo el contenido del código 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"> </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"> </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="<*url_prod1*>" target="_blank"><img src="<*prod1_img_url*>" alt="<*prod1_name*>" title="<*prod1_name*>" 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"> </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"> </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="<*url_prod1*>" style="color: #3c3c3a; text-decoration: none;" target="_blank"><*prod1_name*></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"> </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"> </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"> </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="<*url_prod2*>" target="_blank"><img src="<*prod2_img_url*>" alt="<*prod2_name*>" title="<*prod2_name*>" 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"> </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"> </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="<*url_prod2*>" style="color: #3c3c3a; text-decoration: none;" target="_blank"><*prod2_name*></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"> </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"> </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"> </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="<*url_prod3*>" target="_blank"><img src="<*prod3_img_url*>" alt="<*prod3_name*>" title="<*prod3_name*>" 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"> </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"> </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="<*url_prod3*>" style="color: #3c3c3a; text-decoration: none;" target="_blank"><*prod3_name*></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"> </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"> </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"> </td>
</tr>
</tbody>
</table>
- Arrastra el elemento Botón y personalízalo con el llamado a la acción que desees. Finalmente, invoca el campo <url_cart> para que cuando un usuario haga click, sea redirigido a su carrito abandonado.
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"> </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"> </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="<*url_prod1*>" target="_blank"><img alt="<*prod1_name*>" src="<*prod1_img_url*>" 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="<*prod1_name*>" 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"> </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"> </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="<*url_prod1*>" style="color: #3c3c3a; text-decoration: none;" target="_blank"><*prod1_name*></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;"> </td>
</tr>
<tr>
<td bgcolor="#000000" style="border-radius: 5px; text-align: center;"><a href="<*url_prod1*>" 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"> </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"> </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"> </td>
</tr>
</tbody>
</table>
Referencia de visualización
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"> </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"> </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="<*url_prod1*>" target="_blank"><img alt="<*prod1_name*>" src="<*prod1_img_url*>" 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="<*prod1_name*>" 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"> </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"> </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="<*url_prod1*>" style="color: #3c3c3a; text-decoration: none;" target="_blank"><*prod1_name*></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;"> </td>
</tr>
<tr>
<td bgcolor="#000000" style="border-radius: 5px; text-align: center;"><a href="<*url_prod1*>" 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"> </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"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="16" style="height: 16px; font-size: 1px; line-height: 16px;"> </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"> </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="<*url_prod2*>" target="_blank"><img alt="<*prod2_name*>" src="<*prod2_img_url*>" 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="<*prod2_name*>" 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"> </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"> </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="<*url_prod2*>" style="color: #3c3c3a; text-decoration: none;" target="_blank"><*prod2_name*></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;"> </td>
</tr>
<tr>
<td bgcolor="#000000" style="border-radius: 5px; text-align: center;"><a href="<*url_prod2*>" 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"> </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"> </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"> </td>
</tr>
</tbody>
</table>
Referencia de visualización
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"> </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"> </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="<*url_prod1*>" target="_blank"><img alt="<*prod1_name*>" src="<*prod1_img_url*>" 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="<*prod1_name*>" 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"> </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"> </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="<*url_prod1*>" style="color: #3c3c3a; text-decoration: none;" target="_blank"><*prod1_name*></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;"> </td>
</tr>
<tr>
<td bgcolor="#000000" style="border-radius: 5px; text-align: center;"><a href="<*url_prod1*>" 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"> </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"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="16" style="height: 16px; font-size: 1px; line-height: 16px;"> </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"> </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="<*url_prod2*>" target="_blank"><img alt="<*prod2_name*>" src="<*prod2_img_url*>" 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="<*prod2_name*>" 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"> </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"> </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="<*url_prod2*>" style="color: #3c3c3a; text-decoration: none;" target="_blank"><*prod2_name*></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;"> </td>
</tr>
<tr>
<td bgcolor="#000000" style="border-radius: 5px; text-align: center;"><a href="<*url_prod2*>" 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"> </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"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="16" style="height: 16px; font-size: 1px; line-height: 16px;"> </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"> </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="<*url_prod3*>" target="_blank"><img alt="<*prod3_name*>" src="<*prod3_img_url*>" 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="<*prod3_name*>" 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"> </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"> </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="<*url_prod3*>" style="color: #3c3c3a; text-decoration: none;" target="_blank"><*prod3_name*></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;"> </td>
</tr>
<tr>
<td bgcolor="#000000" style="border-radius: 5px; text-align: center;"><a href="<*url_prod3*>" 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"> </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"> </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"> </td>
</tr>
</tbody>
</table>
Referencia de visualización
Actualizado el: 01/10/2025
¡Gracias!