Gestion des Templates de Mails
Cette page documente le travail de refonte des templates d’emails pour le site signaletique-inox.fr. Ces modèles couvrent une variété de situations, offrant une communication claire, professionnelle et cohérente avec l'identité visuelle de la boutique.
Objectifs de la refonte
Amélioration de la clarté :
Revoir la structure et le contenu pour garantir une compréhension rapide par les clients.
Utilisation d’un ton formel mais chaleureux.
Cohérence visuelle :
Uniformisation des couleurs, polices et mise en page pour refléter l’identité graphique du site.
Ajout du logo et d'éléments visuels de la marque.
Optimisation responsive :
Garantir une lecture agréable sur tous les appareils, y compris les smartphones et tablettes.
Adaptation à différentes situations :
Création ou mise à jour des templates pour des scénarios variés, assurant que chaque étape du parcours client est couverte.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Confirmation de commande - {shop_name}</title>
</head>
<body
style="font-family: 'Open Sans', sans-serif; color: #555454; background-color: #f9f9f9; margin: 0; padding: 0; width: 100%;">
<table role="presentation"
style="max-width: 1000px; margin: auto; background-color: #ffffff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 8px; width: 100%;">
<!-- En-tête avec logo et bannière -->
<tr>
<td style="padding: 20px; text-align: center;">
<img src="https://signaletique-inox.fr/themes/default-bootstrap/img/logo.png" alt="{shop_name} Logo"
width="250" height="auto" style="display: block; margin: 0 auto;">
</td>
</tr>
<tr>
<td style="height: 20px;"> </td> <!-- Espace de 20px entre les images -->
</tr>
<tr>
<td style="text-align: center;">
<img src="https://signaletique-inox.fr/img/cms/banniere-top.jpg" alt="Bannière" width="600"
height="auto" style="display: block; margin: 0 auto;">
</td>
</tr>
<!-- Contenu principal -->
<tr>
<td style="padding: 30px; color: #555454;">
<p style="font-size: 24px; color: #283d4e; font-weight: bold; margin-top: 10px; text-align: center;">
Bonjour {firstname} {lastname},</p>
<p style="font-size: 16px; color: #777; margin-bottom: 20px; text-align: center;">Merci d'avoir effectué
vos achats sur {shop_name}!</p>
<br>
<strong style="color: #283d4e;">COMMANDE {order_name} - EN ATTENTE DE PAIEMENT </strong>
<p>Nous avons bien enregistré votre commande ayant pour référence <strong style="color: #283d4e;">{order_name}</strong>. Celle-ci vous sera <strong style="color: #283d4e;">envoyée dès réception de votre paiement</strong>.</p>
<br>
<strong style="color: #283d4e;">POUR RAPPEL, VOUS AVEZ SÉLECTIONNÉ LE MODE DE PAIEMENT PAR VIREMENT BANCAIRE.</strong>
<p>Voici les informations dont vous avez besoin pour effectuer ce virement :</p>
<p><strong style="color: #283d4e;">Montant :</strong> {total_paid}</p>
<p><strong style="color: #283d4e;">Titulaire du compte :</strong> {bankwire_owner}</p>
<p><strong style="color: #283d4e;">Détails du compte :</strong> {bankwire_details}</p>
<p><strong style="color: #283d4e;">Adresse de la banque :</strong> {bankwire_address}</p>
<br>
<!-- Section d'assistance -->
<p style="font-size: 18px; color: #283d4e; font-weight: bold; text-align: center; margin-top: 20px;">
Besoin d'aide ?</p>
<p style="text-align: center;">Vous pouvez accéder à tout moment au suivi de votre commande et
télécharger votre facture dans <a style="color: #337ff1;" href="{history_url}">"Historique des
commandes"</a> de la rubrique <a style="color: #337ff1;" href="{my_account_url}">"Mon
compte"</a> sur notre site.</p>
<p style="text-align: center;">Si vous avez un compte invité, vous pouvez suivre votre commande dans la
section <a style="color: #337ff1;" href="{guest_tracking_url}?id_order={order_name}">"Suivi
invité"</a> de notre site.</p>
<p style="text-align: center;">N'hésitez pas à nous suivre sur les réseaux sociaux</p>
</td>
</tr>
<!-- Pied de page -->
<tr>
<td style="background-color: #283d4e; color: #ffffff; padding: 20px; text-align: center; font-size: 18px;">
<p><a href="{shop_url}" style="color: #ffffff; text-decoration: none;">{shop_name}</a></p>
</td>
</tr>
</table>
</body>
</html>Last updated