Personnaliser les modèles d’e-mail
Commerce comprend un modèle d’e-mail par défaut pour la section corps 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 des variables. Les modèles d’e-mail 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 du système pour vous assurer que le modèle correct est utilisé. Pour découvrir comment utiliser des instructions conditionnelles lors de la personnalisation du modèle d’e-mail, consultez la documentation destinée aux développeurs.
Les modèles par défaut incluent votre logo et les informations du magasin. Ils peuvent être utilisés sans autre personnalisation. Cependant, la bonne pratique consiste à afficher chaque modèle et à apporter les modifications nécessaires avant de l’envoyer aux clients.
Informations sur le modèle
Modèle d’en-tête
Une fois la configuration terminée, le modèle d’en-tête d’e-mail inclut votre logo associé à votre boutique. Si vous disposez de connaissances de base d’HTML, vous pouvez facilement utiliser variables prédéfinies pour ajouter les informations de contact du magasin à l’en-tête.
Étape 1. Charger le modèle par défaut
-
Dans 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 de Template et choisissez
Magento_Email>Header. {width="600" modal="regular"}
-
Cliquez sur Load Template.
Le code 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 vous aider à organiser les modèles.
Dans la grille, la liste des modèles peut être triée et filtrée selon la colonne Subject.
{width="600" modal="regular"}
-
Dans la zone de Template Content, modifiez l’HTML selon vos besoins.
note NOTE Lorsque vous travaillez dans le code de modèle, veillez à ne pas remplacer tout ce qui est placé entre doubles 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 est insérée dans le code.
Bien que les variables Adresse e-mail de la boutique soient celles qui sont le plus souvent incluses dans l’en-tête, vous pouvez saisir le code de n’importe quelle variable 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 de Template Styles.
-
Lorsque vous êtes prêt à passer en revue votre travail, cliquez sur Preview Template.
Apportez les modifications nécessaires au modèle.
-
Cliquez ensuite sur Save Template.
Votre en-tête personnalisé apparaît désormais dans la liste des modèles d’e-mail disponibles.
Étape 3. Mise à jour de la configuration
-
Dans la barre latérale Admin, accédez à Content > Design>Configuration.
-
Dans la grille, recherchez la vue de magasin que vous souhaitez configurer, puis cliquez sur Edit dans la colonne Action.
-
Faites défiler vers le bas et développez
la section Transactional Emails .
-
Choisissez le Header Template utilisé par défaut pour les notifications par e-mail.
-
Cliquez ensuite sur Save Config.
Modèle de pied de page
Le pied de page du modèle d’e-mail contient la ligne de fermeture et de signature de l’e-mail. Vous pouvez modifier la fermeture en fonction de votre style et ajouter des informations supplémentaires, telles que le nom et l’adresse de la société sous votre nom.
Étape 1. Charger le modèle par défaut
-
Dans 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 de Template et choisissez
Magento_Email>Footer. -
Cliquez sur Load Template.
Le code HTML et les variables du modèle apparaissent dans le formulaire.
Étape 2. Personnalisation et prévisualisation du modèle
-
Saisissez le Template Name de votre pied de page personnalisé.
-
Saisissez un Template Subject pour vous aider à organiser les modèles.
Dans la grille, les modèles peuvent être triés et filtrés selon la colonne Subject.
{width="600" modal="regular"}
-
Dans la zone de Template Content, modifiez l’HTML selon vos besoins.
note NOTE Lorsque vous travaillez dans le code de modèle, veillez à ne pas remplacer tout ce qui est placé entre doubles 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 est insérée dans le code.
Bien que les variables Contact de magasin soient celles qui sont le plus souvent incluses dans le pied de page, vous pouvez saisir le code de n’importe quelle variable 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 de Template Styles.
Étape 3. Mise à jour de la configuration
-
Dans la barre latérale Admin, accédez à Content > Design>Configuration.
-
Dans la grille, recherchez la vue de magasin que vous souhaitez configurer, puis cliquez sur Edit dans la colonne Action.
-
Faites défiler vers le bas et développez
la section Transactional Emails .
-
Choisissez le Footer Template utilisé comme pied de page par défaut dans les notifications par e-mail.
-
Cliquez ensuite sur Save Config.
Modèles de message
Le processus de personnalisation du corps de chaque message est le même que pour la personnalisation 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 en fonction de votre voix et de votre marque. Outre le texte du modèle, il existe une large sélection de variables autorisées prédéfinies et personnalisées que vous pouvez créer et incorporer dans le modèle.
Étape 1. Charger le modèle par défaut
-
Dans 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, choisissez les Template à personnaliser.
-
Cliquez sur Load Template.
-
Étape 2. Personnaliser le modèle
-
Par Template Name, saisissez un nom pour votre modèle personnalisé.
-
Si nécessaire, modifiez la Template Subject.
Il s’agit de la première ligne du message, qui est la salutation par défaut. Vous pouvez le laisser tel quel ou saisir quelque chose de plus explicite.
-
Notez le 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 de Template Content, modifiez l’HTML selon vos besoins.
Le contenu se compose d’une combinaison de balises HTML, de directives CSS, de variables et de texte.
note NOTE Lorsque vous travaillez dans le code de modèle, veillez à ne pas taper accidentellement le code placé entre doubles accolades. -
Pour insérer une variable, placez le curseur dans le code à l’endroit où vous souhaitez que la variable apparaisse.
La sélection des variables varie selon le modèle et inclut des variables autorisées prédéfinies et personnalisé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 Les styles personnalisés ne sont appliqués à l’e-mail que si {{template config_path="design/email/header_template"}}est présent dans le 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 HTML<style>.
Étape 3. Mise à jour de la configuration
Le chemin de navigation Currently Used Forindique où le modèle est utilisé. Dans cet exemple, la configuration du modèle se trouve sur la pageCustomer Configuration, dans la section Create New Account Optionset dans le champDefault Welcome Email .
- Page - Customer Configuration
- Section - Create New Account Options
- Champ - 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, puis recherchez le champ du modèle d’e-mail que vous avez personnalisé.
-
Décochez la case Use system value , puis cliquez sur le nom de votre modèle personnalisé.
{width="600" modal="regular"}
-
Cliquez ensuite 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 à jour le modèle si nécessaire.
-
Cliquez ensuite sur Save Template.
Votre modèle personnalisé est désormais disponible dans la liste des modèles d’e-mail.