Ajout d’un Liquid personnalisé aux campagnes 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(e) Partenaire Shopify.

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é.

Accès anticipé

Les e‑mails de codes personnalisés sont en accès anticipé et ne sont disponibles que pour certaines boutiques.

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>