Agregar Liquid personalizado a las campañas de Shopify Email

Haz crecer tu negocio

Si necesitas ayuda para crear un código personalizado para los mensajes de Shopify Email, puedes contratar a un Shopify Partner.

Puedes agregar codificaciones personalizadas a los mensajes de Shopify Email agregando una sección personalizada de Liquid o creando un correo electrónico con código completamente personalizado. Estas opciones te permiten introducir Liquid y HTML personalizados.

Acceso anticipado

Los correos electrónicos con código personalizado se encuentran en acceso anticipado y están disponibles solo para algunas tiendas.

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 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 es obligatoria en los correos electrónicos de Liquid personalizado. Si activaste el seguimiento de correos abiertos, 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 usar las siguientes variables para personalizar tus mensajes de correo electrónico de Shopify con Liquid.

Descripción de las variables Liquid compatibles con Shopify Email

Variable	Descripción
unsubscribe_link	Esta variable brinda acceso al enlace para darse de baja. Es obligatoria si creas un correo electrónico con código personalizado.
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.
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: image_url product_title variant_title quantity 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. La variable abandoned_checkout se llena solo si un correo electrónico es parte de una automatización de marketing de pedido abandonado. De lo contrario, la variable será null.
abandoned_visit	Esta variable otorga acceso a las siguientes propiedades de un carrito abandonado o de navegación: url muestra la URL del pago abandonado. 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 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. 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 de un producto abandonado. De lo contrario, la variable será null.
data.customer.*	Esta variable otorga acceso a las siguientes propiedades de datos de clientes: nombre apellido Correo electrónico city estado país Estas propiedades no se pueden usar dentro de los filtros Liquid ni de las condiciones de Liquid.
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.
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 expone las siguientes propiedades de la dirección: address1 address2 city país teléfono province Código postal branding muestra la marca de la tienda, que incluye las siguientes propiedades: accent_section_color background_primary_color background_border_color body_text_color button_background_and_link_color button_label_color footer_link_color footer_text_color footer_background_color social_link_facebook social_link_twitter social_link_instagram social_link_pinterest shop_name logo, que se renderiza como una etiqueta img directamente.

Usar las variables obligatorias

Cuando creas un correo electrónico de Liquid personalizado, la variable unsubscribe_link es obligatoria. Si activaste el seguimiento de correos abiertos, 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.

<style>
  body {
    text-align: center;
  }

  p#welcome {
    margin: 0;
    padding: 3rem;
    color: white;
    font-weight: 700;
    font-size: 26px;
    font-family: 'Futura';
  }

  div#image_wrapper img {
    max-width: 70%;
    border-radius: 60px;
    box-shadow: -2px 6px 0px rgba(227, 111, 59, 0.7);
  }

  div#button_wrapper {
    padding: 1rem;
  }

  div#button_wrapper a {
    padding: 1rem 2rem;
    border-radius: 24px;
    display: inline-block;
    background: linear-gradient(120deg, #F6A179, #865CFF);
    box-shadow: -2px 4px 0px rgba(96, 54, 173, 0.9);
    font-weight: 700;
    font-size: 16px;
    font-family: 'Futura';
    color: white;
  }

  div#footer {
    font-weight: 700;
    font-size: 16px;
    font-family: 'Futura';
    padding: 2rem;
  }

  div#button_wrapper:hover a {
    box-shadow: -4px 6px 0px rgba(96, 54, 173, 0.8);
  }

  div#custom_section {
    background: linear-gradient(120deg, #FF9F73, #FFC7AD);
    padding:0 0 2rem 0;
    border-radius: 4rem;
  }
</style>
<div id="custom_section">
  <p id="welcome">
    Hello from {{shop.name}}<strong></strong>!
  </p>
  <div id="image_wrapper">
    <img src="https://burst.shopifycdn.com/photos/a-trio-of-natural-soaps.jpg" alt="" />
  </div>
  <div id="button_wrapper">
    <a href="">Shop now</a>
  </div>
  <div id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>
</div>