Personalizar tus diseños con la nueva sintaxis Liquid

Personalizar tus diseños con la nueva sintaxis Liquid

-

#1 - Añadir mirror links y enlaces de baja

• Mirror link = {{ mirror_page_url }}

Ejemplo: Puedes ver aquí la versión online (aquí hay que poner la variable {{ mirror_page_url }} )

• Enlace de baja = {{ unsubscription_form_url }}

Ejemplo: Si ya no deseas recibir nuestros correos, puedes darte de baja aquí (coloca la variable {{ unsubscription_form_url }} aquí)

-

#2 - Usar un bloque condicional y reformatear el contenido

• Incluir un mensaje de bienvenida personalizado con el nombre del contacto:

{% if contact.firstname != "" %}
Hola {{ contact.firstname }},
Bienvenido/a! Estamos encantados de que te unas a nuestra comunidad.
{% else %}
Hola,
Bienvenido/a! Estamos encantados de que te unas a nuestra comunidad.
{% endif %}

• Poner en mayúscula la primera letra del nombre:

{% if contact.firstname != "" %}
Hola {{ contact.firstname | capitalize }},
Bienvenido/a! Estamos encantados de que te unas a nuestra comunidad.
{% else %}
Hola,
Bienvenido/a! Estamos encantados de que te unas a nuestra comunidad.
{% endif %}

• Formatear el nombre como nombre propio (todo en minúsculas excepto la inicial):

{% if contact.firstname != "" %}
Hola {{ contact.firstname | downcase | capitalize }},
Bienvenido/a! Estamos encantados de que te unas a nuestra comunidad.
{% else %}
Hola,
Bienvenido/a! Estamos encantados de que te unas a nuestra comunidad.
{% endif %}

-

#3 - Adaptar el mensaje según el idioma del contacto

• Crear bloques distintos según el idioma

{% if contact.language == "fr" %}
Profitez de nos offres spéciales en France !
{% elsif contact.language == "es" %}
¡Disfruta de nuestras ofertas especiales!
{% else %}
Discover our special offers worldwide!
{% endif %}

• Distinguir entre los contactos que viven en una ciudad X (por ejemplo Bilbao) y los que viven en el resto de España

-

#4 - Adaptar el mensaje según el género del contacto

• Crear una personalización basada en el género del contacto e incluye su nombre para generar cercanía

{% if contact.custom_fields["gender"] == "female" %}
Estimada {{ contact.firstname }}, ¡disfruta de nuestras ofertas exclusivas pensadas para ti!
{% elsif contact.custom_fields["gender"] == "male" %}
Estimado {{ contact.firstname }}, ¡aquí tienes promociones que pueden interesarte!
{% else %}
Hola {{ contact.firstname }}, ¡descubre nuestras últimas novedades!
{% endif %}

• Formatear todos los nombres en mayúsculas

{% if contact.custom_fields["gender"] == "female" %}
Estimada {{ contact.firstname | upcase }}, ¡disfruta de nuestras ofertas exclusivas pensadas para ti!
{% elsif contact.custom_fields["gender"] == "male" %}
Estimado {{ contact.firstname | upcase }}, ¡aquí tienes promociones que pueden interesarte!
{% else %}
Hola {{ contact.firstname | upcase }}, ¡descubre nuestras últimas novedades!
{% endif %}

-

#5 - Mostrar fechas

Fecha completa de hoy: {{ "now" | date: "%Y-%m-%d" }}

• Mostrar primero el día, luego el mes y, por último, el año:

Fecha completa de hoy con el formato DD-MM-YYYY: {{ "now" | date: "%d-%m-%Y" }}

• Añadir el día de la semana y el mes en curso de manera dinamica

Día de la semana: {{ "now" | date: "%A" }}
Mes en curso: {{ "now" | date: "%B" }}
Fecha completa de hoy con el formato DD-MM-YYYY con día de la semana y mes en curso en lugar del MM: {{ "now" | date: "%A %d-%B-%Y" }}

• Eliminar guiones y mostrar el día, mes y año en el idioma del contacto

• Mostrar solo el día de la semana (sin el mes)

Fecha completa de hoy con el formato DD-MM-YYYY con día de la semana en español: {{ "now" | date: "%A, %d-%m-%Y" | replace: "Monday", "Lunes" | replace: "Tuesday", "Martes" | replace: "Wednesday", "Miércoles" | replace: "Thursday", "Jueves" | replace: "Friday", "Viernes" | replace: "Saturday", "Sábado" | replace: "Sunday", "Domingo" }}

• Mostrar una fecha en formato DD-MM-YYYY aunque haya sido almacenada en otro formato:

{{contact.custom_fields['champs'] | date: "%d-%m-%Y" }}
Atención: esta transformación funciona tanto si el campo está almacenado como fecha como si es texto.

-

#6 - Integrar variables calculadas automáticamente

• Ejemplo 1: Mostrar el importe restante para conseguir el envío gratuito en un carrito abandonado

Hola {{ contact.firstname }}, ¡ya casi lo tienes! ;-) Solo te faltan {{ 20 | minus: order.total_price }} euros para conseguir el envío gratuito.
Redondear un número por exceso: {{ 123.4567 | ceil }}r
Redondear un número por defecto: {{ 123.4567 | floor }}
Redondear al número más cercano: {{ 123.4567 | round }}

Atención: Ten en cuenta que 123.5 siempre se redondea por exceso.

• Ejemplo 2: Formatear el precio de un pedido reemImportanplazando el "." por una "," y mostrando siempre dos decimales después de la coma

{% assign parts = order.total_price | split: "." %}{% assign decimal = parts[1] | append: "00" | slice: 0, 2 %}{{ parts[0] }},{{ decimal }} € 

-

#7 - Añadir un loop post compra (o de carrito abandonado) con la imagen y los detalles del producto

• Puedes crear un bucle que muestre todos los productos incluidos en un carrito o pedido, junto con la información que desees (nombre, imagen, precio, etc.). Aquí abajo hay un ejemplo utilizando directamente el Message Builder:

Ejemplo de sintaxis a utilizar en Liquid:
{% for orderline in order.orderlines %}
Product : {{orderline.product.name}}
Product : {{orderline.product.external_id}}
Quantity : {{orderline.quantity}}
{% endfor %}

Importante: los loops se basan en las líneas del pedido, por lo que debes usar la variable {{orderline.product.name}} y no {{product.name}}.

Nota: Para mostrar la imagen dinámica de cada producto, utiliza la siguiente variable: {{orderline.product.img_url}}

-

#8 - Modificar la visualización de un loop de personalización

• Mostrar los productos en horizontal en lugar de en vertical

Para ello, solo necesitas crear tres columnas:

1. Primera columna = {% for orderline in order.orderlines limit:3 %} + Image + Product name: {{orderline.product.name}} + Product price: {{orderline.product.price}} €

2. Segunda columna = {% endfor %}

3. Tercera columna = déjala vacía

Nota: Para evitar desajustes en la visualización de los nombres de los productos, es importante establecer un límite máximo de caracteres para los campos mostrados y utilizar siempre imágenes del mismo tamaño.

-

#9 - Crear un bucle de productos a partir de un campo personalizado de la tabla de contactos

• Por ejemplo, en una campaña de Back in Stock (productos disponibles de nuevo), puedes personalizar el diseño del mensaje según las preferencias de cada contacto

  

{% create_products_list products_list=contact.custom_fields['city'] %}{% for product in products_list %}
{{product.name}}
{{product.price}} €
{% endfor %}

Importante: en este caso, debes utilizar la tabla de productos tras haber generado la lista. Todas las variables harán referencia a dicha tabla.

Nota: para mostrar la imagen dinámica de cada producto, utiliza esta variable detrás del componente de imagen: {{product.img_url}}

-

#10 - Crear un bucle de productos recomendados a partir de un campo personalizado de la tabla de productos

• Por ejemplo, puedes mostrar una lista de productos recomendados mediante un campo personalizado de la tabla de productos, con el fin de incluirla en una campaña post compra.

{% for orderline in order.orderlines limit:1 %}
{% create_products_list products_list=orderline.product.custom_fields['splio_product_recommendation_1'] %}{% for product in products_list %}
{{product.name}}
{{product.price}} €
{% endfor %}
{% endfor %}

-

#11 - Crear un loop de productos a partir de los ID externos de determinados artículos

• Personalizar un diseño mostrando productos por defecto en una campaña

{% create_products_list products_list='splio01,splio02,splio03' %}
{% for product in products_list %}
{{product.name}} {{product.price}} €
{% endfor %}

-

#12 - Añadir la personalización "tienda"

• Personalizar una campaña post compra según la tienda en la que se haya realizado la compra. Por ejemplo, puedes recordar al cliente el horario de apertura de esa tienda.

{% if order.store.external_id == "physique" %}
Gracias por tu compra en la tienda {{order.store.name}}.
Estos son los horarios de apertura de tu tienda habitual: {{order.store.custom_fields['horaires']}}
{% endif %}

-

#13 - Personalizar automáticamente tus variables UTM

Para personalizar dinámicamente tus variables UTM, puedes utilizar las siguientes variables:

• {{campaign_name}} para mostrar el nombre de la campaña

• {{campaign_id}} para mostrar el ID de la campaña

-

¿Quieres saber más?

Para obtener más información, consulta nuestra documentación técnica.