Personaliza tus campañas de Shopify Email usando Liquid

Liquid es un lenguaje de programación simple y fácil de usar de Shopify y es con el que se construyen los temas de la tienda de temas de Shopify.

Puedes usar Liquid personalizado para mejorar tus mensajes de Shopify Email creando un correo electrónico completamente personalizado o agregando una sección de Liquid personalizada a una plantilla. Estas opciones te permiten introducir Liquid personalizado o HTML.

Puedes usar Liquid personalizado para mostrar recursos personalizados como imágenes lado a lado, botones personalizados, imágenes de tamaño personalizado y tamaños de secciones personalizados.

Consideraciones

Revisa las siguientes consideraciones antes de comenzar a agregar Liquid personalizado a los mensajes de Shopify Email:

  • Las variables que incluyas en el código deben ser compatibles con Liquid personalizado.
  • Solo puedes usar un dispositivo de escritorio para crear una sección de Liquid personalizada.
  • La variable unsubscribe_link o unsubscribe_url es obligatoria en los correos electrónicos de Liquid personalizado. Si activaste el seguimiento de apertura, la variable open_tracking también es obligatoria. Obtén más información sobre cómo agregar variables obligatorias al correo electrónico.
  • El código que introduces tiene los siguientes límites: - Máximo de 50 kilobytes (KB) para secciones de Liquid personalizado. - Máximo de 500 KB para correos electrónicos de Liquid con código personalizado.

Variables de Liquid admitidas en Liquid personalizado

Puedes utilizar variables compatibles para personalizar tus mensajes de correo electrónico de Shopify con Liquid. Puedes revisar las listas de variables Liquid compatibles para los siguientes tipos de plantillas:

Variables de Liquid admitidas para todas las plantillas de correo electrónico

Puedes usar las siguientes variables para personalizar todos tus mensajes de correo electrónico de Shopify con Liquid.

Descripción de las variables Liquid compatibles con Shopify Email
VariableDescripción
all_products
Todos los productos de tu tienda.
customer.accepts_marketing
Devuelve true si el cliente acepta el marketing y false si no lo hace.
customer.addresses
Devuelve todas las direcciones asociadas con el cliente.
customer.addresses_count
Devuelve la cantidad de direcciones asociadas con el cliente.
customer.b2b?
Devuelve true si el cliente es un cliente B2B y false si no lo es.
customer.current_location
Devuelve la sucursal de la empresa seleccionada actualmente para el cliente.
customer.default_address
Devuelve las direcciones predeterminadas del cliente.
customer.email
Muestra la dirección de 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 cuenta de cliente y false si no lo está.
customer.has_avatar?
Devuelve true si el cliente tiene un Avatar asociado a su cuenta y false si no lo tiene.
customer.id
Devuelve el ID del cliente.
customer.last_name
Devuelve el apellido del cliente.
customer.last_order
Devuelve el último pedido realizado por el cliente, sin incluir el pedido de prueba.
customer.name
Devuelve el apellido del cliente.
customer.orders
Devuelve todos los pedidos que realizó el cliente.
customer.orders_count
Devuelve la cantidad total de pedidos que realizó el cliente.
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 de teléfono se completa únicamente si el cliente utilizó un número de teléfono al realizar el pago, se suscribió a las notificaciones SMS o si agregaste este dato manualmente a su cuenta de cliente.
customer.tags
Devuelve las etiquetas asociadas con el cliente.
customer.tax_exempt
Devuelve true si el cliente se encuentra exento del pago de impuestos y false si no lo está.
customer.total_spent
Devuelve el importe total que pagó el cliente por todos los pedidos de tu tienda.
email.*

Esta variable otorga acceso a las siguientes propiedades de correo electrónico:

  • subject muestra la línea del asunto del correo electrónico.
  • preview_text muestra el texto de vista previa del correo electrónico.
  • open_tracking
    Esta variable brinda acceso al bloque preformateado de seguimiento de correos abiertos. Es obligatoria si creas un correo electrónico con código personalizado y activaste el seguimiento de correos abiertos.
    shop.*
    Esta variable brinda 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.
    • address muestra la dirección de la tienda, lo que permite acceder a las siguientes propiedades de dirección:
      • address1
      • address2
      • city
      • país
      • teléfono
      • province
      • Código postal
    unsubscribe_url
    Esta variable otorga acceso a la URL sin procesar para darse de baja y se puede personalizar. Si creas un correo electrónico con código personalizado, debes incluir la variable unsubscribe_url o unsubscribe_link.

    Variables de Liquid admitidas para los correos electrónicos de pedido abandonado

    Puedes usar las siguientes variables para personalizar tus mensajes de correo electrónico de pedido abandonado de Shopify con Liquid.

    La variable abandoned_checkout se llena solo si un correo electrónico es parte de una automatización de marketing de pedido abandonado. En el resto de los casos, la variable es null.

    Descripción de las variables de Liquid que admite Shopify Email para navegaciones, carritos y pedidos abandonados
    VariableDescripción
    abandoned_checkout.*

    Esta variable otorga acceso a las siguientes propiedades de un pedido abandonado:

    • url muestra la URL del pago abandonado.
    • line_items muestra las primeras cinco líneas de artículo del pedido abandonado. Además, cada objeto line_items contiene las siguientes propiedades sobre cada producto:
      • componentes
      • image_url
      • product_title
      • variant_title
      • quantity
    • line_items.components muestra los componentes del pedido abandonado. Además, cada objeto de componentes contiene las siguientes propiedades sobre cada componente:
      • image_url
      • quantity
      • product_title
      • variant_title
    • remaining_products_count muestra el número de líneas de artículos restantes, si hay más de cinco líneas de artículo en el pedido abandonado.
    id
    (checkout ID)
    Una identificación única de la pantalla de pago para uso interno.
    shop
    El nombre de tu tienda de Shopify.
    name
    El nombre del pedido abandonado, también conocido como número de pago.
    total_price
    Precio total del pedido (subtotal + costo de envío - descuento de envío + impuestos).
    shipping_price

    El precio de envío.

    Ejemplo: {{ shipping_price | money }}

    shipping_address
    La dirección de envío.
    billing_address
    La dirección de facturación.
    line_items
    Una lista con todas las líneas de artículo incluidas en el pedido abandonado.
    unavailable_line_items
    Una lista con todas las líneas de artículo incluidas en el pedido abandonado que no están disponibles.
    note
    La nota que se adjunta al pedido abandonado.
    landing_site

    La ruta del sitio de destino que utilizó el cliente. Esta es la primera página a la que el cliente accede cuando llega 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 y r.

    Si landing_site es /products/great-product?ref=my-tracking-token, entonces el landing_site_ref es my-tracking-token. Puedes efectuar una acción determinada si tu parámetro de referencia es igual a cierto valor:

    {% 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 tu tienda.

    Ejemplo: https://www.google.com/?s=great+products

    created_at

    La fecha y hora en que el cliente creó el pedido que abandonó.

    closed_at

    La fecha y hora en que se cerró la pantalla de pago.

    customer_locale
    El código de idioma de dos o tres letras de la configuración regional del cliente, opcionalmente seguido por un modificador de región. Por ejemplo,
    en
    ,
    en-CA
    item_count
    Una suma de todas las cantidades de los artículos.
    unique_gateways
    Una lista de proveedores de pago únicos disponibles en la pantalla de pago.
    discount
    El descuento aplicado al carrito o a una línea de artículo en el pedido abandonado.
    discounts
    Una lista de descuentos aplicados en la pantalla de pago.
    successfully_applied_discounts
    Los descuentos que se aplicaron correctamente en la pantalla de pago.
    discounts_amount

    El monto del descuento que aplican todos los descuentos.

    Ejemplo: +$5,00

    discounts_savings

    El monto ahorrado gracias a todos los descuentos.

    Ejemplo: -$5,00

    buyer_accepts_marketing
    Devoluciones
    verdadero
    O
    falso
    dependiendo de si el cliente aceptó el marketing durante el pedido abandonado.
    subtotal_line_items
    Las líneas de artículo que se usan para calcular el precio del subtotal en la pantalla de pago, excluyendo cualquier línea de artículo de propina.
    requires_shipping
    Devoluciones
    verdadero
    si hay al menos un artículo en la pantalla de pago que requiere envío.
    subtotal_price
    El precio del subtotal de las líneas de artículo en la pantalla de pago.
    email
    El correo electrónico asociado al pedido abandonado.
    shop_name
    El nombre de tu tienda.
    tax_lines

    Los impuestos desglosados por tipo:

    {% for tax_line in tax_lines %} {{ tax_line.title }} ({{ tax_line.rate_percentage }}%) : {{ tax_line.price | money_with_currency }} {% endfor %}
    tax_price
    Los impuestos combinados de todos los artículos que figuran en la pantalla de pago.
    attributes

    Cualquier atributo vinculado al pedido abandonado.

    Ejemplo: {{ attributes.gift-note }}

    shipping_method
    Información sobre el primer método de envío disponible en la pantalla de pago.
    shipping_methods
    Los métodos de envío disponibles en la pantalla de pago.
    free
    Devoluciones
    verdadero si el precio total del pago es cero.
    free_shipping
    Devoluciones
    verdadero
    si ningún artículo en la pantalla de pago requiere envío, o si el precio del envío es cero.
    different_billing_address
    Devoluciones
    verdadero
    O
    falso
    en función de si la dirección de envío es la misma que la de facturación.
    customer
    El objeto de cliente que contiene los atributos del resultado de cliente.
    gift_cards
    Las tarjetas de regalo que se aplicaron en la pantalla de pago.
    gift_cards_amount
    El monto del precio de pago que se abonaría con tarjetas de regalo.
    transactions
    Las transacciones durante el proceso de 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 el cliente agregó en la pantalla de pago.
    discount_applications
    Describe el motivo y la forma en que se aplicó un descuento a un artículo en la pantalla de pago.
    cart_level_discount_applications
    Las solicitudes de descuento específicas para el carrito.
    currency
    La moneda del pedido abandonado.
    line_items_subtotal_price
    La suma de los precios de todas las líneas de artículo de la pantalla de pago, después de aplicar cualquier descuento en líneas de artículo.

    Variables de Liquid para los correos electrónicos de carrito y navegación abandonados

    La variable abandoned_visit.* se rellena solo si un correo electrónico es parte de una automatización de marketing de un carrito abandonado o una navegación de producto abandonada. Revisa las siguientes propiedades a las que esta variable concede acceso.

    Descripción de las variables Liquid compatibles con Shopify Email
    VariableDescripción
    abandoned_visit.*

    Esta variable otorga acceso a las siguientes propiedades de un carrito abandonado o de navegación:

    • url muestra la URL del carrito o la navegación abandonados.
    • products_added_to_cart muestra las primeras cinco líneas de artículos de productos agregadas al carrito de la visita abandonada. Además, cada objeto products_added_to_cart contiene las siguientes propiedades sobre cada producto:
      • título
      • image_url
      • variant_title
      • quantity
    • products_viewed muestra los primeros cinco productos vistos durante la visita abandonada. Además, cada objeto products_viewed contiene las siguientes propiedades sobre cada producto:
      • título
      • descripción
      • image_url
      • URL
      • image_alt_text
    • remaining_cart_products_count muestra el número de líneas de artículos restantes, si hay más de cinco líneas de artículo en el pedido abandonado.

    Usar las variables obligatorias

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

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

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

    Ejemplo de código Liquid personalizado

    Puedes agregar Liquid y HTML personalizados 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 de tamaño personalizado en un mensaje de 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>
    ¿No encuentras las respuestas que estás buscando? Estamos aquí para ayudarte.