Ajout d’une section Liquid personnalisée à Shopify Email

Développer votre entreprise

Si vous avez besoin d’aide pour créer un code personnalisé pour vos messages Shopify Email, vous pouvez engager un Expert Shopify.

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.

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.

Description des variables Liquid prises en charge par Shopify Email

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 : product_title variant_title quantité remaining_products_count affiche le nombre de rubriques restantes lorsqu’il y en a plus de cinq dans le panier abandonné. La variable abandoned_checkout est remplie uniquement si un e-mail fait partie d’une automatisation de marketing de panier abandonné. Sinon, la variable sera null.
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é. 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 remaining_cart_products_count affiche le nombre de rubriques restantes lorsqu’il y en a plus de cinq dans le panier abandonné. La variable abandoned_visit est remplie uniquement si un e-mail fait partie d’une automatisation de marketing de panier abandonné ou de recherche de produit abandonnée. Sinon, la variable sera null.
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. address affiche l’adresse de la boutique, qui donne les propriétés d’adresse suivantes : address1 address2 city Pays Téléphone province code postal branding affiche l’image de marque de la boutique, qui comprend les propriétés suivantes : accent_section_color background_primary_color background_border_color body_text_color button_background_and_link_color button_label_color footer_link_color footer_text_color footer_background_color social_link_facebook social_link_twitter social_link_instagram social_link_pinterest shop_name logo, rendu directement sous forme de balise img.

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>