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.

Exemple - Aperçu de l’e-mail de bienvenue {width="500" modal="regular"}

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.

Modèles d’e-mail {width="700" modal="regular"}

Informations sur le modèle

Champ
Description
Template Name
Nom de votre modèle personnalisé.
Insert Variable
Insère une variable dans le modèle à l’emplacement du curseur.
Template Subject
L’Objet du modèle apparaît dans la colonne Objet et peut être utilisé pour trier et filtrer les modèles dans la liste.
Template Content
Contenu du modèle dans HTML.
Template Styles
Toutes les déclarations de style CSS nécessaires pour formater le modèle peuvent être saisies dans la zone de Template Styles.

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

  1. Dans la barre latérale Admin, accédez à Marketing > Communications>Email Templates.

  2. Cliquez sur Add New Template.

  3. Dans la section Load default template, cliquez sur le sélecteur de Template et choisissez Magento_Email > Header.

    En-tête du modèle d’e-mail - Charger le modèle par défaut {width="600" modal="regular"}

  4. Cliquez sur Load Template.

    Le code HTML et les variables du modèle apparaissent dans le formulaire.

Étape 2. Personnaliser le modèle

  1. Saisissez le Template Name de votre en-tête personnalisé.

  2. 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.

    Informations sur l’en-tête du modèle d’e-mail {width="600" modal="regular"}

  3. 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.
  4. Pour insérer une variable, placez le curseur dans le code à l’endroit où vous souhaitez placer la variable et cliquez sur Insert Variable.

  5. Sélectionnez la variable à insérer.

    Modèle d’en-tête - Insérer une variable {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.

  6. Si vous devez faire des déclarations CSS, saisissez les styles dans la zone de Template Styles.

  7. Lorsque vous êtes prêt à passer en revue votre travail, cliquez sur Preview Template.

    Apportez les modifications nécessaires au modèle.

  8. 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

  1. Dans la barre latérale Admin, accédez à Content > Design>Configuration.

  2. Dans la grille, recherchez la vue de magasin que vous souhaitez configurer, puis cliquez sur Edit dans la colonne Action.

  3. Faites défiler vers le bas et développez Sélecteur d’extension la section Transactional Emails .

  4. Choisissez le Header Template utilisé par défaut pour les notifications par e-mail.

  5. Cliquez ensuite sur Save Config.

Configuration de la conception d’un e-mail transactionnel - modèle d’en-tête {width="600" modal="regular"}

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

  1. Dans la barre latérale Admin, accédez à Marketing > Communications>Email Templates.

  2. Cliquez sur Add New Template.

  3. Dans la section Load default template, cliquez sur le sélecteur de Template et choisissez Magento_Email > Footer.

  4. 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

  1. Saisissez le Template Name de votre pied de page personnalisé.

  2. 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.

    Pied de page du modèle d’e-mail - informations {width="600" modal="regular"}

  3. 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.
  4. Pour insérer une variable, placez le curseur dans le code à l’endroit où vous souhaitez placer la variable et cliquez sur Insert Variable.

  5. 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.

  6. Si vous devez faire des déclarations CSS, saisissez les styles dans la zone de Template Styles.

Étape 3. Mise à jour de la configuration

  1. Dans la barre latérale Admin, accédez à Content > Design>Configuration.

  2. Dans la grille, recherchez la vue de magasin que vous souhaitez configurer, puis cliquez sur Edit dans la colonne Action.

  3. Faites défiler vers le bas et développez Sélecteur d’extension la section Transactional Emails .

  4. Choisissez le Footer Template utilisé comme pied de page par défaut dans les notifications par e-mail.

  5. Cliquez ensuite sur Save Config.

Configuration de la conception d’un e-mail transactionnel - modèle de pied de page {width="600" modal="regular"}

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

  1. Dans la barre latérale Admin, accédez à Marketing > Communications>Email Templates.

  2. Cliquez sur Add New Template.

    Modèles d’e-mail - Charger le modèle par défaut {width="600" modal="regular"}

  3. Procédez comme suit :

    • Sous Load default template, choisissez les Template à personnaliser.

    • Cliquez sur Load Template.

Étape 2. Personnaliser le modèle

  1. Par Template Name, saisissez un nom pour votre modèle personnalisé.

  2. 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.

  3. 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.

    Modèles d’e-mail - informations sur le modèle {width="600" modal="regular"}

  4. 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.
  5. 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.

  6. 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

  7. Pour effectuer des déclarations CSS, saisissez les styles dans Template Styles.

    Modèles d’e-mail - Ajout de styles personnalisés {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 For​indique où le modèle est utilisé. 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
  • Champ - Default Welcome Email
  1. Dans le chemin de navigation Currently Used For, cliquez sur le lien pour ouvrir la page de configuration du modèle.

    Modèle d’e-mail actuel {width="600" modal="regular"}

  2. Développez Sélecteur de développement la section, puis recherchez le champ du modèle d’e-mail que vous avez personnalisé.

  3. Décochez la case Use system value , puis cliquez sur le nom de votre modèle personnalisé.

    Configuration des clients - modèle d’e-mail de bienvenue par défaut {width="600" modal="regular"}

  4. Cliquez ensuite sur Save Config.

  5. 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

  1. Lorsque vous êtes prêt à passer en revue votre travail, cliquez sur Preview Template.

  2. Mettez à jour le modèle si nécessaire.

  3. Cliquez ensuite sur Save Template.

    Votre modèle personnalisé est désormais disponible dans la liste des modèles d’e-mail.

recommendation-more-help
commerce-admin-help-systems