Personnaliser des campagnes Shopify Email avec Liquid

Développer votre entreprise

Si vous avez besoin d’aide pour créer un code personnalisé pour vos messages Shopify Email, vous pouvez engager un(e) Partenaire Shopify.

Liquid est un langage de programmation de Shopify simple et intuitif, qui sert également pour la conception des thèmes de la Boutique des thèmes de Shopify.

Vous pouvez utiliser Liquid personnalisé pour améliorer vos messages Shopify Email par la création d’un e-mail entièrement personnalisé ou l’ajout d’une section Liquid personnalisée à un modèle. Ces options vous permettent d’insérer des fichiers Liquid ou HTML personnalisés.

Vous pouvez utiliser le Liquid personnalisé pour afficher des éléments personnalisés tels que des images adjacentes, des boutons personnalisés, ainsi que des images et des sections redimensionnées.

Considérations

Tenez compte des considérations suivantes avant de commencer à ajouter du code Liquid personnalisé à vos messages Shopify Email :

• Les variables que vous introduisez dans votre code doivent être prises en charge par le Liquid personnalisé.
• Vous pouvez créer une section Liquid personnalisée sur ordinateur uniquement.
• La variable unsubscribe_link est obligatoire dans les e‑mails Liquid personnalisés. Si vous avez activé le suivi des ouvertures, la variable open_tracking est également obligatoire. En savoir plus sur l’ajout de variables obligatoires à votre e‑mail.
• Le code que vous saisissez a les limites suivantes :
  • Maximum 50 kilo‑octets (Ko) pour les sections Liquid personnalisées.
  • Maximum 500 Ko pour les e‑mails de code Liquid personnalisé.

Variables Liquid prises en charge dans le Liquid personnalisé

Vous pouvez utiliser les variables suivantes pour personnaliser vos e‑mails Shopify avec Liquid.

Variables Liquid prises en charge pour tous les modèles d’e-mail

Vous pouvez utiliser les variables suivantes pour personnaliser vos messages Shopify Email avec Liquid.

Description des variables Liquid prises en charge par Shopify Email

Variable	Description
all_products	Tous les produits de votre boutique.
unsubscribe_link	Cette variable donne accès au lien de désabonnement. Cette variable est obligatoire si vous créez un e-mail à partir de code personnalisé.
open_tracking	Cette variable donne accès au bloc préformaté de suivi des ouvertures.Cette variable est obligatoire si vous créez un e-mail à partir de code personnalisé et que vous avez activé le suivi des ouvertures.
data.customer.*	Cette variable donne accès aux propriétés de données client suivantes : first_name (prénom) last_name (nom) e-mail city state Pays Ces propriétés ne peuvent être utilisées ni dans les filtres Liquid ni dans les conditions Liquid.
email.*	Cette variable donne accès aux propriétés d’e-mail suivantes : subject affiche l’objet de l’e-mail. preview_text affiche le texte de l’aperçu de l’e-mail.
shop.*	Cette variable donne accès aux propriétés de boutique suivantes : name affiche le nom de la boutique. domain affiche le domaine principal de la boutique. url affiche l’URL de la boutique. shopify_domain affiche le domaine Shopify de la boutique. address affiche l’adresse de la boutique, qui donne accès aux propriétés d’adresse suivantes : address1 address2 city Pays Téléphone province code postal branding affiche l’image de marque de la boutique, qui donne accès aux propriétés suivantes : 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, rendu directement sous forme de balise img.

Variables Liquid prises en charge pour les e-mails de relance de panier

Vous pouvez utiliser les variables suivantes pour personnaliser vos messages d’e-mail de relance de panier abandonné de Shopify avec Liquid.

La variable abandoned_checkout est remplie uniquement si un e-mail fait partie d’une automatisation de marketing de panier abandonné. Sinon, la variable est null.

Description des variables Liquid prises en charge par Shopify Email pour la navigation, les paniers et le paiements abandonnés

Variable	Description
abandoned_checkout.*	Pour les paniers abandonnés, cette variable donne accès aux propriétés suivantes : url affiche l’URL du panier abandonné. line_items affiche les cinq premières lignes du panier abandonné. En outre, chaque objet line_items contient les propriétés suivantes sur chaque produit : image_url product_title variant_title quantité remaining_products_count affiche le nombre de rubriques restantes lorsqu’il y en a plus de cinq dans le panier abandonné.
id (checkout ID)	Un ID unique du paiement pour une utilisation interne.
shop	Le nom de votre boutique Shopify.
name	Le nom du paiement abandonné, également appelé numéro de paiement.
total_price	Le prix total de la commande (sous-total + frais d'expédition - réduction sur l'expédition + taxes).
shipping_price	Le prix d'expédition. Exemple : {{ shipping_price | money }}
shipping_address	Adresse d'expédition.
billing_address	Adresse de facturation.
line_items	Une liste de toutes les rubriques dans le paiement abandonné.
unavailable_line_items	Une liste de toutes les rubriques dans le paiement abandonné qui ne sont pas disponibles.
note	La note qui est jointe au paiement abandonné.
landing_site	Le chemin du site de destination utilisé par le/la client(e). Il s’agit de la première page à laquelle le/la client(e) a accédé lorsqu’il/elle est arrivé(e) dans la boutique. Exemple : /products/great-product?ref=my-tracking-token
landing_site_ref	Extrait un paramètre de référence du site de destination. Les paramètres de référence peuvent être : ref, source, r. Si landing_site est /products/great-product?ref=my-tracking-token, alors le landing_site_ref est my-tracking-token. Vous pouvez réaliser une action donnée si votre paramètre de référence est égal à une valeur donnée : {% if landing_site_ref == 'my-tracking-token' %} Mon action... {% endif %}
referring_site	L’URL du référent qui a amené le client dans votre boutique. Exemple : https://www.google.com/?s=great+products
created_at	Date et heure auxquelles le/la client(e) a créé le paiement qu’il a abandonné.
closed_at	Date et heure auxquelles le paiement a été fermé.
customer_locale	Le code de langue à deux ou trois lettres pour le paramètre régional du/de la client(e), éventuellement suivi d’un modificateur de région. Par exemple, en , en-CA
item_count	Une somme de toutes les quantités d'articles.
unique_gateways	Une liste de fournisseurs de services de paiement uniques disponibles lors du paiement.
discount	La réduction s’applique au panier ou à une rubrique dans le panier abandonné.
discounts	Une liste de réductions appliquées lors du paiement.
successfully_applied_discounts	Les réductions qui ont été appliquées avec succès lors du paiement.
discounts_amount	Le montant en dollars de la réduction appliquée par toutes les réductions. Exemple : +5,00 USD
discounts_savings	Le montant en dollars économisé généré par toutes les réductions. Exemple : +5,00 USD
buyer_accepts_marketing	Retours vrai ou faux en fonction de si le/la client(e) a accepté le marketing au moment de l’abandon du panier.
subtotal_line_items	Les rubriques utilisées pour calculer le sous-total lors du paiement, à l’exception des rubriques de pourboire.
requires_shipping	Retours vrai s’il y a au moins un article lors du paiement qui doit être expédié.
subtotal_price	Le sous-total des rubriques lors du paiement.
email	L’e-mail associé avec le panier abandonné.
shop_name	Le nom de votre boutique.
tax_lines	Les taxes divisées par le type de taxe : {% for tax_line in tax_lines %} {{ tax_line.title }} ({{ tax_line.rate_percentage }}%) : {{ tax_line.price | money_with_currency }} {% endfor %}
tax_price	Les taxes combinées de tous les articles lors du paiement.
attributes	Tous les attributs associés au panier abandonné. Exemple : {{ attributes.gift-note }}
shipping_method	Informations sur le premier mode d’expédition disponible lors du paiement.
shipping_methods	Les modes d’expédition disponibles lors du paiement.
free	Retours vrai si le prix total du paiement est zéro.
free_shipping	Retours vrai si le paiement ne nécessite pas d’expédition ou si le prix d’expédition est zéro.
different_billing_address	Retours vrai ou faux selon si l’adresse d’expédition est identique à l’adresse de facturation.
customer	L’objet client contenant les attributs de la sortie client.
gift_cards	Les cartes-cadeaux appliquées lors du paiement.
gift_cards_amount	Le montant du paiement qui serait payé par les cartes-cadeaux.
transactions	Les transactions du paiement.
shareable_url	L’URL du premier produit dans les rubriques.
shareable_title	Le titre de produit de la première rubrique.
total_tip	Le pourboire total que le/la client(e) a ajouté au paiement.
discount_applications	Décrit pourquoi et comment un article a fait l’objet d’une réduction au moment du paiement.
cart_level_discount_applications	Les applications de réduction spécifiques au panier.
currency	La devise du panier abandonné.
line_items_subtotal_price	La somme des prix de toutes les rubriques du paiement, après l’application des réductions de rubriques.

Variables Liquid pour les e-mails de navigation abandonnée et de panier abandonné

La variable abandoned_visit.* remplit uniquement si un e-mail fait partie d’une automatisation du marketing relatif au panier abandonné ou à la navigation de produit abandonné. Examinez les propriétés suivantes dont l’accès est donné par cette variable.

Description des variables Liquid prises en charge par Shopify Email

Variable

Description

abandoned_visit.*

Cette variable donne accès aux propriétés suivantes d’une recherche abandonnée ou d’un panier abandonné : url affiche l’URL du panier abandonné ou de la navigation abandonnée. products_added_to_cart affiche les cinq premières rubriques de produits ajoutées au panier de la visite abandonnée. En outre, chaque objet products_added_to_cart contient les propriétés suivantes sur chaque produit : title image_url variant_title quantité products_viewed affiche les cinq premiers produits vus lors de la visite abandonnée. En outre, chaque objet products_viewed contient les propriétés suivantes sur chaque produit : title description image_url URL image_alt_text remaining_cart_products_count affiche le nombre de rubriques restantes lorsqu’il y en a plus de cinq dans le panier abandonné.

Utilisation des variables requises

Lorsque vous créez un e‑mail Liquid personnalisé, la variable unsubscribe_link variable est obligatoire. Si vous avez activé le suivi des ouvertures, la variable open_tracking est également obligatoire.

Bien que ces variables puissent être insérées n’importe où dans le code de votre e‑mail, l’endroit le plus courant pour les ajouter se trouve dans la section du pied de page de l’e‑mail, comme dans l’exemple suivant :

<div id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>

Exemple de code Liquid personnalisé

Vous pouvez ajouter votre Liquid ou HTML personnalisé dans l’éditeur de code. Vous trouverez ci‑dessous un exemple de la façon dont vous pouvez ajouter du code Liquid pour afficher le nom de votre boutique, un bouton personnalisé et une image redimensionnée dans un e‑mail.

<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>