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.

Considérations

Tenez compte des considérations suivantes avant de commencer à ajouter du contenu Liquid personnalisé à vos messages Shopify Email.

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>

    Prêt(e) à commencer à vendre avec Shopify ?

    Essayez gratuitement