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.

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
VariableDescription
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
    VariableDescription
    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
    VariableDescription
    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>
    Vous ne trouvez pas les réponses que vous recherchez ? Nous sommes là pour vous aider.