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 indépendante 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 la mise en place des types d'e-mails sont de type transactionnel. 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 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 section « 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 les sites
{{ 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 ne reçoivent pas ces e-mails. 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 de mise en page 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 Shopify Flow, le répertoire 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 la 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 | Sélection de fichiers et titre. Voir Pièces jointes et images |
| Boucle | Répète un bloc « Liquid + HTML » sur une variable de tableau - utilisez cette fonction pour les articles |
| 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 |
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 |
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 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 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 pour 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 définis. Copiez-la, collez-la 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 }}s » 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 » reproduit la mise en page à l'emplacement actuel.
- 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
.zipou.jsonpré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 maquette. Si une étape de Shopify Flow y fait encore référence, la maquette s’affiche avec un badge « Utilisé dans Shopify Flow » et le message de confirmation de suppression vous le signale, 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
- 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-t-elle ?
- 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.