Personnalisation des modèles de courrier électronique
Commerce comprend un modèle de courrier électronique par défaut pour la section body de chaque message envoyé par le système. Le modèle du contenu du corps est combiné avec les modèles d’en-tête et de pied de page pour créer le message complet. Le contenu est formaté avec HTML et CSS et peut être facilement modifié et personnalisé en ajoutant variables. Les modèles de courrier électronique peuvent être personnalisés pour chaque site web, magasin ou vue de magasin. Si vous utilisez des modèles personnalisés, veillez à mettre à jour la configuration système pour vous assurer que le modèle correct est utilisé. Pour savoir comment utiliser des instructions conditionnelles dans la personnalisation du modèle de courrier électronique, consultez la documentation destinée aux développeurs.
{width="500" modal="regular"}
Les modèles par défaut incluent votre logo et les informations de magasin. Ils peuvent être utilisés sans autre personnalisation. Toutefois, il est recommandé de consulter chaque modèle et d’apporter les modifications nécessaires avant de les envoyer aux clients.
{width="700" modal="regular"}
Informations sur les modèles
Modèle d’en-tête
Une fois la configuration terminée, le modèle d’en-tête d’email inclut votre logo associé à votre boutique. Si vous avez une connaissance de base de l’HTML, vous pouvez facilement utiliser des variables prédéfinies pour ajouter des informations de contact de magasin à l’en-tête.
Étape 1. Chargement du modèle par défaut
-
Sur la barre latérale Admin, accédez à Marketing > Communications>Email Templates.
-
Cliquez sur Add New Template.
-
Dans la section Load default template , cliquez sur le sélecteur Template et choisissez
Magento_Email
>Header
.{width="600" modal="regular"}
-
Cliquez sur Load Template.
Le code d’HTML et les variables du modèle apparaissent dans le formulaire.
Étape 2. Personnaliser le modèle
-
Saisissez le Template Name de votre en-tête personnalisé.
-
Saisissez un Template Subject pour organiser les modèles.
Dans la grille, la liste des modèles peut être triée et filtrée par la colonne Subject.
{width="600" modal="regular"}
-
Dans la zone Template Content, modifiez l’HTML selon vos besoins.
note note NOTE Lorsque vous travaillez dans le code du modèle, veillez à ne pas écraser les éléments placés entre deux accolades. -
Pour insérer une variable, placez le curseur dans le code à l’endroit où vous souhaitez placer la variable et cliquez sur Insert Variable.
-
Sélectionnez la variable à insérer.
{width="600" modal="regular"}
Lorsqu’une variable est sélectionnée, une balise de balisage pour la variable est insérée dans le code.
Bien que les variables Store Email Address soient les plus souvent incluses dans l’en-tête, vous pouvez saisir le code de n’importe quel système ou variable personnalisée directement dans le modèle.
-
Si vous devez faire des déclarations CSS, saisissez les styles dans la zone Template Styles.
-
Lorsque vous êtes prêt à passer en revue votre travail, cliquez sur Preview Template.
Apportez les modifications nécessaires au modèle.
-
Une fois l’opération terminée, cliquez sur Save Template.
Votre en-tête personnalisé apparaît désormais dans la liste des modèles de courrier électronique disponibles.
Étape 3. Mise à jour de la configuration
-
Sur la barre latérale Admin, accédez à Content > Design>Configuration.
-
Dans la grille, recherchez la vue de magasin que vous souhaitez configurer et cliquez sur Edit dans la colonne Action.
-
Faites défiler l’écran vers le bas et développez la section sur Transactional Emails .
-
Sélectionnez le Header Template utilisé par défaut pour les notifications par e-mail.
-
Une fois l’opération terminée, cliquez sur Save Config.
{width="600" modal="regular"}
Modèle de pied de page
Le pied de page du modèle d’email contient la ligne de fermeture et de signature du message. Vous pouvez modifier la fermeture pour l’adapter à votre style et ajouter des informations supplémentaires, telles que le nom et l’adresse de la société sous votre nom.
Étape 1. Chargement du modèle par défaut
-
Sur la barre latérale Admin, accédez à Marketing > Communications>Email Templates.
-
Cliquez sur Add New Template.
-
Dans la section Load default template , cliquez sur le sélecteur Template et choisissez
Magento_Email
>Footer
. -
Cliquez sur Load Template.
Le code d’HTML et les variables du modèle apparaissent dans le formulaire.
Étape 2. Personnaliser et prévisualiser le modèle
-
Saisissez le Template Name correspondant au pied de page personnalisé.
-
Saisissez un Template Subject pour organiser les modèles.
Dans la grille, les modèles peuvent être triés et filtrés par colonne Subject.
{width="600" modal="regular"}
-
Dans la zone Template Content, modifiez l’HTML selon vos besoins.
note note NOTE Lorsque vous travaillez dans le code du modèle, veillez à ne pas écraser les éléments placés entre deux accolades. -
Pour insérer une variable, placez le curseur dans le code à l’endroit où vous souhaitez placer la variable et cliquez sur Insert Variable.
-
Sélectionnez la variable à insérer.
Lorsqu’une variable est sélectionnée, une balise de balisage pour la variable est insérée dans le code.
Bien que les variables de contact du magasin soient les plus souvent incluses dans le pied de page, vous pouvez saisir le code de n’importe quel système ou la variable personnalisée directement dans le modèle.
-
Si vous devez faire des déclarations CSS, saisissez les styles dans la zone Template Styles.
Étape 3. Mise à jour de la configuration
-
Sur la barre latérale Admin, accédez à Content > Design>Configuration.
-
Dans la grille, recherchez la vue de magasin que vous souhaitez configurer et cliquez sur Edit dans la colonne Action.
-
Faites défiler l’écran vers le bas et développez la section sur Transactional Emails .
-
Sélectionnez le Footer Template utilisé comme pied de page par défaut dans les notifications par e-mail.
-
Une fois l’opération terminée, cliquez sur Save Config.
{width="600" modal="regular"}
Modèles de message
La personnalisation du corps de chaque message est identique à celle de l'en-tête ou du pied de page. La seule différence est le modèle de message pour chaque activité ou événement qui déclenche une notification. Vous pouvez utiliser les modèles tels quels ou les personnaliser pour qu’ils correspondent à votre voix et à votre marque. Outre le texte du modèle, il existe une grande sélection de variables prédéfinies et de variables personnalisées que vous pouvez créer et incorporer dans le modèle.
Étape 1. Chargement du modèle par défaut
-
Sur la barre latérale Admin, accédez à Marketing > Communications>Email Templates.
-
Cliquez sur Add New Template.
{width="600" modal="regular"}
-
Procédez comme suit :
-
Sous Load default template, sélectionnez le Template que vous souhaitez personnaliser.
-
Cliquez sur Load Template.
-
Étape 2. Personnaliser le modèle
-
Pour Template Name, saisissez un nom pour votre modèle personnalisé.
-
Si nécessaire, modifiez le Template Subject.
Il s’agit de la première ligne du message, qui est la formule de salutation par défaut. Vous pouvez la laisser telle quelle ou saisir quelque chose de plus explicite.
-
Prenez note du chemin d’accès Currently Used For au modèle, qui est le chemin d’accès utilisé pour mettre à jour la configuration.
{width="600" modal="regular"}
-
Dans la zone Template Content, modifiez l’HTML selon vos besoins.
Le contenu se compose d’une combinaison de balises d’HTML, de directives CSS, de variables et de texte.
note note NOTE Lorsque vous travaillez dans le code du modèle, veillez à ne pas taper accidentellement le code encadré de doubles accolades. -
Pour insérer une variable, placez le curseur dans le code à l’endroit où la variable doit apparaître.
La sélection des variables varie selon le modèle et inclut les variables prédéfinies et personnalisées autorisées, le cas échéant.
-
Cliquez sur Insert Variable et sélectionnez la variable à insérer.
Une commande permettant d’insérer la variable est placée entre accolades et ajoutée au code à l’emplacement du curseur. Par exemple :
customVar code=my_custom_variable
-
Pour effectuer des déclarations CSS, saisissez les styles dans Template Styles.
{width="600" modal="regular"}
note note NOTE Les styles personnalisés ne sont appliqués à l'email que si {{template config_path="design/email/header_template"}}
est présent dans Template Styles. Pour utiliser une page CSS personnalisée sans modèle d’en-tête par défaut, vous devez les fournir ici dans la balise d’HTML<style>
.
Étape 3. Mise à jour de la configuration
Le chemin de navigation Currently Used For indique l’emplacement d’utilisation du modèle. Dans cet exemple, la configuration du modèle se trouve sur la page Customer Configuration, dans la section Create New Account Options et dans le champ Default Welcome Email.
- Page - Customer Configuration
- Section - Create New Account Options
- Field - Default Welcome Email
-
Dans le chemin de navigation Currently Used For, cliquez sur le lien pour ouvrir la page de configuration du modèle.
{width="600" modal="regular"}
-
Développez la section et recherchez le champ du modèle de courrier électronique que vous avez personnalisé.
-
Décochez la case Use system value et cliquez sur le nom de votre modèle personnalisé.
{width="600" modal="regular"}
-
Une fois l’opération terminée, cliquez sur Save Config.
-
Dans le message situé en haut de l’espace de travail, cliquez sur Cache Management et effacez tout cache non valide.
Étape 4. Prévisualiser et enregistrer le modèle
-
Lorsque vous êtes prêt à passer en revue votre travail, cliquez sur Preview Template.
-
Mettez le modèle à jour selon vos besoins.
-
Une fois l’opération terminée, cliquez sur Save Template.
Votre modèle personnalisé est désormais disponible dans la liste des modèles d’email.