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 vos 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, et tous les modèles que vous avez créés avant la mise en place des types d'e-mails sont de type transactionnel. Vos critères de recherche, votre tri et votre 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 fonction 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. Plus de détails dans E-mails marketing et désabonnements.

Choisissez ensuite un éditeur :

Rédacteur en chef	Idéal pour
Éditeur visuel	Des e-mails personnalisés et à l'image de votre marque, créés à partir de blocs à 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 d'Shopify Flow, la référence 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 enrichi, 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 type tableau
HTML / Code	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 pour l'image, la quantité, le prix et les totaux

Blocs Commerce et Contenu (nouveauté 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 issues 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. Encadrés, 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	Des é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 entre les colonnes 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 envoyée que lorsqu'une condition portant sur les variables est vraie, 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 : 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 du canevas. Chacune d'entre elles peut utiliser un préréglage enregistré, ce qui permet de mettre à jour simultanément toutes les mises en page en cas de modification de 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à entièrement 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.

Intégration à Shopify Flow

La mise en page ne représente que la moitié du travail : c'est à Shopify Flow de fournir les valeurs pour vos espaces réservés.

Chaque modèle comporte une fiche « Utilisation dans Shopify Flow » contenant les variables exactes (au format JSON) à coller dans l'action Send Transactional Email, avec tous les noms de clés déjà correctement définis. Copiez-les, collez-les dans Shopify Flow, puis remplacez tous les espaces réservés de type <pick a Flow variable>.

Vous choisissez la mise en page de chaque étape de Shopify Flow sur la page de configuration de l'action, qui affiche un aperçu de celle-ci renseignée avec ses variables de test. Des noms clairs et des variables de test réalistes permettent d'identifier facilement la mise en page appropriée.

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 {{ 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'exécute correctement, car l'aperçu à l'écran ne l'évalue pas.

Une fois la mise en ligne effectuée, consultez l'historique : un envoi dans lequel un espace réservé n'a rien généré 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 liste accepte les fichiers .zip ou .json précédemment exportés depuis l'application - ce qui est pratique pour transférer un design d'une boutique à l'autre.

Suppression d'une mise en page

Vous pouvez à tout moment supprimer une mise en page. Si une étape Shopify Flow y fait encore référence, la mise en page s'accompagne d'un badge Utilisée dans Shopify Flow et la fenêtre 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, veuillez rediriger ces étapes vers une autre mise en page.

À ce sujet

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