Cómo mostrar los productos verticalmente en los correos electrónicos

Qué aprenderás

Aprenda a mostrar los productos en sus flujos de carrito abandonado y confirmación de pedido verticalmente (es decir, con una imagen encima de la información del producto, en lugar de al lado). 

Crear un bloque de producto vertical

Las instrucciones siguientes le ayudarán a convertir un bloque de producto horizontal existente en un bloque de producto vertical. Si aún no dispone de un correo electrónico de flujo que contenga un bloque de contenido dinámico, busque uno en la biblioteca de flujos. 

1. Seleccione Flujos en la barra lateral de Klaviyo.
2. Navegue hasta su carrito abandonado o flujo de confirmación de pedido. 
3. Haga clic en Actualizar estados de acción en la parte superior derecha para establecer el flujo en Manual mientras edita. 
4. Abra un mensaje en el flujo que contenga su bloque de contenido dinámico (es decir, el bloque de tabla que muestra los productos del carrito de alguien). 
5. Añada una nueva sección inmediatamente debajo del bloque de tabla dinámica.
   
6. Añada un bloque de imagen y un bloque de tabla a su nueva sección. 
7. Copie los valores de Configuración de la tabla > Colección de filas y Configuración de la tabla > Alias de filas. 
8. Vaya a Opciones de visualización y haga clic en Crear reglas de repetición.
   
9. Pegue los valores de su bloque de tablas en los campos Repetir para y Alias de artículo, respectivamente.
   
10. En su bloque de tabla, haga clic en Reemplazar bajo Imagen dinámica.
    
11. En el modal que aparece, copie todo lo que hay en el campo Variable dinámica o URL dinámica.
    
12. Haga clic en el bloque de imagen de su nueva sección.
13. Haga clic en Examinar biblioteca de imágenes. 
14. Seleccione Imagen dinámica y pegue la URL dinámica. 
15. Pulse Guardar. 
16. Copie la etiqueta que aparece en el campo Dirección del enlace de su bloque de tabla.
    
17. Pegue esta etiqueta en el campo Dirección del enlace de su nuevo bloque de imágenes. 
18. Copie el contenido del texto de su bloque de tabla original.
    
19. Pegue el texto en su nuevo bloque de texto. 
20. Previsualice su correo electrónico para asegurarse de que toda la información sobre el producto aparece en la nueva sección. Si algo parece incorrecto, compruebe que todos los elementos (es decir, la colección de filas, el alias de fila, la URL de la imagen dinámica y el contenido del texto) se transfieren correctamente. 
21. Cuando esté satisfecho con la nueva sección, elimine el bloque de tabla original. 
22. Opcionalmente, guarde la nueva sección como contenido universal para utilizarla en otros mensajes dentro del flujo. 

Resultado

Tras seguir estos pasos, su correo electrónico contendrá un bloque de productos vertical (con imágenes sobre la información del producto), en lugar de imágenes de productos e información mostradas horizontalmente. 

Recursos adicionales

• Mejores prácticas de diseño de correo electrónico en modo oscuro
• Cómo actualizar los estilos de su marca en Klaviyo