Personaliza las campañas de Shopify Messaging con Liquid

Liquid es el lenguaje de programación sencillo y fácil de usar de Shopify, y es el mismo lenguaje con el que se crean los temas del Shopify Theme Store.

Puedes usar Liquid personalizado para mejorar los mensajes de Shopify Messaging, ya sea creating an entirely custom-coded email o adding a custom Liquid section a una plantilla. Estas opciones te permiten introducir Liquid o HTML personalizados.

Puedes usar Liquid personalizado para mostrar recursos personalizados, como imágenes en paralelo, botones personalizados, imágenes con tamaño personalizado y tamaños de sección personalizados.

En esta página

Consideraciones

Revisa las siguientes consideraciones antes de empezar a agregar Liquid personalizado a los mensajes de Shopify Messaging:

Las variables que incluyas en el código deben ser supported by custom Liquid.
Solo puedes usar un equipo de escritorio para crear una sección de Liquid personalizada.
La variable unsubscribe_link o unsubscribe_url es obligatoria en los correos de Liquid personalizados. Si activaste el seguimiento de apertura, la variable open_tracking también es obligatoria. Learn more about adding required variables to your email.
El código que ingreses tiene los siguientes límites:
- Máximo 50 kilobytes (KB) para secciones de Liquid personalizadas.
- Máximo 500 KB para correos de Liquid codificados a medida.

Crear un correo codificado a medida con Liquid

Si quieres usar código Liquid personalizado cuando creas un correo, puedes add a custom Liquid section o crear un correo completamente a partir de código Liquid seleccionando Crear con tu propio código cuando create a Shopify Messaging campaign.

Variables de Liquid compatibles en Liquid personalizado

Puedes usar variables compatibles para personalizar con Liquid los correos de Shopify Messaging. Revisa las listas de variables de Liquid compatibles para los siguientes tipos de plantillas:

Variables de Liquid compatibles para todas las plantillas de correo

Puedes usar las siguientes variables para personalizar con Liquid cualquiera de los correos de Shopify Messaging.

Descripción de las variables de Liquid compatibles con Shopify Messaging
Variable	Descripción
all_products	All of the products de la tienda.
customer.accepts_marketing	Devuelve `true` si el cliente acepta recibir marketing y `false` en caso contrario.
customer.addresses	Devuelve todas las direcciones asociadas al cliente.
customer.addresses_count	Devuelve la cantidad de direcciones asociadas al cliente.
customer.b2b?	Devuelve `true` si el cliente es B2B y `false` en caso contrario.
customer.current_location	Devuelve la sucursal de la empresa seleccionada actualmente para el cliente.
customer.default_address	Devuelve la dirección predeterminada del cliente.
customer.email	Devuelve el correo electrónico del cliente.
customer.first_name	Devuelve el nombre del cliente.
customer.has_account	Devuelve `true` si el correo electrónico del cliente está asociado con una customer account y `false` en caso contrario.
customer.has_avatar?	Devuelve `true` si el cliente tiene un avatar asociado a la cuenta y `false` si no.
customer.id	Devuelve la identificación del cliente.
customer.last_name	Devuelve el apellido del cliente.
customer.last_order	Devuelve el último pedido del cliente, sin incluir los pedidos de prueba.
customer.name	Devuelve el nombre completo del cliente.
customer.orders	Devuelve todos los pedidos que el cliente ha realizado.
customer.orders_count	Devuelve el número total de pedidos que el cliente ha realizado.
customer.payment_methods	Devuelve las formas de pago guardadas del cliente.
customer.phone	Devuelve el número de teléfono del cliente. El número solo se completa si el cliente usó un número de teléfono en el pago, aceptó recibir notificaciones por SMS o si se agregó manualmente a la cuenta del cliente.
customer.store_credit_account.balance	Devuelve el saldo de crédito en tienda del cliente en la moneda asociada con el contexto correspondiente. Por ejemplo: `{{customer.store_credit_account.balance \| money_with_currency}}`
customer.tags	Devuelve las etiquetas asociadas al cliente.
customer.tax_exempt	Devuelve `true` si el cliente está exento de impuestos y `false` si no.
customer.total_spent	Devuelve el monto total que el cliente ha gastado en todos los pedidos de tu tienda.
email.*	Esta variable da acceso a las siguientes propiedades del correo electrónico: `subject` muestra el asunto del correo electrónico. `preview_text` muestra el texto de vista previa del correo electrónico.
open_tracking	Esta variable da acceso al bloque preformateado de open tracking. Esta variable es obligatoria si creas un custom-coded email y tienes activado el seguimiento de apertura.
shop.*	Esta variable da acceso a las siguientes propiedades de la tienda: `name` muestra el nombre de la tienda. `domain` muestra el dominio principal de la tienda. `url` muestra la URL de la tienda. `shopify_domain` muestra el dominio de Shopify de la tienda. `address` muestra la dirección de la tienda, que da acceso a las siguientes propiedades de la dirección: `address1` `address2` `city` `country` `phone` `province` `zip`
unsubscribe_url	Esta variable da acceso a la URL de cancelación de suscripción sin formato y se puede personalizar. Si creas un custom-coded email, debes incluir la variable `unsubscribe_url` o `unsubscribe_link`. Tanto `unsubscribe_url` como `unsubscribe_link` siempre apuntan al dominio principal de la tienda online y no se pueden modificar para dirigir a otro lugar.

Variables de Liquid compatibles para correos electrónicos de carrito abandonado

Puedes usar las siguientes variables para personalizar con Liquid los correos electrónicos de carrito abandonado de Shopify Messaging.

La variable abandoned_checkout solo se completa si el correo electrónico forma parte de una abandoned checkout marketing automation. De lo contrario, la variable es null.

Descripción de las variables de Liquid compatibles con Shopify Messaging para navegación, carrito y pago abandonados
Variable	Descripción
abandoned_checkout.*	Esta variable da acceso a las siguientes propiedades de un pedido abandonado: `url` muestra la URL del pedido abandonado. `line_items` muestra las primeras cinco líneas de artículo del pedido abandonado. Además, cada `line_items` objeto contiene las siguientes propiedades de cada producto: `components` `image_url` `product_title` `variant_title` `quantity` `line_items.components` muestra los componentes del pedido abandonado. Además, cada `components` objeto contiene las siguientes propiedades de cada componente: `image_url` `quantity` `product_title` `variant_title` `remaining_products_count` muestra la cantidad de líneas de artículo restantes si hay más de cinco líneas de artículo en el pedido abandonado.
id (checkout ID)	Una identificación única del proceso de pago para uso interno.
shop	El nombre de tu tienda Shopify.
name	El nombre del pedido abandonado, también conocido como número del proceso de pago.
total_price	El precio total del pedido (subtotal + costo de envío - descuento de envío + impuesto).
shipping_price	El precio de envío. Ejemplo: `{{ shipping_price \| money }}`
shipping_address	La shipping address.
billing_address	La billing address.
line_items	Una lista de todas las líneas de artículo del pedido abandonado.
unavailable_line_items	Una lista de todas las líneas de artículo del pedido abandonado que no están disponibles.
note	La nota adjunta al pedido abandonado.
landing_site	La ruta del sitio de destino que usó el cliente. Es la primera página a la que accedió al llegar a la tienda. Ejemplo: `/products/great-product?ref=my-tracking-token`
landing_site_ref	Extrae un parámetro de referencia del sitio de destino. Los parámetros de referencia pueden ser: `ref`, `source`, `r`. Si `landing_site` es `/products/great-product?ref=my-tracking-token`, entonces el `landing_site_ref` es `my-tracking-token`. Puedes realizar una acción si el parámetro de referencia es igual a un valor determinado: {% if landing_site_ref == 'my-tracking-token' %} My action... {% endif %}
referring_site	La URL de la fuente de la referencia que llevó al cliente a la tienda. Ejemplo: `https://www.google.com/?s=great+products`
created_at	La fecha y la hora en que el cliente creó el proceso de pago que abandonó.
closed_at	La fecha y la hora en que se cerró el proceso de pago.
customer_locale	El código de idioma de dos o tres letras de la región del cliente, opcionalmente seguido de un modificador de región. Por ejemplo, en , en-CA
item_count	Suma de las cantidades de todos los artículos.
unique_gateways	Lista de proveedores de pagos distintos disponibles en el pago.
discount	El descuento aplicado al carrito o a una línea de artículo en el pedido abandonado.
discounts	Lista de descuentos aplicados al pago.
successfully_applied_discounts	Los descuentos que se aplicaron correctamente en el pago.
discounts_amount	El monto total de los descuentos aplicados. Ejemplo: +$5.00
discounts_savings	El monto total ahorrado por los descuentos. Ejemplo: -$5.00
buyer_accepts_marketing	Devuelve true o false según si la clientela aceptó recibir marketing durante el pedido abandonado.
subtotal_line_items	Las líneas de artículo que se usan para calcular el subtotal en el pago, excluyendo cualquier línea de propina.
requires_shipping	Devuelve true si hay al menos un artículo en el pago que requiere envío.
subtotal_price	El subtotal de las líneas de artículo en el pago.
email	El correo electrónico asociado al pedido abandonado.
shop_name	El nombre de la tienda.
tax_lines	Los impuestos desglosados por tipo de impuesto: {% for tax_line in tax_lines %} {{ tax_line.title }} ({{ tax_line.rate_percentage }}%) : {{ tax_line.price \| money_with_currency }} {% endfor %}
tax_price	La suma de los impuestos de todos los artículos del pago.
attributes	Todos los attributes que se hayan asociado al pedido abandonado. Ejemplo: `{{ attributes.gift-note }}`
shipping_method	Información sobre el primer método de envío disponible en el pago.
shipping_methods	Los métodos de envío disponibles en el pago.
free	Devuelve true if the total price of the checkout is zero.
free_shipping	Devuelve true si el pago no requiere envío o si el envío no tiene costo.
different_billing_address	Devuelve true o false según si la dirección de envío es la misma que la de facturación.
customer	El objeto de cliente que contiene los atributos de la salida customer.
gift_cards	Las tarjetas de regalo aplicadas al pago.
gift_cards_amount	El monto del total del pago que se cubriría con tarjetas de regalo.
transactions	Las transacciones del pago.
shareable_url	La URL del primer producto en las líneas de artículo.
shareable_title	El nombre del producto de la primera línea de artículo.
total_tip	La propina total que la clientela agregó en el pago.
discount_applications	Describe por qué y cómo se aplicó un descuento a un artículo en el pago.
cart_level_discount_applications	Las aplicaciones de descuento del carrito.
currency	La moneda del pedido abandonado.
line_items_subtotal_price	La suma de los precios de todas las líneas de artículo del pago, después de aplicar cualquier descuento por línea de artículo.

Variables de Liquid para correos electrónicos de navegación abandonada y carrito abandonado

La variable abandoned_visit.* solo se completa si el correo forma parte de abandoned cart or abandoned product browse marketing automation. Revisa las siguientes propiedades a las que da acceso esta variable.

Descripción de las variables de Liquid compatibles con Shopify Messaging
Variable	Descripción
abandoned_visit.*	Esta variable da acceso a las siguientes propiedades de un carrito o una navegación abandonada: `url` muestra la URL del carrito o la navegación abandonada. `products_added_to_cart` muestra las primeras cinco líneas de artículo agregadas al carrito de la visita abandonada. Además, cada `products_added_to_cart` objeto contiene las siguientes propiedades de cada producto: `title` `image_url` `variant_title` `quantity` `products_viewed` muestra los primeros cinco productos vistos durante la visita abandonada. Además, cada `products_viewed` objeto contiene las siguientes propiedades de cada producto: `title` `description` `image_url` `url` `image_alt_text` `remaining_cart_products_count` muestra la cantidad de líneas de artículo restantes si hay más de cinco líneas de artículo en el pedido abandonado.

Uso de variables obligatorias

Cuando creas un correo electrónico personalizado en Liquid, es obligatorio incluir la variable unsubscribe_link o unsubscribe_url. Si activaste el seguimiento de apertura, la variable open_tracking también es obligatoria.

Aunque estas variables se pueden insertar en cualquier parte del código del correo electrónico, lo más común es agregarlas en el pie de página del correo, como en el siguiente ejemplo:

<div id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>

Ejemplo de código Liquid personalizado

Puedes agregar Liquid o HTML personalizado en el editor de código. El siguiente código es un ejemplo de cómo agregar código Liquid para mostrar el nombre de la tienda, un botón personalizado y una imagen con tamaño personalizado en un correo electrónico.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ shop.name }} Newsletter</title>
</head>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; line-height: 1.5; color: #333333; background-color: #f5f5f5;">
    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #f5f5f5;">
        <tr>
            <td align="center" style="padding: 20px;">
                <table cellpadding="0" cellspacing="0" border="0" width="600" style="background-color: #ffffff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                    <!-- Header -->
                    <tr>
                        <td align="center" style="background-color: #4a6de5; padding: 30px 20px; color: #ffffff;">
                            <h1 style="margin: 0; font-size: 28px; font-weight: bold;">{{ shop.name }}</h1>
                            <p style="margin: 10px 0 0; font-size: 16px;">Your Book Journey with Us</p>
                        </td>
                    </tr>

                    <!-- Content -->
                    <tr>
                        <td style="padding: 30px 20px;">
                            <!-- Greeting Section -->
                            <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 30px;">
                                <tr>
                                    <td>
                                        <h2 style="margin: 0 0 15px; font-size: 22px; color: #222222;">Hello {{ customer.name }}!</h2>
                                        <p style="margin: 0 0 15px; font-size: 15px;">We hope this email finds you well. We noticed you're from {{ customer.default_address.city }}.</p>
                                        {% if customer.email %}
                                            <p style="margin: 0 0 15px; font-size: 15px;">Your registered email is: {{ customer.email }}</p>
                                        {% endif %}
                                    </td>
                                </tr>
                            </table>

                            <!-- Reading Journey Section -->
                            <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 30px;">
                                <tr>
                                    <td>
                                        <h2 style="margin: 0 0 15px; font-size: 20px; color: #4a6de5;">Your Reading Journey</h2>
                                        <p style="margin: 0 0 15px; font-size: 15px;">Thank you for being a loyal customer! Here's a snapshot of your journey:</p>
                                        <p style="margin: 0 0 15px; font-size: 15px;">You purchased {{ customer.orders_count }} books with us.</p>
                                        {% if customer.last_order %}
                                            <p style="margin: 0 0 15px; font-size: 15px;"> You last read {{customer.last_order.line_items[0].title}}. Great choice! </p>
                                          {% endif %}
                                    </td>
                                </tr>
                            </table>

                            <!-- Recommended Books Section -->
                            <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 30px;">
                                <tr>
                                    <td>
                                        <h2 style="margin: 0 0 15px; font-size: 20px; color: #4a6de5;">Books You Might Love</h2>
                                        <p style="margin: 0 0 15px; font-size: 15px;">Based on your reading preferences, we've handpicked these titles just for you:</p>

                                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                            <tr>
                                                <td width="50%" style="padding-right: 10px;">
                                                    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #f9f9f9; border-radius: 4px; padding: 15px;">
                                                        <tr>
                                                            <td align="center">
                                                                <!-- Image with proper email attributes -->
                                                                <img src="https:{{ all_products['product-1-handle'] | image_url: width: 200 }}"
                                                                     alt="Product 1"
                                                                     width="200"
                                                                     height="200"
                                                                     style="display: block; border: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;"
                                                                     title="Product 1"
                                                                     border="0">
                                                                <h3 style="margin: 0 0 10px; font-size: 16px; color: #333333;">{{ all_products['product-1-handle'].title }}</h3>
                                                                <p style="margin: 0 0 10px; font-size: 15px; color: #4a6de5;">${{ all_products['product-1-handle'].price }}</p>
                                                                <a href="{{shop.domain}}{{ all_products['product-1-handle'].url }}" style="display: inline-block; background-color: #4a6de5; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 4px; font-size: 14px;">View Book</a>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td width="50%" style="padding-left: 10px;">
                                                    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #f9f9f9; border-radius: 4px; padding: 15px;">
                                                        <tr>
                                                            <td align="center">
                                                                <!-- Image with proper email attributes -->
                                                                <img src="https:{{ all_products['product-2-handle'] | image_url: width: 200 }}"
                                                                     alt="Product 2"
                                                                     width="200"
                                                                     height="200"
                                                                     style="display: block; border: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;"
                                                                     title="Product 2"
                                                                     border="0">
                                                                <h3 style="margin: 0 0 10px; font-size: 16px; color: #333333;">{{ all_products['product-2-handle'].title }}</h3>
                                                                <p style="margin: 0 0 10px; font-size: 15px; color: #4a6de5;">${{ all_products['product-2-handle'].price }}</p>
                                                                <a href="{{shop.domain}}{{ all_products['product-2-handle'].url }}" style="display: inline-block; background-color: #4a6de5; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 4px; font-size: 14px;">View Book</a>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>

                            <!-- Book Club Section -->
                            <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 30px;">
                                <tr>
                                    <td style="background-color: #f5f7ff; border-radius: 4px; padding: 25px; text-align: center;">
                                        <h2 style="margin: 0 0 15px; font-size: 18px; color: #333333;">This Month's Top Picks</h2>
                                        <p style="margin: 0 0 20px; font-size: 15px;">Discover what other readers are loving this month:</p>
                                        <a href="{{ shop.url }}/pages/book-club" style="display: inline-block; background-color: #4a6de5; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 4px; font-size: 14px;">Join Our Book Club</a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>

                    <!-- Footer -->
                    <tr>
                        <td style="background-color: #f2f2f2; padding: 30px 20px; text-align: center;">
                            <p style="margin: 0 0 15px; font-size: 15px;">Best regards,<br><strong>{{ shop.name }} Team</strong></p>
                            <p style="margin: 0 0 15px; font-size: 12px; color: #999999;">© {{ 'now' | date: '%Y' }} {{ shop.name }}. All rights reserved.</p>
                            <p style="margin: 0 0 15px; font-size: 12px;">{{ open_tracking_block }}</p>
                            <a href="{{ unsubscribe_url }}" style="color: #999999; font-size: 12px; text-decoration: underline;">{{ unsubscribe_link }}</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>