Bloques de contenido: producto, descuento, cuenta atrás, seguimiento y mucho más

La versión 1.17 añade trece bloques de contenido y dos bloques de diseño al editor visual. Todos los campos de texto de dichos bloques admiten Liquid, por lo que el título de un producto o un número de seguimiento pueden proceder del flujo de trabajo a través de {{ variables.xxx }}, y el lienzo muestra cada bloque renderizado con sus variables de prueba.

Bloques formados por piezas

La ficha del producto, el recuadro de descuentos, el testimonio, la firma, el vídeo y el bloque de seguimiento de pedidos se crean a partir de los bloques básicos que ya conoce, del mismo modo que el bloque «Imagen + Texto». Abra uno de ellos y el panel de configuración le mostrará sus partes: una imagen, un título, un texto, un precio y un botón. Haga clic en una parte para editarla con todas las opciones de configuración de ese bloque (anchura y alineación de la imagen, nivel del título, formato de texto enriquecido, estilo del botón y radio de las esquinas); utilice el icono del ojo para ocultar una parte que no necesite. Debajo de las partes se encuentran las opciones de configuración del propio bloque, como el diseño de la ficha o el estilo del marco.

Producto

Una ficha de producto. Elementos: imagen (subida o un enlace, como {{ variables.product_image }}), título, descripción (oculta hasta que se active), precio con un precio de comparación opcional que aparece tachado, y un botón. El enlace abarca la imagen y el título; el botón tiene su propio enlace. El diseño coloca la imagen encima del texto o junto a él, indicando el ancho de la imagen y la alineación vertical de la fila. Utilícelo para destacar un producto en un correo electrónico de pedido o de recuperación de clientes.

Precio

Una línea de precio independiente: el precio en negrita, un precio de comparación opcional tachado delante de él, la talla, el color y la alineación. Se trata de la sección de precio de la ficha del producto, disponible en cualquier lugar.

Cuadrícula de productos

Dos o tres tarjetas por fila a partir de una lista de sus variables, del mismo modo que funciona la tabla de artículos. Seleccione la variable en «List» (por ejemplo, variables.products) y, a continuación, asigne un nombre a la propiedad que contiene cada campo: title, price, compare_at_price, image, url. Cada entrada se convierte en una tarjeta con un botón del estilo y con el radio de esquina que elija; si falta una imagen o un enlace, simplemente se omite. Rellene la lista desde Shopify Flow con un paso «Ejecutar código» o con los artículos del pedido.

Código de descuento para descuentos

Un recuadro de código compuesto por un título, una descripción y un botón, dentro de un marco discontinuo, continuo o sin marco. Hay dos formas de rellenarlo:

• Un código que ya existe: introdúzcalo (o una variable). El botón le redirige a su tienda con el código aplicado en la pantalla de pago, a menos que le asigne un enlace propio.
• Cree un código único para cada correo electrónico: la aplicación genera un código de descuento de un solo uso en su tienda cuando se envía el correo electrónico, denominado PREFIX-XXXXXX, con el porcentaje o importe, la validez en días, el subtotal mínimo y la regla de «una vez por cliente» que usted establezca. El código aparece en el «Historial» junto con el envío, y la opción «Reenviar» del correo electrónico muestra el mismo código. Cada correo electrónico de marketing incluye un código por destinatario.

Para crear códigos se necesita el permiso «Descuentos», que el bloque solicita in situ y que puede retirar en la página «Permisos» (Permisos: qué datos de sus tiendas puede leer la aplicación). La aplicación solo crea códigos; nunca lee, modifica ni elimina otros descuentos. En un correo electrónico de prueba aparece un marcador de posición en lugar de crearse un código.

Cuenta atrás

Una cuenta atrás en tiempo real hasta una fecha y una hora determinadas. En el correo electrónico, se trata de una imagen animada que la aplicación muestra al abrir el mensaje, por lo que la cuenta atrás se ve en la bandeja de entrada; si el cliente de correo bloquea las imágenes, se muestra el texto junto a ella. El parámetro «Ends at» admite una fecha con zona horaria (2026-12-24T23:59:00+01:00) o una variable. Cuatro estilos: recuadros, tarjetas giratorias, minimalista y texto; tres tamaños; sus propias etiquetas y colores; y un texto que sustituye a la cuenta atrás una vez transcurrido el tiempo.

Seguimiento de pedidos

Empresa de transporte y número de seguimiento, una barra de progreso y dos elementos: un botón «Seguir» (que abre el enlace de seguimiento, a menos que se le indique otro) y una nota, como la fecha estimada de entrega, que permanece oculta hasta que se necesite. El estado del envío toma el estado de Shopify de Shopify Flow (IN_TRANSIT, OUT_FOR_DELIVERY, DELIVERED y demás) o un número de paso, y resalta los pasos hasta ese momento. Las etiquetas de los pasos las elige usted; puede haber entre dos y seis.

Valoración por estrellas

Estrellas correspondientes a un número ({{ variables.rating }}), redondeadas a estrellas enteras, con el resto en gris, un texto junto a ellas y un enlace opcional, por ejemplo, a su página de reseñas. Combínelo con un correo electrónico de solicitud de reseña.

Testimonio

Una cita y una línea del autor como elementos de texto, además de una fotografía opcional, en formato de tarjeta, con una barra de color a modo de detalle o sin adornos.

Enlaces a redes sociales

Una fila de iconos de redes sociales (Instagram, Facebook, X, LinkedIn, YouTube, TikTok, Pinterest y otros), con su tamaño y espaciado correspondientes. Los mismos iconos que se utilizan en el pie de página.

Vídeo

El correo electrónico no permite reproducir vídeos, por lo que este bloque muestra la miniatura con un botón de reproducción, enlazado a la página del vídeo, y un texto descriptivo opcional debajo. El botón de reproducción puede ser oscuro, claro o del color de la marca; también se pueden ajustar la altura y la anchura de la miniatura. Outlook para Windows no muestra la miniatura detrás del botón de reproducción; no obstante, el enlace sigue funcionando.

Firma

Una foto, un nombre (un título) y los datos (un texto: cargo, empresa, teléfono, correo electrónico, página web), con la foto redonda o cuadrada, a la izquierda o arriba. Los valores predeterminados son {{ shop.name }} y {{ shop.email }}.

Tabla

Una pequeña tabla de datos para datos de pedidos o especificaciones. Cada celda admite una variable; la primera fila puede servir de encabezado y las filas pueden alternarse.

Ver en el navegador

La típica frase «Ver este correo electrónico en su navegador». El enlace abre una versión web de ese mismo correo electrónico, generada a partir del diseño y los datos del mensaje enviado, y que permanecerá disponible durante 30 días. Un correo electrónico de prueba incluye un enlace al diseño con sus variables de prueba.

Columnas

Dos, tres o cuatro columnas iguales, cada una con sus propios bloques: tres fichas de productos una al lado de la otra, o iconos con una línea de texto debajo de cada uno.

Mostrar si

Una sección que solo se envía cuando se cumple una condición relacionada con sus variables. Escriba la condición tal y como la lee Liquid: variables.total > 100, language == "de", variables.tags contains "vip". El lienzo la evalúa con sus variables de prueba y atenúa la sección cuando esta no debe mostrarse. Coloque los bloques en su interior tal y como lo haría en una columna.

Relacionado

• Crear un diseño de correo electrónico - el constructor y todos los demás bloques.
• Pasar datos desde Shopify Flow - introducir los valores.
• Permisos: qué datos de sus tiendas puede leer la aplicación - el permiso «Descuentos».