Crear un diseño de correo electrónico
El diseño de un correo electrónico es el propio correo: el asunto, el diseño y cualquier archivo adjunto. La acción Shopify Flow selecciona un diseño y un remitente y, a continuación, realiza el envío. 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 indica 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.
- Asunto: ofrece soporte para
{{ 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 los clientes esperan recibir, 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. Marketing: para boletines informativos, promociones y correos electrónicos de recuperación de clientes; cada destinatario recibe su propio correo electrónico 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 cambiar 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 su marca, 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 y 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 | Selector de archivos y un título. Véase Anexos e imágenes |
| Bucle | Repite un bloque de Liquid + HTML sobre una variable de matriz; utilícelo para los artículos |
| 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 |
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 entre columnas de 0 a 40, alineación vertical, relleno y contenidos independientes en las columnas izquierda y derecha |
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 de los títulos, tipo de letra del 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 la zona de contenido | 0-40 píxeles |
| Relleno de los bloques (lados) | 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 se encuentra 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, Helvetica, 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 zonas 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 bien 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 mediante un enlace.
La vista previa es de solo lectura y muestra las etiquetas Liquid tal y como están. Para ver los valores reales, envíe un correo electrónico de prueba.
Conexión 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 diseño cuenta con una tarjeta «Usar en Shopify Flow» que contiene las variables exactas (JSON) que debe pegar en la acción «Enviar correo electrónico transaccional», con todos los nombres de las claves ya correctamente configurados. Cópiela, péguela en Shopify Flow y sustituya cualquier marcador de posición <pick a Flow variable>.
Guía completa: Pasar datos desde Shopify Flow.
Vista previa con variables de prueba
La pestaña «Variables de prueba» muestra todas las variables de diseño ({{ variables.x }}) que la aplicación ha detectado, de modo que pueda introducir valores de ejemplo y comprobar que el diseño se visualiza correctamente.
Para introducir un array en un bloque «Loop», introdúzcalo como un array 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 diseño. Esta función muestra el diseño tal y como se vería realmente y lo envía a través de la dirección de 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 puesto el sistema en producción, compruebe el «Historial»: cualquier envío en el que un marcador de posición no haya generado ningún resultado aparecerá marcado 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 con las extensiones
.zipo.jsonque se hayan exportado 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 confirmación de eliminación se lo indicará, pero eso no le impedirá continuar.
Tras la eliminación, cualquier paso de Shopify Flow que siga haciendo referencia a él generará un error del tipo Email template not found, que aparecerá en el historial. Para solucionarlo, asigne a dichos pasos una plantilla diferente.
Relacionado
- Pasar datos desde Shopify Flow - introducir los valores.
- Variables y líquido - la referencia completa de la variable.
- Anexos 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 un diseño de marketing.
- Configuración - colores de la marca, fuentes personalizadas y ajustes predeterminados para los correos electrónicos de toda la tienda.