DocumentationCommerceGuide des systèmes d’administration

Personnalisation des modèles de courrier électronique

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • Débutant
  • Intermédiaire
  • Administration
  • Leader

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 et widgets. 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é.

Exemple - aperçu de l’email de bienvenue

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.

Modèles d’email

Informations sur les modèles

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. Il peut être utilisé pour trier et filtrer les modèles de la liste.
Template Content
Contenu du modèle en HTML.
Template Styles
Toutes les déclarations de style CSS nécessaires au format du modèle peuvent être saisies dans la zone Template Styles.

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

  1. Sur 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 Template et choisissez Magento_Email > Header.

    En-tête du modèle de courrier électronique - Charger le modèle par défaut {width="600" modal="regular"}

  4. Cliquez sur Load Template.

    Le code d’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 organiser les modèles.

    Dans la grille, la liste des modèles peut être triée et filtrée par la colonne Subject.

    Informations sur l’en-tête du modèle de courrier électronique {width="600" modal="regular"}

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

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

  6. Si vous devez faire des déclarations CSS, saisissez les styles dans la zone 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. 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

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

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

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

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

  5. Une fois l’opération terminée, cliquez sur Save Config.

Configuration de la conception d’email transactionnel - modèle d’en-tête

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

  1. Sur 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 Template et choisissez Magento_Email > Footer.

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

  1. Saisissez le Template Name correspondant au pied de page personnalisé.

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

    Pied de page de modèle de courrier électronique - informations {width="600" modal="regular"}

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

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

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

Étape 3. Mise à jour de la configuration

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

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

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

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

  5. Une fois l’opération terminée, cliquez sur Save Config.

Configuration de la conception d’email transactionnel - modèle de pied de page

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

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

  2. Cliquez sur Add New Template.

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

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

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

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

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

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

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

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

  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’email - ajouter des styles personnalisés {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

  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’email actuel {width="600" modal="regular"}

  2. Développez la section Sélecteur d’extension et recherchez le champ du modèle de courrier électronique que vous avez personnalisé.

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

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

  4. Une fois l’opération terminée, cliquez 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 le modèle à jour selon vos besoins.

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

recommendation-more-help
d3c62084-5181-43fb-bba6-1feb2fcc3ec1