Créer une mise en page d'e-mail

Une mise en page d'e-mail correspond à l'e-mail lui-même : l'objet, la mise en page et les pièces jointes éventuelles. L'action Shopify Flow sélectionne une mise en page et un expéditeur, puis envoie l'e-mail. La mise en page étant distincte du workflow, une seule mise en page peut s'appliquer à tous les clients sans que vous ayez à modifier le code HTML.

La liste comporte deux onglets, « Transactionnel » et « Marketing », qui indiquent chacun le nombre de modèles qu'ils contiennent. Elle s'ouvre par défaut sur l'onglet « Transactionnel » ; tous les modèles que vous avez créés avant l'apparition des types d'e-mails sont de nature transactionnelle. Vos critères de recherche, de tri et de pagination sont conservés lorsque vous changez d’onglet. Une mise en page marketing est signalée par un badge « Marketing » à côté de son nom, et la commande « Créer une mise en page d’e-mail » de l’onglet « Marketing » permet de créer une nouvelle mise en page de type marketing.

Créer une mise en page

Accédez à la rubrique « Modèles d'e-mails » et cliquez sur « Créer un modèle d'e-mail ». Vous devrez définir :

• Nom : le nom sous lequel vous le reconnaissez. Vous seul pouvez le voir.
• Objet : prend en charge {{ variables.xxx }} et {{ secrets.xxx }}.
• Texte d'aperçu - facultatif. Il s'agit de la courte ligne qui s'affiche à côté de l'objet dans la plupart des boîtes de réception. Prévoyez entre 40 et 100 caractères ; ce champ prend en charge les mêmes variables que l'objet. Si vous le laissez vide, le client de messagerie sélectionnera à la place le premier texte de votre e-mail.
• Description - facultative, à titre de référence personnelle.
• Type d'e-mail - Transactionnel : pour les e-mails auxquels les clients s'attendent, tels que les mises à jour concernant les commandes et les expéditions ; ils sont toujours envoyés, même aux clients qui se sont désabonnés des communications marketing. Marketing : pour les newsletters, les promotions et les e-mails de relance ; chaque destinataire reçoit son propre e-mail comportant un lien de désabonnement et les coordonnées de votre entreprise issues des Paramètres, et les clients qui se sont désabonnés sont ignorés. Contrairement à l’éditeur, le type peut être modifié ultérieurement dans l’éditeur de mise en page. Pour plus de détails, consultez E-mails marketing et désabonnements.

Choisissez ensuite un éditeur :

Rédacteur en chef	Idéal pour
Générateur visuel	Des e-mails personnalisés et à l'image de votre marque, créés à partir de blocs par glisser-déposer
Texte enrichi / HTML	De simples messages transactionnels, ou un e-mail HTML entièrement personnalisé que vous collez dans le champ prévu à cet effet

L'éditeur visuel

L'éditeur se présente sous la forme d'un écran à deux volets : les paramètres à gauche, un aperçu en temps réel de la zone de travail à droite. Ajoutez des blocs à l'aide du bouton « Ajouter une section » ou des repères « + » situés entre les blocs existants.

Le volet de gauche comporte quatre onglets :

Onglet	Ce qu'il contient
Généralités	Nom, Objet, Aperçu du texte, Description
Image de marque	Couleurs, typographie et espacement des éléments pour l'ensemble de l'e-mail
Blocs	Paramètres du bloc que vous avez sélectionné sur le canevas
Variables de test	L'extrait JSON de la directive Shopify Flow, le référentiel des variables système et des exemples de valeurs pour la prévisualisation

Chaque bloc affiché sur le canevas dispose de commandes permettant de le déplacer, de le dupliquer, de le supprimer ou de le masquer sans le supprimer.

Référence de bloc

Éléments

Bloc	Paramètres
Texte	Texte formaté, alignement, taille de police (12/14/16/18), couleur
Titre	Texte de l'en-tête, taille (de H1 « très grande » à H4 « petite »), alignement, couleur
Image	Image (fichier téléchargé ou lien), texte alternatif, largeur 10 à 100 %, alignement
Bouton	Libellé, URL, style (Principal / Secondaire / Contour), alignement, rayon de bordure : 0 à 24 px
Séparateur	Couleur, style (continu / en pointillés / en points), épaisseur 1 à 8
Espacement	Hauteur : 4 à 80 px
Pièce jointe	Un sélecteur de fichiers, un lien ou un métachamp relatif à la commande ou au client de l'étape, ainsi qu'un titre. Voir Pièces jointes et images
Boucle	Répète un bloc de Liquid + HTML sur une variable de tableau
HTML / Code	HTML brut avec Liquid, y compris les conditions {% if %}
Code QR	Données (URL ou texte, prend en charge les variables), taille : 80 à 300 px, alignement
Tableau des articles de dépense	Les articles de la commande provenant d'une variable de liste, avec des lignes correspondant à l'image, la quantité, le prix et les totaux

Blocs « Commerce » et « Contenu » (nouveautés de la version 1.17 ; pour plus de détails sur chacun d'entre eux, consultez Blocs de contenu : produit, réductions, compte à rebours, suivi et bien plus encore)

Bloc	Fonctionnalités
Produit	Une fiche produit : image, titre, description, prix avec prix avant réduction, et un bouton. Chaque champ prend une variable
Tableau des produits	Deux ou trois fiches par ligne à partir d'une variable de liste, comme le tableau des articles
Code de réduction	Un champ de saisie de code doté d'un bouton permettant d'appliquer le code lors du paiement. Il peut s'agir soit d'un code que vous saisissez vous-même, soit d'un code unique à usage unique généré par votre boutique pour chaque adresse e-mail.
Compte à rebours	Un compte à rebours en direct jusqu'à une date, qui s'affiche sous forme d'image animée à l'ouverture de l'e-mail. Cas, cartes à retourner, style minimaliste ou textuel
Suivi de commande	Transporteur, numéro de suivi, un bouton « Suivi » et une barre de progression mise à jour en fonction du statut de l'envoi
Évaluation par étoiles	Étoiles correspondant à un nombre, accompagnées d'une légende et d'un lien facultatif vers votre page d'avis
Témoignage	Une citation accompagnée d'un nom, d'une fonction et d'une photo, sous forme de carte, avec une barre d'accent ou sans rien
Liens vers les réseaux sociaux	Une rangée d'icônes de réseau
Vidéo	Une vignette avec un bouton « Lecture » renvoyant vers la vidéo
Signature	Nom, fonction, entreprise, numéro de téléphone, adresse e-mail, site web et une photo
Tableau	Un petit tableau de données, chaque cellule contenant une variable
Afficher dans le navigateur	La phrase habituelle « Afficher cet e-mail dans votre navigateur »
Prix	Une ligne de prix à part entière : le prix, un prix avant réduction facultatif barré, la taille, la couleur et l'alignement

Mise en page

Bloc	Paramètres
Image + Texte	Position de l'image (à gauche/à droite), largeur de l'image (20 à 70 %), alignement vertical, espacement, couleur d'arrière-plan, ainsi que les sous-composants « image », « texte » et « bouton »
Deux colonnes	Répartition des colonnes (50/50, 33/67, 67/33, 40/60, 60/40), espacement de 0 à 40, alignement vertical, espacement interne et contenus distincts pour les colonnes de gauche et de droite
Rubriques	Deux, trois ou quatre colonnes de même largeur, chacune comportant ses propres blocs
Afficher si	Une section qui n'est transmise que lorsqu'une condition liée aux variables est vérifiée, par exemple variables.total > 100 ou language == "de"

Image de marque

L'onglet « Identité visuelle » s'applique à l'ensemble de la mise en page :

• Couleurs : couleurs primaires, secondaires, du texte, de l'arrière-plan du corps du texte, de l'arrière-plan du contenu
• Typographie - police des titres, police du corps du texte, interligne
• Mise en page - les commandes d'espacement ci-dessous

Contrôle	Ce que cela change	Gamme
Largeur maximale	Dans quelle mesure le contenu d'un e-mail peut-il s'étendre ?	400 à 800 px
Rembourrage des conteneurs	Espace autour de l'ensemble de la zone de contenu	0 à 40 px
Rembourrage des blocs (côtés)	Espace entre votre contenu et les bords gauche et droit	0 à 40 px
Remplissage des blocs (en haut et en bas)	Espace au-dessus et en dessous du contenu de chaque bloc	0 à 40 px
Espacement des blocs	Espace vertical entre deux blocs consécutifs	0 à 40 px

Veillez à ce que le « Block Padding » (en haut et en bas) reste faible. L'espacement entre les blocs (« Block Spacing ») sépare déjà ces derniers ; par conséquent, augmenter ces deux valeurs créerait de grands espaces.

Si vous avez défini des noms pour les couleurs de votre marque dans « Paramètres > Marque et polices », chaque sélecteur de couleur du générateur les affiche sous forme de pastilles sous le champ, et un clic sur une pastille permet d'appliquer cette couleur. La pastille correspondant à la couleur actuellement sélectionnée dans le champ est mise en surbrillance. Voir Paramètres.

Le menu déroulant des polices propose les polices système (Arial, Georgia, Verdana, Times New Roman, Helvetica, Trebuchet MS), un ensemble de polices Google (Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Raleway, Playfair Display, Merriweather, Source Sans 3, Oswald, Work Sans, DM Sans, Space Grotesk), ainsi que toute police personnalisée que vous avez téléchargée dans la rubrique Paramètres > Identité visuelle et polices.

En-tête et pied de page

L'en-tête et le pied de page sont des zones cliquables situées en haut et en bas de la zone de travail. Chacune d'entre elles peut utiliser un préréglage enregistré, ce qui permet de mettre à jour simultanément toutes les mises en page lorsque vous modifiez votre identité visuelle, ou l'option « Personnalisé » (pour cette mise en page uniquement) pour une modification ponctuelle. Voir Préréglages d'en-tête et de pied de page.

Mode texte enrichi / HTML

Dans ce mode, la zone de texte constitue un éditeur unique doté d'un bouton permettant de basculer entre le format RTF et le format HTML, ainsi que d'un bouton distinct permettant d'afficher l'aperçu.

• Le mode « texte enrichi » met à votre disposition une barre d'outils de mise en forme familière.
• Le code HTML vous propose une zone de texte brute : collez-y un e-mail déjà mis en page si vous en avez un.
• La fonction « Insérer une image » permet d'ajouter une image hébergée, provenant soit de votre bibliothèque multimédia, soit d'un lien.

L'aperçu est en lecture seule et affiche les balises Liquid telles quelles. Pour voir les valeurs réelles, envoyez un e-mail de test.

Le connecter à Shopify Flow

La mise en page ne représente que la moitié du travail : Shopify Flow doit fournir les valeurs correspondant à vos espaces réservés.

Chaque modèle comporte une fiche « Utilisation dans l’Shopify Flow » contenant les variables exactes (au format JSON) à coller dans l’action « Envoyer un e-mail transactionnel », avec tous les noms de clés déjà correctement renseignés. Copiez-les, collez-les dans Shopify Flow et remplacez les éventuels espaces réservés <pick a Flow variable>.

Guide complet : Transmission de données depuis Shopify Flow.

Aperçu avec des variables de test

L'onglet « Variables de test » répertorie toutes les {{ variables.x }} détectées par l'application ; vous pouvez ainsi saisir des valeurs d'exemple et vérifier que la mise en page s'affiche correctement.

Pour transmettre un tableau à un bloc « Loop », saisissez-le sous forme de tableau JSON dans cet onglet.

Envoyer un e-mail de test

Utilisez la fonction « Envoyer un e-mail de test » dans l'éditeur de mise en page. Elle affiche la mise en page telle qu'elle apparaîtra réellement et l'envoie via l'expéditeur de votre choix, avec l'objet précédé de [TEST]. C'est le seul moyen de vérifier que votre code Liquid s'affiche correctement, car l'aperçu à l'écran ne l'évalue pas.

Une fois que vous aurez mis en production, consultez l'historique : un envoi dans lequel un espace réservé n'a donné aucun résultat est signalé par la mention « Variables vides ». Voir Historique et dépannage.

Réutiliser un modèle

• En savoir plus → L'option « Enregistrer comme modèle » permet de sauvegarder votre création afin que vous puissiez la réutiliser ultérieurement. Les créations enregistrées se trouvent dans la rubrique « Mes modèles », qui ne contient que les créations que vous avez vous-même enregistrées.
• En savoir plus → La fonction « Dupliquer » copie la mise en page telle quelle.
• En savoir plus → La fonction « Exporter » permet de télécharger le fichier, tandis que la fonction « Importer » sur la page de la liste accepte un fichier au format .zip ou .json précédemment exporté depuis l'application - ce qui est pratique pour transférer un modèle d'une boutique à l'autre.

Supprimer une mise en page

Vous pouvez à tout moment supprimer une mise en page. Si une étape d’Shopify Flow y fait encore référence, la mise en page s’affiche avec un badge « Utilisé dans Shopify Flow » et le message de confirmation de suppression le précise, mais cela ne vous empêche pas de procéder à la suppression.

Après la suppression, toute étape de Shopify Flow qui y fait encore référence génère une erreur Email template not found, qui apparaît dans l'historique. Pour résoudre ce problème, redirigez ces étapes vers une autre mise en page.

Connexes

• Blocs de contenu : produit, réductions, compte à rebours, suivi et bien plus encore - produit, réductions, compte à rebours, suivi et les autres blocs de contenu.
• Transmission de données depuis Shopify Flow - en indiquant les valeurs.
• Variables et liquide - la référence complète de la variable.
• Pièces jointes et images - fichiers, images et limites de taille.
• Préréglages d'en-tête et de pied de page - une image de marque réutilisable.
• E-mails marketing et désabonnements - en quoi une mise en page marketing se distingue des autres.
• Paramètres - les couleurs de la marque, les polices personnalisées et les paramètres par défaut des e-mails pour l'ensemble de la boutique.