Personnaliser vos designs avec la nouvelle syntaxe Liquid

Personnaliser vos designs avec la nouvelle syntaxe Liquid

-

#1 - Ajouter des liens de miroir et de désabonnement

• Lien miroir = {{ mirror_page_url }}

Exemple : Voir ici la version en ligne (derrière ici, il faut placer la variable {{ mirror_page_url }} )

• Lien de désabonnement = {{ unsubscription_form_url }}

Exemple : Si vous ne souhaitez plus recevoir nos emails, vous pouvez vous désabonner ici (derrière ici, il faut placer la variable {{ unsubscription_form_url }} )

-

#2 - Utiliser un bloc conditionnel et reformater le contenu

• Inclure un message de bienvenue personnalisé avec le prénom du contact

{% if contact.firstname != "" %}
Bonjour {{ contact.firstname }},
Bienvenue parmi nous ! Nous sommes ravis de vous avoir.
{% else %}Bonjour,
Bienvenue parmi nous !
{% endif %}

• Mettre en capitales une variable de personnalisation. Ci-dessous un exemple avec le prénom :

{% if contact.firstname != "" %}
Bonjour {{ contact.firstname | capitalize }},
Bienvenue parmi nous ! Nous sommes ravis de vous avoir.
{% else %}
Bonjour,
Bienvenue parmi nous !
{% endif %}

• Mettre au format noms propres une variable de personnalisation. Ci-dessous un exemple avec le prénom :

{% if contact.firstname != "" %}
Bonjour {{ contact.firstname | downcase | capitalize }},
Bienvenue parmi nous ! Nous sommes ravis de vous avoir.
{% else %}
Bonjour,
Bienvenue parmi nous !
{% endif %}

-

#3 - Adapter le message en fonction de la langue du contact

• Créer un bloc personnalisé différent selon la langue du contact

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

• Distinguer les contacts vivant à Paris et celles résidant dans le reste de la France

-

#4 - Adapter le message en fonction du genre du contact

• Créer une personnalisation basée sur le genre et personnaliser avec le prénom du contact

{% if contact.custom_fields["gender"] == "female" %}
Chère {{ contact.firstname }}, profitez de nos offres exclusives pour vous !
{% elsif contact.custom_fields["gender"] == "male" %}
Cher {{ contact.firstname }}, voici des promotions qui pourraient vous intéresser !
{% else %}
Bonjour {{ contact.firstname }}, découvrez nos dernières nouveautés !
{% endif %}

• Reformater tous ces prénoms au format majuscules

{% if contact.custom_fields["gender"] == "female" %}
Chère {{ contact.firstname | upcase }}, profitez de nos offres exclusives pour vous !
{% elsif contact.custom_fields["gender"] == "male" %}
Cher {{ contact.firstname | upcase }}, voici des promotions qui pourraient vous intéresser !
{% else %}
Bonjour {{ contact.firstname | upcase }}, découvrez nos dernières nouveautés !
{% endif %}

-

#5 - Afficher des dates

Date complète d’aujourd’hui : {{ "now" | date: "%Y-%m-%d" }}

• Afficher le jour en premier, puis le mois, et enfin l'année

Date complète d’aujourd’hui au format DD-MM-YYYY : {{ "now" | date: "%d-%m-%Y" }}

• Ajouter le jour de la semaine et le mois en cours de manière dynamique

Jour de la semaine : {{ "now" | date: "%A" }}
Mois en cours : {{ "now" | date: "%B" }}
Date complète d’aujourd’hui au format DD-MM-YYYY avec le jour de la semaine et le mois en cours à la place du MM : {{ "now" | date: "%A %d-%B-%Y" }}

• Supprimer les traits d'union et afficher les jours, mois et année dans la langue de mes contacts

• Afficher uniquement le jour de la semaine (et non le mois)

Date complète d’aujourd’hui au format DD-MM-YYYY avec le jour de la semaine en français : {{ "now" | date: "%A, %d-%m-%Y" | replace: "Monday", "Lundi" | replace: "Tuesday", "Mardi" | replace: "Wednesday", "Mercredi" | replace: "Thursday", "Jeudi" | replace: "Friday", "Vendredi" | replace: "Saturday", "Samedi" | replace: "Sunday", "Dimanche" }}

• Afficher une date au format JJ-MM-YYY même si celle-ci a été stockée sous un autre format

{{contact.custom_fields['champs'] | date: "%d-%m-%Y" }}
Attention : cette transformation de format fonctionne aussi bien si le champs est au format date que texte.

-

#6 - Intégrer des variables calculées automatiquement

• Exemple 1 : le montant restant à atteindre pour bénéficier d'une livraison offerte dans le cadre d'un panier abandonné

Hello {{ contact.firstname }}, tu y es presque ;) Encore {{ 20 | minus: order.total_price }} euros pour profiter de la livraison gratuite.
Arrondir un nombre à l’excès : {{ 123.4567 | ceil }}r
Arrondir un nombre à l’inférieur : {{ 123.4567 | floor }}
Arrondir au nombre le plus proche : {{ 123.4567 | round }}

Attention : 123.5 est toujours arrondi à l’excès

• Exemple 2 : vous souhaitez formater le prix d’une commande en remplaçant le "." par une "," et en affichant toujours deux chiffres après la virgule

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

-

#7 - Ajouter une boucle post-achat (ou panier abandonné) avec l'image et les informations du produit

• Créer une boucle pour afficher tous les produits du panier ou de l'achat avec les informations de son choix (prix, image, nom...). Exemple en utilisant le Message Builder :

Syntaxe à utiliser en utilisant directement Liquid :
{% for orderline in order.orderlines %}
Product : {{orderline.product.name}}
Product : {{orderline.product.external_id}}
Quantity : {{orderline.quantity}}
{% endfor %}

Attention : les boucles sont basées sur les lignes de ticket, donc la variable à utiliser n'est pas celle du tableau des produits, à savoir {{orderline.product.name}} et non {{product.name}}.

NB : la variable à placer derrière l’image pour faire apparaître l’image dynamique de chaque produit est : {{orderline.product.img_url}}

-

#8 - Modifier l'affichage d'une boucle de personnalisation

• Afficher par exemple les produits en mode horizontal et non vertical

Pour cela, il suffit de créer 3 colonnes :

1. Première colonne = {% for orderline in order.orderlines limit:3 %} + Image + Product name : {{orderline.product.name}} + Product price : {{orderline.product.price}} €

2. Deuxième colonne = {% endfor %}

3. Troisième colonne = laisser vide

Attention : Pour éviter tout décalage dans l'affichage des noms de produits, il est essentiel de définir une limite maximale de caractères pour le nom des champs à afficher et d’utiliser toujours des images avec la même taille.

-

#9 - Créer une boucle de produits à partir d'un champs personnalisé de la table contacts

• Par exemple pour une campagne de back in stock pour personnaliser le design en fonction des préférences de chaque contact

  

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

Attention : dans ce cas, c'est la table des produits qu'il faut utiliser après avoir créé la liste. Toutes les variables feront donc référence à cette table.

NB : la variable à placer derrière l’image pour faire apparaître l’image dynamique de chaque produit est : {{product.img_url}}

-

#10 - Créer une boucle de produits recommandés à partir d'un champs personnalisé de la table produits

• Par exemple, afficher une liste de produits recommandés depuis un champs personnalisé de la table produit pour les afficher dans une campagne post-achat.

{% 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 - Créer une boucle produits à partir des external IDs de certains articles

• Personnaliser un design en affichant des produits par défaut dans une campagne

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

-

#12 - Ajouter la personnalisation magasin

• Personnaliser une campagne post-achat en fonction du magasin où l'achat a été effectué pour rappeler par exemple ses horaires d'ouverture

{% if order.store.external_id == "physique" %}
Merci de votre achat dans le magasin {{order.store.name}}.
Voici les horaires d'ouverture de votre magasin préféré : {{order.store.custom_fields['horaires']}}
{% endif %}

-

#13 - Personnaliser automatiquement vos variables UTM

Pour personnaliser dynamiquement vos variables UTM, vous pouvez utiliser les variables suivantes :

• {{campaign_name}} pour afficher le nom de la campagne

• {{campaign_id}} pour afficher l'ID de la campagne

-

Aller plus loin

Plus d'infos sur la documentation technique.