Cómo mostrar productos verticalmente en el correo electrónico

Objetivos de aprendizaje

Aprende a mostrar los productos en tu carrito abandonado y en el flujo de 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 te ayudarán a convertir un bloque de producto horizontal existente en un bloque de producto vertical. Si aún no tienes un flujo correo electrónico que contenga un bloque de contenido dinámico, busca uno en la biblioteca de flujos. 

1. Selecciona flujo en la barra lateral Klaviyo.
2. Navega a tu carrito abandonado o al flujo de confirmación de pedido. 
3. Haz clic en Actualizar estados de acción en la parte superior derecha para establecer el flujo en Manual mientras editas. 
4. Abre un correo electrónico en el flujo que contenga tu bloque de contenido dinámico (es decir, el bloque de tabla que muestra los productos del carrito de alguien). 
5. Añade una nueva sección inmediatamente debajo del bloque de tabla dinámica.
   
6. Añade un bloque de imagen y un bloque de tabla a tu nueva sección. 
7. Copia los valores de Configuración de la tabla > Colección de filas y Configuración de la tabla > Alias de filas. 
8. Ve a Opciones de visualización y haz clic en Crear reglas de repetición.
   
9. Pega los valores de tu bloque de tabla en los campos Repetir para y Alias de artículo, respectivamente.
   
10. En tu bloque de tabla, haz clic en Reemplazar bajo Imagen dinámica.
    
11. En el modal que aparece, copia todo lo que hay en el campo Variable dinámica o URL dinámica.
    
12. Haz clic en el bloque de imagen de tu nueva sección.
13. Haz clic en Examinar biblioteca de imágenes. 
14. Selecciona Imagen dinámica y pega la URL dinámica. 
15. Haz clic en Guardar. 
16. Copia la etiqueta que aparece en el campo Dirección del enlace de tu bloque de tabla.
    
17. Pega esta etiqueta en el campo Dirección del enlace de tu nuevo bloque de imágenes. 
18. Copia el contenido del texto de tu bloque de tabla original.
    
19. Pega el texto en tu nuevo bloque de texto. 
20. Previsualiza tu correo electrónico para asegurarte de que toda la información del producto aparece en la nueva sección. Si algo parece incorrecto, comprueba 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 transfirieron correctamente. 
21. Cuando estés satisfecho con la nueva sección, elimina el bloque de tabla original. 
22. Opcionalmente, guarda la nueva sección como contenido universal para utilizarla en otros mensajes dentro del flujo. 

Resultado

Después de seguir estos pasos, tu correo electrónico contendrá un bloque de producto vertical (con imágenes sobre la información del producto), en lugar de imágenes de producto 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 tu marca en Klaviyo