¿Cómo implementar HTML para Carrito Personalizado y Remarketing?

En icomm contamos con una versión de HTML diseñada para mostrar hasta 3 productos en el correo de carrito abandonado y/o 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.).

¿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 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_carrito*&gt;" target="_blank"><img src="&lt;*img_prod1*&gt;" alt="&lt;*nombre_prod_1*&gt;" title="&lt;*nombre_prod_1*&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: 10px; font-size: 1px; font-family: Arial; line-height: 10px; mso-line-height-alt: 10px; mso-line-height-rule: exactly;" height="10" 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">&lt;*nombre_prod_1*&gt;</td></tr></tbody></table><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: normal; line-height: 150%; color: #3c3c3a; text-align: left;" align="center">&lt;*precio_prod_1*&gt;</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><tr><td colspan="3" style="height: 10px; font-size: 1px; font-family: Arial; line-height: 10px; mso-line-height-alt: 10px; mso-line-height-rule: exactly;" height="10" valign="top" align="center">&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_carrito*&gt;" target="_blank"><img src="&lt;*img_prod2*&gt;" alt="&lt;*nombre_prod_2*&gt;" title="&lt;*nombre_prod_2*&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: 10px; font-size: 1px; font-family: Arial; line-height: 10px; mso-line-height-alt: 10px; mso-line-height-rule: exactly;" height="10" 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">&lt;*nombre_prod_2*&gt;</td></tr></tbody></table><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: normal; line-height: 150%; color: #3c3c3a; text-align: left;" align="center">&lt;*precio_prod_2*&gt;</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><tr><td colspan="3" style="height: 10px; font-size: 1px; font-family: Arial; line-height: 10px; mso-line-height-alt: 10px; mso-line-height-rule: exactly;" height="10" valign="top" align="center">&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_carrito*&gt;" target="_blank"><img src="&lt;*img_prod3*&gt;" alt="&lt;*nombre_prod_3*&gt;" title="&lt;*nombre_prod_3*&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: 10px; font-size: 1px; font-family: Arial; line-height: 10px; mso-line-height-alt: 10px; mso-line-height-rule: exactly;" height="10" 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">&lt;*nombre_prod_3*&gt;</td></tr></tbody></table><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: normal; line-height: 150%; color: #3c3c3a; text-align: left;" align="center">&lt;*precio_prod_3*&gt;</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><tr><td colspan="3" style="height: 10px; font-size: 1px; font-family: Arial; line-height: 10px; mso-line-height-alt: 10px; mso-line-height-rule: exactly;" height="10" valign="top" align="center">&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>

¡Y listo! Personaliza el newsletter con imágenes y botones acorde a tus preferencias.

Accede a nuestro artículo sobre Cómo crear el Pop Up de Carrito Abandonado.

Accede a nuestro artículo sobre Cómo implementar Remarketing de Productos.

Actualizado el: 23/05/2025