Ce site est optimisé pour être consulté depuis un navigateur moderne dans lequel JavaScript est activé.

Difficulté à styliser les emails transactionnels

marionshop

Bonjour à tous,

Je rencontre pas mal de soucis pour personnaliser les modèles d'e-mails transactionnels sur mon PrestaShop. Je suis sur le thème Classic et j'essaie de changer le logo, les couleurs de fond de l'en-tête, et d'ajuster un peu le positionnement. Le problème principal est que chaque fois que je régénère les e-mails (par exemple, pour une nouvelle langue ou après une mise à jour), mes modifications sont écrasées.

De plus, j'ai tenté d'utiliser du display: flex pour centrer mon logo dans mails/themes/classic/fr/header.html.tpl, mais l'affichage est complètement cassé chez certains clients de messagerie, notamment Outlook.

Voici un extrait de ce que j'ai essayé de modifier :

<td align="center" style="padding:7px 0; border-bottom:1px solid #d6d4d4; background-color: #f8f8f8;">
    <div style="display: flex; justify-content: center; padding: 10px;">
        <a title="{shop_name}" href="{shop_url}">
            <img src="{shop_logo}" alt="{shop_name}" style="height: auto; max-height: 80px;"/>
        </a>
    </div>
</td>

Comment faire pour que mes personnalisations soient pérennes et pour que l'affichage soit correct partout ? Merci d'avance !

louis_panier52

Salut @marionshop,

Je connais bien ce problème de modifications écrasées. C'est classique quand on édite directement les fichiers du thème par défaut dans mails/themes/classic. PrestaShop est conçu pour que ces fichiers soient la base et puissent être régénérés.

Déjà, quelle version exacte de PrestaShop utilises-tu ? Ça peut influencer les options disponibles dans le BO. Pour éviter que tes changements ne soient écrasés, il faut passer par la création d'un thème d'e-mails personnalisé via le back-office, plutôt que de modifier le thème classic directement.

mathilde5949

Oui, @louis_panier52 a raison pour la pérennité des changements. Quant à ton souci d'affichage avec display: flex, c'est une galère bien connue avec les e-mails.

La plupart des clients de messagerie, surtout les plus anciens comme Outlook, ont un support CSS très limité et ne comprennent pas du tout les propriétés modernes comme flexbox ou grid. Il faut penser "old school" pour les e-mails : des tableaux HTML pour la mise en page et du CSS inline uniquement. C'est moche, mais c'est la seule façon d'avoir un rendu cohérent partout. Oublie le flex pour les e-mails transactionnels.

Milo

Bonjour @marionshop,

Vos deux problèmes sont très courants et ont des solutions distinctes mais complémentaires.

1. Pérenniser les modifications des e-mails :

Pour éviter que vos personnalisations ne soient écrasées lors des régénérations, vous devez utiliser la fonctionnalité de thèmes d'e-mails de PrestaShop. Allez dans Design > Thème d'e-mails dans votre back-office. Là, vous pouvez "Générer un nouveau thème" ou "Copier les thèmes manquants" à partir du thème Classic. Une fois votre nouveau thème d'e-mails créé (par exemple, mon_theme_email), toutes vos modifications devront être faites dans le dossier mails/themes/mon_theme_email/ et non plus directement dans mails/themes/classic/.

2. Corriger l'affichage du logo et des couleurs :

@mathilde5949 a tout à fait raison : display: flex est à proscrire dans les e-mails. Pour centrer votre logo et définir une couleur de fond, il faut revenir aux bases du HTML et du CSS inline. Voici la correction pour votre extrait de code dans header.html.tpl (à placer dans votre nouveau thème d'e-mails):

<td align="center" style="padding:7px 0; border-bottom:1px solid #d6d4d4; background-color: #f8f8f8; text-align: center;">
    <a title="{shop_name}" href="{shop_url}">
        <img src="{shop_logo}" alt="{shop_name}" style="height: auto; max-height: 80px; border:0; line-height:100%; outline:none; text-decoration:none;"/>
    </a>
</td>

Explication des changements :

J'ai supprimé la div qui contenait le display: flex. Ce type de propriété CSS est ignoré par de nombreux clients de messagerie.
J'ai ajouté text-align: center; directement sur la balise <td> parente. C'est la méthode la plus fiable pour centrer du contenu (comme une image) dans un tableau HTML dans un e-mail.
J'ai aussi ajouté quelques styles par défaut sur l'image (border:0; line-height:100%; outline:none; text-decoration:none;) pour éviter des bordures bleues ou des problèmes de hauteur d'image, surtout si l'image est un lien.

Avec ces deux approches, vos e-mails devraient être cohérents et vos modifications protégées.

marionshop

Un grand merci @Milo et aussi à @louis_panier52 et @mathilde5949 pour vos explications ! La solution de créer un thème d'e-mails personnalisé et d'utiliser text-align: center; directement sur la <td> est parfaite. J'ai appliqué les changements et l'affichage est maintenant correct partout, même dans Outlook. Et surtout, mes personnalisations ne sont plus écrasées ! C'est exactement ce qu'il me fallait.