Personnaliser vos campagnes Shopify Messaging à l’aide de Liquid

Liquid est le langage de programmation simple et facile à utiliser de Shopify. C’est le même langage de programmation que celui avec lequel sont conçus les thèmes du Shopify Theme Store.

Vous pouvez utiliser du Liquid personnalisé pour améliorer vos messages Shopify Messaging en créant un e-mail entièrement codé sur mesure ou en ajoutant une section Liquid personnalisée à un modèle. Ces options vous permettent de saisir du code Liquid ou HTML personnalisé.

Vous pouvez utiliser le code Liquid personnalisé pour afficher des ressources personnalisées telles que des images côte à côte, des boutons personnalisés, des images de taille personnalisée et des sections de taille personnalisée.

Sur cette page

Points à prendre en compte

Examinez les points suivants avant de commencer à ajouter du code Liquid personnalisé à vos messages Shopify Messaging :

Les variables que vous incluez dans votre code doivent être prises en charge par le code Liquid personnalisé.
Vous ne pouvez utiliser qu’un ordinateur de bureau pour créer une section Liquid personnalisée.
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 est soumis aux limites suivantes :
- 50 kilo-octets (Ko) maximum pour les sections Liquid personnalisées.
- 500 Ko maximum pour les e-mails codés sur mesure en Liquid.

Création d’un e-mail codé sur mesure avec Liquid

Si vous souhaitez utiliser un code Liquid personnalisé lorsque vous créez un e-mail, vous pouvez ajouter une section Liquid personnalisée ou créer un e-mail entièrement à partir d’un code Liquid personnalisé en sélectionnant Coder vous-même lorsque vous créez une campagne Shopify Messaging.

Variables Liquid prises en charge dans le code Liquid personnalisé

Vous pouvez utiliser les variables prises en charge pour personnaliser vos e-mails Shopify Messaging avec Liquid. Vous pouvez consulter les listes des 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 n’importe lequel de vos e-mails Shopify Messaging avec Liquid.

Description des variables Liquid prises en charge par Shopify Messaging
Variable	Description
all_products	Tous les produits de votre boutique.
customer.accepts_marketing	Renvoie `true` si le client accepte le marketing, et `false` dans le cas contraire.
customer.addresses	Renvoie toutes les adresses associées au client.
customer.addresses_count	Renvoie le nombre d’adresses associées au client.
customer.b2b?	Renvoie `true` si le client est un client B2B, et `false` dans le cas contraire.
customer.current_location	Renvoie l’emplacement d’entreprise actuellement sélectionné pour le client.
customer.default_address	Renvoie l’adresse par défaut du client.
customer.email	Renvoie l’adresse e-mail du client.
customer.first_name	Renvoie le prénom du client.
customer.has_account	Renvoie `true` si l’e-mail du client est associé à un compte client, et `false` dans le cas contraire.
customer.has_avatar?	Renvoie `true` si le client a un avatar associé à son compte, et `false` dans le cas contraire.
customer.id	Renvoie l’ID du client.
customer.last_name	Renvoie le nom de famille du client.
customer.last_order	Renvoie la dernière commande passée par le client, à l’exclusion des commandes de test.
customer.name	Renvoie le nom complet du client.
customer.orders	Renvoie toutes les commandes que le client a passées.
customer.orders_count	Renvoie le nombre total de commandes que le client a passées.
customer.payment_methods	Renvoie les moyens de paiement enregistrés du client.
customer.phone	Renvoie le numéro de téléphone du client. Le numéro de téléphone s’affiche uniquement si le client a utilisé un numéro de téléphone au moment du paiement, s’il a accepté de recevoir des 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 pertinent. Par exemple : `{{customer.store_credit_account.balance \| money_with_currency}}`
customer.tags	Renvoie les balises associées au client.
customer.tax_exempt	Renvoie `true` si le client est exonéré de taxes, et `false` dans le cas contraire.
customer.total_spent	Renvoie le montant total que le client a dépensé pour toutes les commandes de votre boutique.
email.*	Cette variable donne accès aux propriétés d’e-mail suivantes : `subject` affiche la ligne d’objet de l’e-mail. `preview_text` affiche le texte d’aperçu de l’e-mail.
open_tracking	Cette variable donne accès au bloc de suivi des ouvertures préformaté. Elle est obligatoire si vous créez un e-mail à codage 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` `country` `phone` `province` `zip`
unsubscribe_url	Cette variable donne accès à l’URL de désabonnement brute et peut être personnalisée. Si vous créez un e-mail à codage personnalisé, vous devez inclure la variable `unsubscribe_url` ou `unsubscribe_link`. Les variables `unsubscribe_url` et `unsubscribe_link` pointeront toujours vers le domaine principal de la boutique en ligne et ne peuvent pas être modifiées pour rediriger ailleurs.

Variables Liquid prises en charge pour les e-mails de relance de paiement abandonné

Vous pouvez utiliser les variables suivantes pour personnaliser vos e-mails de relance de paiement abandonné Shopify Messaging avec Liquid.

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

Description des variables Liquid prises en charge par Shopify Messaging pour la navigation abandonnée, le panier abandonné et le paiement abandonné
Variable	Description
abandoned_checkout.*	Cette variable donne accès aux propriétés suivantes d’un paiement abandonné : `url` affiche l’URL du paiement abandonné. `line_items` affiche les cinq premiers articles du panier du paiement abandonné. De plus, chaque `line_items` objet contient les propriétés suivantes sur chaque produit : `components` `image_url` `product_title` `variant_title` `quantity` `line_items.components` affiche les composants du paiement abandonné. De plus, chaque `composant` objet contient les propriétés suivantes sur chaque composant : `image_url` `quantity` `product_title` `variant_title` `remaining_products_count` affiche le nombre d’articles du panier restants, s’il y a plus de cinq articles du panier dans le paiement abandonné.
id (checkout ID)	Un ID de paiement unique pour usage interne.
shop	Le nom de votre boutique Shopify.
name	Le nom du paiement abandonné, également connu sous le nom de numéro de paiement.
total_price	Le prix total de la commande (sous-total + coûts d’expédition – réduction sur l’expédition + taxe).
shipping_price	Les frais d’expédition. Exemple : `{{ shipping_price \| money }}`
shipping_address	L’adresse d’expédition.
billing_address	L’adresse de facturation.
line_items	Une liste de tous les articles du panier dans le paiement abandonné.
unavailable_line_items	Une liste de tous les articles du panier non disponibles dans le paiement abandonné.
note	La note jointe au paiement abandonné.
landing_site	Le chemin du site de destination que le client a utilisé. Il s’agit de la première page à laquelle le client a accédé lorsqu’il est arrivé sur 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 la valeur qui en résulte `landing_site_ref` est `my-tracking-token`. Vous pouvez effectuer une certaine action si votre paramètre de référence est égal à une certaine valeur : {% if landing_site_ref == 'my-tracking-token' %} My action... {% endif %}
referring_site	L’URL du référent qui a redirigé le client vers votre boutique. Exemple : `https://www.google.com/?s=great+products`
created_at	La date et l’heure auxquelles le client a créé le paiement qu’il a abandonné.
closed_at	La date et l’heure de clôture du paiement.
customer_locale	Le code de langue à deux ou trois lettres pour les paramètres régionaux du client, éventuellement suivi d’un modificateur de région. Par exemple, en , en-CA
item_count	La somme des quantités de tous les articles.
unique_gateways	Une liste des fournisseurs de services de paiement uniques disponibles lors du paiement.
discount	La réduction appliquée au panier ou à un article du panier dans le paiement abandonné.
discounts	Une liste des réductions appliquées au paiement.
successfully_applied_discounts	Les réductions qui ont été appliquées avec succès au paiement.
discounts_amount	Le montant de la réduction appliquée par l’ensemble des réductions. Exemple : +5,00 $
discounts_savings	Le montant des économies réalisées grâce à toutes les réductions. Exemple : -5,00 $
buyer_accepts_marketing	Renvoie true ou false selon que le client a accepté ou non le marketing lors du paiement abandonné.
subtotal_line_items	Les articles du panier qui sont utilisés pour calculer le sous-total au moment du paiement, à l’exclusion de tout article de pourboire.
requires_shipping	Renvoie true s’il y a au moins un article dans le paiement qui nécessite une expédition.
subtotal_price	Le sous-total des articles du panier au moment du paiement.
email	L’e-mail associé au paiement abandonné.
shop_name	Le nom de votre boutique.
tax_lines	Les taxes ventilées par 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 du paiement.
attributes	Tous les attributs qui ont été associés au paiement abandonné. Exemple : `{{ attributes.gift-note }}`
shipping_method	Informations sur le premier mode d’expédition disponible au moment du paiement.
shipping_methods	Les modes d’expédition disponibles au moment du paiement.
free	Renvoie true if the total price of the checkout is zero.
free_shipping	Renvoie true si le paiement ne nécessite pas d’expédition ou si les frais d’expédition sont nuls.
different_billing_address	Renvoie true ou false selon que l’adresse de livraison est identique à l’adresse de facturation.
customer	L’objet client contenant les attributs de la sortie client.
gift_cards	Les cartes-cadeaux appliquées au paiement.
gift_cards_amount	Le montant du prix de la commande qui serait payé par cartes-cadeaux.
transactions	Les transactions du paiement.
shareable_url	L’URL du premier produit dans les articles du panier.
shareable_title	Le titre de produit du premier article du panier.
total_tip	Le pourboire total que le client a ajouté au moment du paiement.
discount_applications	Décrit pourquoi et comment un article a bénéficié d’une réduction lors du paiement.
cart_level_discount_applications	Les applications de réduction spécifiques au panier.
currency	La devise du paiement abandonné.
line_items_subtotal_price	La somme des prix de tous les articles du panier, après application des réductions par article du panier.

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

La variable abandoned_visit.* n’est remplie que si un e-mail fait partie d’une automatisation marketing de panier abandonné ou de navigation sur un produit abandonnée. Examinez les propriétés suivantes auxquelles cette variable donne accès.

Description des variables Liquid prises en charge par Shopify Messaging
Variable	Description
abandoned_visit.*	Cette variable donne accès aux propriétés suivantes d’un panier ou d’une navigation abandonnés : `url` affiche l’URL du panier ou de la navigation abandonnés. `products_added_to_cart` affiche les cinq premiers articles du panier ajoutés au panier de la visite abandonnée. De plus, chaque `products_added_to_cart` objet contient les propriétés suivantes sur chaque produit : `title` `image_url` `variant_title` `quantity` `products_viewed` affiche les cinq premiers produits consultés au cours de la visite abandonnée. De plus, chaque `products_viewed` objet contient les propriétés suivantes sur chaque produit : `title` `description` `image_url` `url` `image_alt_text` `remaining_cart_products_count` affiche le nombre d’articles du panier restants s’il y a plus de cinq articles du panier dans le paiement abandonné.

Utilisation des variables obligatoires

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 est la section de pied de page d’un 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 code Liquid ou HTML personnalisé dans l’éditeur de code. Le code suivant est 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 de taille personnalisé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>