Agregar una sección de Liquid personalizada en Shopify Email
Agregar una sección de Liquid personalizada te permite introducir Liquid o HTML personalizado en tus mensajes de Shopify Email.
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 la sección de Liquid personalizada 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 tus mensajes de Shopify Email.
- Las variables que incluyas en tu código deben ser compatibles con la sección Liquid personalizada.
- El código que introduzcas no puede exceder 50 KB en tamaño.
- Solo puedes usar un dispositivo de escritorio para crear una sección de Liquid personalizada.
Variables de Liquid admitidas en la sección Liquid personalizada
Puedes usar las siguientes variables para personalizar tus mensajes de correo electrónico de Shopify en la sección de Liquid personalizado.
Variable | Descripción |
---|---|
abandoned_checkout |
Esta variable otorga acceso a las siguientes propiedades de un pedido abandonado:
La variable |
abandoned_visit |
Esta variable otorga acceso a las siguientes propiedades de un carrito abandonado o de navegación:
La variable |
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.
|
Ejemplo de código de Liquid personalizado
Después de agregar una sección de Liquid personalizada a tu plantilla de correo electrónico, puedes agregar tu Liquid o HTML personalizado en el editor de código.
El siguiente código es un ejemplo de cómo agregar código de 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>
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#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>