Crear un diseño de correo electrónico
Crea diseños de correo electrónico transaccional y de marketing para Shopify Flow con el generador de bloques o HTML, y configura asunto y vista previa.
El diseño de un correo electrónico es el propio correo: el asunto, el diseño y cualquier archivo adjunto. La acción de Shopify Flow selecciona un diseño y un remitente, y a continuación lo envía. Dado que el diseño es independiente del flujo de trabajo, un mismo diseño puede utilizarse para todos los clientes sin que tenga que volver a modificar el código HTML.
La lista cuenta con dos pestañas, Transaccional y Marketing, y en cada una de ellas se muestra el número de plantillas que contiene. Se abre por defecto en la pestaña Transaccional, y todas las plantillas que haya creado antes de que existieran los tipos de correo electrónico se consideran transaccionales. Sus criterios de búsqueda, ordenación y paginación se mantienen al cambiar de pestaña. Un diseño de marketing lleva una insignia de Marketing junto a su nombre, y la opción Crear diseño de correo electrónico en la pestaña «Marketing» inicia el nuevo diseño como uno de marketing.
Crear un diseño
Vaya a Plantillas de correo electrónico y haga clic en Crear plantilla de correo electrónico. Deberá configurar lo siguiente:
- Nombre: cómo lo identifica. Solo usted puede verlo.
- Soporte: admite
{{ variables.xxx }}y{{ secrets.xxx }}. - Texto de vista previa: opcional. Se trata de la breve línea que la mayoría de las bandejas de entrada muestran junto al asunto. Intente que tenga entre 40 y 100 caracteres; ofrece el mismo soporte que el asunto. Si lo deja en blanco, el cliente de correo seleccionará en su lugar el primer texto de su correo electrónico.
- Descripción: opcional, para su propia referencia.
- Tipo de correo electrónico: transaccional, para los correos que esperan los clientes, como actualizaciones de pedidos y envíos; siempre se envían, incluso a los clientes que se han dado de baja de las comunicaciones de marketing. Correos de marketing: para boletines informativos, promociones y correos de recuperación de clientes; cada destinatario recibe su propio correo con un enlace para darse de baja y los datos de su empresa tal y como figuran en la configuración, y se omite a los clientes que se han dado de baja. A diferencia del editor, el tipo se puede modificar posteriormente en el editor de maquetación. Más detalles en Correos electrónicos de marketing y bajas de la lista de suscriptores.
A continuación, elija un editor:
| Editor | Ideal para |
|---|---|
| Generador visual | Correos electrónicos personalizados y con la imagen de marca de su empresa, creados a partir de bloques de «arrastrar y soltar» |
| Texto con formato / HTML | Notas transaccionales sencillas o un correo electrónico en HTML totalmente personalizado que pueda pegar |
El generador visual
El generador consiste en una pantalla dividida en dos paneles: los ajustes a la izquierda y una vista previa en tiempo real del lienzo a la derecha. Añada bloques mediante el botón Añadir sección o los marcadores + situados entre los bloques existentes.
El panel de la izquierda cuenta con cuatro pestañas:
| Pestaña | Qué contiene |
|---|---|
| General | Nombre, Asunto, Texto de vista previa, Descripción |
| Estrategia de marca | Colores, tipografía y espaciado en la maquetación de todo el correo electrónico |
| Bloques | Configuración del bloque que haya seleccionado en el lienzo |
| Variables de prueba | El fragmento de código JSON de Shopify Flow, la referencia de variables del sistema y los valores de ejemplo para la vista previa |
Cada bloque del lienzo dispone de controles que permiten arrastrarlo, duplicarlo, eliminarlo u ocultarlo sin borrarlo.
Referencia de bloque
Elementos
| Bloque | Configuración |
|---|---|
| Texto | Texto con formato, alineación, tamaño de fuente (12/14/16/18), color |
| Título | Texto del encabezado, tamaño (desde H1 extragrande hasta H4 pequeño), alineación, color |
| Imagen | Imagen (subida o enlace), texto alternativo, ancho del 10 al 100 %, alineación |
| Botón | Etiqueta, URL, estilo (Principal / Secundario / Esquema), alineación, radio del borde: 0-24 píxeles |
| Separador | Color, estilo (continuo / discontinuo / punteado), grosor 1-8 |
| Espaciado | Altura: 4-80 píxeles |
| Anexo | Un selector de archivos, un enlace o un metacampo relacionado con el pedido o el cliente del paso, y un título. Véase Archivos adjuntos e imágenes |
| Bucle | Repite un bloque de Liquid + HTML sobre una variable de matriz |
| HTML / Código | HTML sin formato con Liquid, incluidas las condiciones {% if %} |
| Código QR | Datos (URL o texto; soporte para variables), tamaño de 80 a 300 píxeles, alineación |
| Tabla de artículos detallados | Los artículos del pedido procedentes de una variable de lista, con filas correspondientes a la imagen, la cantidad, el precio y los totales |
Bloques de comercio y de contenido (novedad en la versión 1.17; consulte Bloques de contenido: producto, descuento, cuenta atrás, seguimiento y mucho más para obtener información detallada sobre cada uno de ellos)
| Bloque | Para qué sirve |
|---|---|
| Producto | Una ficha de producto: imagen, título, descripción, precio con precio de comparación y un botón. Cada campo admite una variable |
| Cuadrícula de productos | Dos o tres tarjetas por fila de una variable de lista, como la tabla de artículos |
| Código de descuento para descuentos | Un cuadro de código con un botón que aplica el código en la pantalla de pago. Puede tratarse de un código que usted introduzca o de un código único de un solo uso creado en su tienda para cada correo electrónico. |
| Cuenta atrás | Una cuenta atrás en directo hasta una fecha, que se muestra como una imagen animada al abrir el correo electrónico. Cuadros, tarjetas que se voltean, estilo minimalista o de texto |
| Seguimiento de pedidos | Transportista, número de seguimiento, un botón «Seguimiento» y una barra de progreso que se actualiza en función del estado del envío |
| Valoración por estrellas | Estrellas a partir de un número, con una etiqueta y un enlace opcional a su página de reseñas |
| Testimonio | Una cita con nombre, cargo y foto, en formato de tarjeta, con una barra de acento o sin formato |
| Enlaces a redes sociales | Una fila de iconos de red |
| Vídeo | Una miniatura con un botón de reproducción que enlaza con el vídeo |
| Firma | Nombre, cargo, empresa, teléfono, correo electrónico, página web y una fotografía |
| Tabla | Una pequeña tabla de datos en la que cada celda contiene una variable |
| Ver en el navegador | La típica frase «Ver este correo electrónico en su navegador» |
| Precio | Una línea de precio por sí sola: el precio, un precio de comparación opcional tachado, la talla, el color y la alineación |
Maquetación
| Bloque | Configuración |
|---|---|
| Imagen + Texto | Posición de la imagen (izquierda/derecha), ancho de la imagen (20-70 %), alineación vertical, espacio, color de fondo, además de los subcomponentes de imagen, texto y botón |
| Dos columnas | División de columnas (50/50, 33/67, 67/33, 40/60, 60/40), espacio de 0 a 40, alineación vertical, relleno y contenidos independientes para las columnas izquierda y derecha |
| Columnas | Dos, tres o cuatro columnas iguales, cada una con sus propios bloques |
| Mostrar si | Una sección que solo se envía cuando se cumple una condición relacionada con las variables; por ejemplo, variables.total > 100 o language == "de" |
Estrategia de marca
La pestaña Identidad corporativa se aplica a todo el diseño:
- Colores: primarios, secundarios, de texto, de fondo del cuerpo y de fondo del contenido
- Tipografía: tipo de letra para los títulos, tipo de letra para el cuerpo del texto, altura de línea
- Diseño: los controles de espaciado que aparecen a continuación
| Control | Qué cambia | Gama |
|---|---|---|
| Ancho máximo | ¿Hasta qué punto puede ampliarse el contenido del correo electrónico? | 400-800 píxeles |
| Relleno para contenedores | Espacio alrededor de toda el área de contenido | 0-40 píxeles |
| Relleno de los bloques (laterales) | Espacio entre su contenido y los bordes izquierdo y derecho | 0-40 píxeles |
| Relleno de bloques (superior e inferior) | Espacio por encima y por debajo del contenido de cada bloque | 0-40 píxeles |
| Espaciado entre bloques | Espacio vertical entre un bloque y el siguiente | 0-40 píxeles |
Mantenga el relleno de los bloques (superior e inferior) reducido. El espaciado entre bloques ya separa los bloques, por lo que aumentar ambos valores deja grandes huecos.
Si ha asignado nombres a los colores de la marca en Configuración > Marca y fuentes, todos los selectores de color del generador los mostrarán como muestras debajo del campo, y al hacer clic en una muestra se aplicará ese color. La muestra del color que figura actualmente en el campo aparecerá resaltada. Consulte Configuración.
El menú desplegable de fuentes ofrece las fuentes del sistema (Arial, Georgia, Verdana, Times New Roman, Helvética, Trebuchet MS), un conjunto de fuentes de Google (Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Raleway, Playfair Display, Merriweather, Source Sans 3, Oswald, Work Sans, DM Sans, Space Grotesk), así como cualquier fuente personalizada que haya subido en Configuración > Marca y fuentes.
Encabezado y pie de página
El encabezado y el pie de página son áreas en las que se puede hacer clic situadas en la parte superior e inferior del lienzo. En cada una de ellas puede utilizar un ajuste preestablecido guardado, de modo que cualquier cambio en su imagen de marca se aplique a todos los diseños a la vez, o la opción Personalizado (solo para este diseño) si desea realizar un cambio puntual. Consulte Plantillas de encabezado y pie de página.
Modo de texto enriquecido / HTML
En este modo, el cuerpo del texto es un único editor con un botón para alternar entre texto enriquecido y HTML y otro botón independiente para la vista previa.
- El texto enriquecido le ofrece una barra de herramientas de formato que le resultará familiar.
- El HTML le ofrece un campo de texto sin formato: pegue un correo electrónico ya diseñado si dispone de uno.
- La opción Insertar imagen permite añadir una imagen alojada, ya sea de su biblioteca multimedia o a través de un enlace.
La vista previa es de solo lectura y muestra las etiquetas de Liquid tal y como están. Para ver los valores reales, envíe un correo electrónico de prueba.
Conectarlo a Shopify Flow
El diseño es solo la mitad del trabajo: Shopify Flow debe proporcionar los valores para sus marcadores de posición.
Cada plantilla incluye una ficha «Usar en Shopify Flow» que contiene las variables exactas (JSON) que debe pegar en la acción Send Transactional Email, con todos los nombres de las claves ya correctamente configurados. Cópielas, péguelas en Shopify Flow y sustituya cualquier marcador de posición del tipo <pick a Flow variable>.
Usted elige el diseño de cada paso de Shopify Flow en la página de configuración de la acción, donde se muestra una vista previa del mismo rellenado con sus variables de prueba. Unos nombres claros y unas variables de prueba realistas facilitan la identificación del diseño adecuado en ese lugar.
Guía paso a paso completa: Pasar datos desde Shopify Flow.
Vista previa con variables de prueba
La pestaña Variables de prueba muestra todas las {{ variables.x }} que la aplicación ha detectado, de modo que pueda introducir valores de ejemplo y comprobar que el diseño se muestra correctamente.
Para introducir una matriz en un bloque Loop, introdúzcala como una matriz JSON en esta pestaña.
Envíe un correo electrónico de prueba
Utilice la opción Enviar correo electrónico de prueba en el editor de maquetación. Esta función muestra la maquetación tal y como se vería en realidad y la envía a través del remitente que usted elija, con el prefijo [TEST] en el asunto. Esta es la única forma de confirmar que su código Liquid se ejecuta correctamente, ya que la vista previa en la página no lo evalúa.
Una vez que haya publicado el contenido, compruebe el Historial: los envíos en los que un marcador de posición no haya generado ningún resultado aparecerán marcados como Variables vacías. Consulte Historial y resolución de problemas.
Reutilizar un diseño
- Más → La opción Guardar como plantilla guarda el diseño para que pueda volver a partir de él. Los diseños guardados se encuentran en Mis plantillas, donde solo se almacenan los diseños que usted mismo haya guardado.
- Más → Duplicar copia el diseño en el mismo lugar.
- Más → La opción Exportar permite descargar el archivo, y la opción Importar de la página de la lista admite archivos
.zipo.jsonexportados previamente desde la aplicación, lo cual resulta muy útil para trasladar un diseño de una tienda a otra.
Cómo eliminar una maquetación
Siempre puede eliminar un diseño. Si algún paso de Shopify Flow sigue haciendo referencia a él, el diseño aparecerá con la insignia Utilizado en Shopify Flow y la ventana de confirmación de eliminación se lo indicará, pero esto no le impedirá continuar.
Tras la eliminación, cualquier paso de Shopify Flow que siga haciendo referencia a ella dará error con el mensaje Email template not found, que aparecerá en el historial. Para solucionarlo, asigne a dichos pasos una plantilla diferente.
Relacionado
- Bloques de contenido: producto, descuento, cuenta atrás, seguimiento y mucho más: producto, descuento, cuenta atrás, seguimiento y el resto de bloques de contenido.
- Pasar datos desde Shopify Flow: cómo introducir los valores.
- Variables y líquido: la referencia completa de variables.
- Archivos adjuntos e imágenes: archivos, imágenes y límites de tamaño.
- Plantillas de encabezado y pie de página: imagen de marca reutilizable.
- Correos electrónicos de marketing y bajas de la lista de suscriptores: en qué se diferencia una plantilla de marketing.
- Configuración: colores de la marca, fuentes personalizadas y ajustes predeterminados de correo electrónico para toda la tienda.