Ajout d’une section Liquid personnalisée à Shopify Email
L’ajout d’une section Liquid personnalisée vous permet d’introduire des codes Liquid ou HTML personnalisés dans vos messages Shopify Email.
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 la section Liquid personnalisée pour afficher des éléments personnalisés tels que des images adjacentes, des boutons personnalisés, et des images et sections redimensionnées.
Sur cette page
Considérations
Tenez compte des considérations suivantes avant de commencer à ajouter du contenu Liquid personnalisé à vos messages Shopify Email.
- Les variables que vous introduisez dans votre code doivent être prises en charge par la section Liquid personnalisée.
- Votre code ne doit pas dépasser 50 Ko.
- Vous pouvez créer une section Liquid personnalisée sur ordinateur uniquement.
Variables Liquid prises en charge dans la section du code Liquid personnalisé
Vous pouvez utiliser les variables suivantes pour personnaliser vos e-mails Shopify dans la section Liquid personnalisée.
Variable | Description |
---|---|
abandoned_checkout |
Pour les paniers abandonnés, cette variable donne accès aux propriétés suivantes :
La variable |
abandoned_visit |
Cette variable donne accès aux propriétés suivantes d’une recherche abandonnée ou d’un panier abandonné :
La variable |
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.
|
Exemple de code Liquid personnalisé
Après avoir ajouté une section Liquid personnalisée à votre modèle d’e-mail, vous pouvez ajouter votre code 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>
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#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>