Ajout d’un Liquid personnalisé aux campagnes Shopify Email

Vous pouvez ajouter un codage personnalisé à vos messages Shopify Email en ajoutant une section Liquid personnalisée ou en créant un e‑mail de code entièrement personnalisé. Ces options vous permettent d’entrer un Liquid ou HTML personnalisé.

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 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 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 suivantes pour personnaliser vos e‑mails Shopify avec Liquid.

Description des variables Liquid prises en charge par Shopify Email
Variable Description
unsubscribe_link
Cette variable donne accès au lien de désabonnement. Cette variable est obligatoire si vous créez un e-mail à partir de code personnalisé.
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.
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 :
    • image_url
    • 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.

    Utilisation des variables requises

    Lorsque vous créez un e‑mail Liquid personnalisé, la variable unsubscribe_link variable 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.

    <style>
      body {
        text-align: center;
      }
    
      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#footer {
        font-weight: 700;
        font-size: 16px;
        font-family: 'Futura';
        padding: 2rem;
      }
    
      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 id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>
    </div>

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

    Essayez gratuitement