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

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

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

  3. Optimisation responsive :

    • Garantir une lecture agréable sur tous les appareils, y compris les smartphones et tablettes.

  4. 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;">&nbsp;</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>
PreviousNotification de Retard de CommandeNextRelance Devis

Last updated