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.
En esta página
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
ounsubscribe_url
es obligatoria en los correos electrónicos de Liquid personalizado. Si activaste el seguimiento de apertura, la variableopen_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:
- Todas las plantillas de correo electrónico
- Plantillas de correo electrónico para pedidos abandonados
- Plantillas de correo electrónico de carritos y búsquedas abandonados
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.
Variable | Descripció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.
|
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.
Variable | Descripción |
---|---|
abandoned_checkout.* |
Esta variable otorga acceso a las siguientes propiedades de un 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_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: |
landing_site_ref |
Extrae un parámetro de referencia del sitio de destino. Los parámetros de referencia pueden ser: Si {% 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: |
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 verdaderoO falsodependiendo 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 verdaderosi 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. |
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: |
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 verdaderosi 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 verdaderoO falsoen 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.
Variable | Descripción |
---|---|
abandoned_visit.* |
Esta variable otorga acceso a las siguientes propiedades de un carrito abandonado o de navegación:
|
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>