Workflow Transactional EmailWorkflow Transactional Email

Blocs de contenu : produit, réductions, compte à rebours, suivi et bien plus encore

La version 1.17 ajoute treize blocs de contenu et deux blocs de mise en page à l'éditeur visuel. Chaque champ de texte de ces blocs prend en charge Liquid ; ainsi, un titre de produit ou un numéro de suivi peut provenir du workflow via {{ variables.xxx }}, et le canevas affiche chaque bloc rendu avec vos variables de test.

Blocs composés de pièces

La fiche produit, la zone de réduction, le témoignage, la signature, la vidéo et le bloc de suivi de commande sont constitués des blocs de base que vous connaissez déjà, tout comme le bloc « Image + Texte ». Ouvrez-en un et le panneau de paramètres affiche ses différents éléments : une image, un titre, un texte, un prix, un bouton. Cliquez sur un élément pour le modifier à l’aide de tous les paramètres de ce bloc (largeur et alignement de l’image, niveau du titre, mise en forme de texte enrichi, style du bouton et rayon des coins) ; utilisez l’icône en forme d’œil pour masquer un élément dont vous n’avez pas besoin. Sous les éléments se trouvent les paramètres du bloc lui-même, tels que la mise en page de la fiche ou le style du cadre.

Produit

Une fiche produit. Éléments : image (à télécharger ou via un lien, par exemple {{ variables.product_image }}), titre, description (masquée jusqu’à ce que vous l’activiez), prix avec, en option, un prix avant réduction, et un bouton. Le lien englobe l'image et le titre ; le bouton dispose de son propre lien. La mise en page place l'image au-dessus du texte ou à côté de celui-ci, en précisant la largeur de l'image et l'alignement vertical de la ligne. Utilisez-la pour mettre en avant un produit dans un e-mail de commande ou de relance client.

Prix

Une ligne de prix à part entière : le prix en gras, un prix avant réduction facultatif barré devant celui-ci, la taille, la couleur et l'alignement. Il s'agit de la partie « prix » de la fiche produit, visible partout.

Tableau des produits

Deux ou trois cartes par ligne à partir d'une liste figurant dans vos variables, de la même manière que fonctionne le tableau des articles. Pointez « List » vers la variable (par exemple variables.products), puis nommez la propriété qui contient chaque champ : title, price, compare_at_price, image, url. Chaque entrée devient une carte dotée d’un bouton dont vous pouvez choisir le style et le rayon de courbure des coins ; une image ou un lien manquant est simplement omis. Remplissez la liste à partir de Shopify Flow à l’aide d’une étape « Exécuter du code » ou des articles de la commande.

Code de réduction

Une zone de code comportant un titre, une description et un bouton, le tout encadré d'un cadre en pointillés, continu ou simple. Deux façons de la remplir :

  • Un code qui existe déjà : saisissez-le (ou une variable). Le bouton renvoie vers votre boutique avec le code appliqué lors du paiement, à moins que vous ne lui attribuiez un lien spécifique.
  • Créez un code unique pour chaque e-mail : l'application génère un code de réduction à usage unique dans votre boutique dès l'envoi de l'e-mail, intitulé PREFIX-XXXXXX, avec le pourcentage ou le montant, la durée de validité en jours, le montant minimum de commande et la règle « une fois par client » que vous avez définis. Le code apparaît dans l'historique avec l'envoi, et la fonction « Renvoyer » de l'e-mail affiche le même code. Un e-mail marketing génère un code par destinataire.

La création de codes nécessite l'autorisation « Réductions », que le bloc demande directement et que vous pouvez retirer sur la page « Autorisations » (Autorisations : les informations que l'application peut lire dans votre boutique). L'application se contente de créer des codes ; elle ne lit, ne modifie ni ne supprime jamais d'autres réductions. Un e-mail de test affiche un espace réservé au lieu de créer un code.

Compte à rebours

Un compte à rebours en temps réel jusqu'à une date et une heure données. Dans l'e-mail, il s'agit d'une image animée que l'application affiche à l'ouverture du message ; le compte à rebours s'affiche donc directement dans la boîte de réception. Si votre client de messagerie bloque les images, le texte s'affiche à côté. Le paramètre « Ends at » accepte une date avec un fuseau horaire (au format 2026-12-24T23:59:00+01:00) ou une variable. Quatre styles : encadrés, cartes à retourner, minimaliste et texte ; trois tailles ; vos propres libellés et couleurs ; et un texte qui remplace le compte à rebours une fois le délai écoulé.

Suivi de commande

Le nom du transporteur et le numéro de suivi, une barre indiquant l'avancement, ainsi que deux éléments : un bouton « Suivre » (qui ouvre le lien de suivi, sauf si vous en indiquez un autre) et une note, telle que la date de livraison estimée, masquée jusqu'à ce que vous en ayez besoin. Le statut de l’envoi reprend le statut d’Shopify issu de Shopify Flow (IN_TRANSIT, OUT_FOR_DELIVERY, DELIVERED et autres) ou un numéro d’étape, et met en surbrillance les étapes qui le précèdent. Les libellés des étapes sont les vôtres ; vous pouvez en définir entre deux et six.

Évaluation par étoiles

Étoiles correspondant à un nombre ({{ variables.rating }}), arrondies à un nombre entier, les autres étant grisées, accompagnées d'un texte et d'un lien facultatif, par exemple vers votre page d'avis. À associer à un e-mail de demande d'avis.

Témoignage

Une citation et une ligne d'auteur en tant qu'éléments de texte, accompagnées d'une photo facultative, sous forme de carte, avec une bande de couleur ou sans.

Liens vers les réseaux sociaux

Une rangée d'icônes de réseaux sociaux (Instagram, Facebook, X, LinkedIn, YouTube, TikTok, Pinterest et bien d'autres), avec une taille et un espacement définis. Il s'agit des mêmes icônes que celles utilisées dans le pied de page.

Vidéo

Les e-mails ne permettent pas de lire les vidéos ; ce bloc affiche donc la vignette accompagnée d'un bouton de lecture, lié à la page de la vidéo, ainsi qu'une légende facultative en dessous. Vous pouvez choisir entre un bouton de lecture sombre, clair ou aux couleurs de votre marque, ainsi que la hauteur et la largeur de la vignette. Outlook pour Windows n'affiche pas la vignette derrière le bouton de lecture ; le lien reste toutefois fonctionnel.

Signature

Une photo, un nom (un titre) et les informations détaillées (un texte : fonction, entreprise, numéro de téléphone, e-mail, site web), la photo pouvant être ronde ou carrée, placée à gauche ou au-dessus. Les valeurs par défaut sont {{ shop.name }} et {{ shop.email }}.

Tableau

Un petit tableau de données contenant des informations sur les commandes ou des spécifications. Chaque cellule contient une variable ; la première ligne peut servir d'en-tête, et les lignes peuvent être alternées.

Afficher dans le navigateur

La mention habituelle « Afficher cet e-mail dans votre navigateur ». Le lien ouvre une version Web de cet e-mail précis, générée à partir de la mise en page et des données de l'envoi, et accessible pendant 30 jours. Un e-mail de test renvoie vers la mise en page avec ses variables de test.

Rubriques

Deux, trois ou quatre colonnes de même largeur, chacune comportant ses propres blocs : trois fiches produit côte à côte, ou des icônes accompagnées d'une ligne de texte sous chacune d'elles.

Afficher si

Une section qui n'est affichée que lorsqu'une condition liée à vos variables est vraie. Saisissez la condition telle que Liquid la lit : variables.total > 100, language == "de", variables.tags contains "vip". Le canevas l'évalue à l'aide de vos variables de test et masque la section lorsqu'elle ne doit pas s'afficher. Placez les blocs à l'intérieur comme vous le feriez dans une colonne.

Connexes