Personnaliser des campagnes Shopify Email avec Liquid

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.

Sur cette page

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 ou unsubscribe_url 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 prises en charge pour personnaliser vos e-mails Shopify avec Liquid. Vous pouvez consulter les listes de variables Liquid prises en charge pour les types de modèles suivants :

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.
customer.accepts_marketing	Retourne `vrai` si le client accepte le marketing et retourne `faux` dans le cas contraire.
customer.addresses	Retourne toutes les adresses associées au client.
customer.addresses_count	Retourne le nombre d’adresses associées au client.
customer.b2b?	Retourne `vrai` si le client est un client B2B et retourne `faux` dans le cas contraire.
customer.current_location	Retourne l’emplacement d’entreprise actuellement sélectionné pour le client.
customer.default_address	Retourne l’adresse par défaut du client.
customer.email	Renvoie l'adresse e-mail du client.
customer.first_name	Retourne le prénom du client.
customer.has_account	Retourne `vrai` si l’e-mail du client est associé à un compte client et retourne `faux` dans le cas contraire.
customer.has_avatar?	Retourne `vrai` si le client a un avatar associé à son compte et retourne `faux` dans le cas contraire.
customer.id	Retourne l’ID du client.
customer.last_name	Retourne le nom de famille du client.
customer.last_order	Retourne la dernière commande passée par le client, hors commandes de test.
customer.name	Retourne le nom complet du client.
customer.orders	Retourne toutes les commandes que le client a passées.
customer.orders_count	Retourne le nombre total de commandes passées par le client.
customer.payment_methods	Retourne les moyens de paiement enregistrés du client.
customer.phone	Retourne le numéro de téléphone du client. Le numéro de téléphone n’est renseigné que si le client a utilisé un numéro de téléphone lors du paiement, s’est abonné aux notifications par SMS ou si vous l’avez ajouté manuellement à son compte client.
customer.store_credit_account.balance	Renvoie le solde du crédit en magasin du client dans la devise associée au contexte concerné. Par exemple : `{{customer.store_credit_account.balance \| money_with_currency}}`
customer.tags	Retourne les balises associées au client.
customer.tax_exempt	Retourne `vrai` si le client est exempt de taxes et retourne `faux` dans le cas contraire.
customer.total_spent	Retourne le montant total dépensé par le client sur toutes les commandes de votre boutique.
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.
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.
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`
unsubscribe_url	Cette variable donne accès à l’URL de désabonnement brut et peut être personnalisée. Si vous créez un e-mail personnalisé, vous êtes tenu(e) d’inclure la variable `unsubscribe_url` ou `unsubscribe_link`.

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 : `composants` `image_url` `product_title` `variant_title` `quantité` `line_items.components` affiche les composants du panier abandonné. En outre, chaque objet `composants` contient les propriétés suivantes pour chaque composant : `image_url` `quantité` `product_title` `variant_title` `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 ou unsubscribe_url 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.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ shop.name }} Newsletter</title>
</head>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; line-height: 1.5; color: #333333; background-color: #f5f5f5;">
    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #f5f5f5;">
        <tr>
            <td align="center" style="padding: 20px;">
                <table cellpadding="0" cellspacing="0" border="0" width="600" style="background-color: #ffffff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                    <!-- Header -->
                    <tr>
                        <td align="center" style="background-color: #4a6de5; padding: 30px 20px; color: #ffffff;">
                            <h1 style="margin: 0; font-size: 28px; font-weight: bold;">{{ shop.name }}</h1>
                            <p style="margin: 10px 0 0; font-size: 16px;">Your Book Journey with Us</p>
                        </td>
                    </tr>

                    <!-- Content -->
                    <tr>
                        <td style="padding: 30px 20px;">
                            <!-- Greeting Section -->
                            <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 30px;">
                                <tr>
                                    <td>
                                        <h2 style="margin: 0 0 15px; font-size: 22px; color: #222222;">Hello {{ customer.name }}!</h2>
                                        <p style="margin: 0 0 15px; font-size: 15px;">We hope this email finds you well. We noticed you're from {{ customer.default_address.city }}.</p>
                                        {% if customer.email %}
                                            <p style="margin: 0 0 15px; font-size: 15px;">Your registered email is: {{ customer.email }}</p>
                                        {% endif %}
                                    </td>
                                </tr>
                            </table>

                            <!-- Reading Journey Section -->
                            <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 30px;">
                                <tr>
                                    <td>
                                        <h2 style="margin: 0 0 15px; font-size: 20px; color: #4a6de5;">Your Reading Journey</h2>
                                        <p style="margin: 0 0 15px; font-size: 15px;">Thank you for being a loyal customer! Here's a snapshot of your journey:</p>
                                        <p style="margin: 0 0 15px; font-size: 15px;">You purchased {{ customer.orders_count }} books with us.</p>
                                        {% if customer.last_order %}
                                            <p style="margin: 0 0 15px; font-size: 15px;"> You last read {{customer.last_order.line_items[0].title}}. Great choice! </p>
                                          {% endif %}
                                    </td>
                                </tr>
                            </table>

                            <!-- Recommended Books Section -->
                            <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 30px;">
                                <tr>
                                    <td>
                                        <h2 style="margin: 0 0 15px; font-size: 20px; color: #4a6de5;">Books You Might Love</h2>
                                        <p style="margin: 0 0 15px; font-size: 15px;">Based on your reading preferences, we've handpicked these titles just for you:</p>

                                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                            <tr>
                                                <td width="50%" style="padding-right: 10px;">
                                                    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #f9f9f9; border-radius: 4px; padding: 15px;">
                                                        <tr>
                                                            <td align="center">
                                                                <!-- Image with proper email attributes -->
                                                                <img src="https:{{ all_products['product-1-handle'] | image_url: width: 200 }}"
                                                                     alt="Product 1"
                                                                     width="200"
                                                                     height="200"
                                                                     style="display: block; border: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;"
                                                                     title="Product 1"
                                                                     border="0">
                                                                <h3 style="margin: 0 0 10px; font-size: 16px; color: #333333;">{{ all_products['product-1-handle'].title }}</h3>
                                                                <p style="margin: 0 0 10px; font-size: 15px; color: #4a6de5;">${{ all_products['product-1-handle'].price }}</p>
                                                                <a href="{{shop.domain}}{{ all_products['product-1-handle'].url }}" style="display: inline-block; background-color: #4a6de5; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 4px; font-size: 14px;">View Book</a>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td width="50%" style="padding-left: 10px;">
                                                    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #f9f9f9; border-radius: 4px; padding: 15px;">
                                                        <tr>
                                                            <td align="center">
                                                                <!-- Image with proper email attributes -->
                                                                <img src="https:{{ all_products['product-2-handle'] | image_url: width: 200 }}"
                                                                     alt="Product 2"
                                                                     width="200"
                                                                     height="200"
                                                                     style="display: block; border: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;"
                                                                     title="Product 2"
                                                                     border="0">
                                                                <h3 style="margin: 0 0 10px; font-size: 16px; color: #333333;">{{ all_products['product-2-handle'].title }}</h3>
                                                                <p style="margin: 0 0 10px; font-size: 15px; color: #4a6de5;">${{ all_products['product-2-handle'].price }}</p>
                                                                <a href="{{shop.domain}}{{ all_products['product-2-handle'].url }}" style="display: inline-block; background-color: #4a6de5; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 4px; font-size: 14px;">View Book</a>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>

                            <!-- Book Club Section -->
                            <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 30px;">
                                <tr>
                                    <td style="background-color: #f5f7ff; border-radius: 4px; padding: 25px; text-align: center;">
                                        <h2 style="margin: 0 0 15px; font-size: 18px; color: #333333;">This Month's Top Picks</h2>
                                        <p style="margin: 0 0 20px; font-size: 15px;">Discover what other readers are loving this month:</p>
                                        <a href="{{ shop.url }}/pages/book-club" style="display: inline-block; background-color: #4a6de5; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 4px; font-size: 14px;">Join Our Book Club</a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>

                    <!-- Footer -->
                    <tr>
                        <td style="background-color: #f2f2f2; padding: 30px 20px; text-align: center;">
                            <p style="margin: 0 0 15px; font-size: 15px;">Best regards,<br><strong>{{ shop.name }} Team</strong></p>
                            <p style="margin: 0 0 15px; font-size: 12px; color: #999999;">© {{ 'now' | date: '%Y' }} {{ shop.name }}. All rights reserved.</p>
                            <p style="margin: 0 0 15px; font-size: 12px;">{{ open_tracking_block }}</p>
                            <a href="{{ unsubscribe_url }}" style="color: #999999; font-size: 12px; text-decoration: underline;">{{ unsubscribe_link }}</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>