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
ouunsubscribe_url
est obligatoire dans les e-mails Liquid personnalisés. Si vous avez activé le suivi des ouvertures, la variableopen_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 :
- Tous les modèles d’e-mails
- Modèles d'e-mail de relance de paiement abandonné
- Modèles d'e-mail de navigation abandonnée et de relance de panier abandonné
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.
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.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.
|
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.
Variable | Description |
---|---|
abandoned_checkout.* |
Pour les paniers abandonnés, cette variable donne accès aux propriétés suivantes :
|
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_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 : |
landing_site_ref |
Extrait un paramètre de référence du site de destination. Les paramètres de référence peuvent être : Si {% 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 : |
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 vraiou fauxen 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 vrais’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. |
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 : |
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 vraisi le paiement ne nécessite pas d’expédition ou si le prix d’expédition est zéro. |
different_billing_address | Retours vraiou fauxselon 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.
Variable | Description |
---|---|
abandoned_visit.* |
Cette variable donne accès aux propriétés suivantes d’une recherche abandonnée ou d’un 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>