Comment fonctionne la personnalisation des e-mails
Alva génère l'e-mail de livraison à partir d'un modèle unique en appliquant l'identité visuelle que vous configurez dans les paramètres d'e-mail. Votre logo, sa taille, la couleur d'accentuation, la couleur du bouton et la couleur d'arrière-plan sont appliqués en ligne au moment de l'envoi, afin que le rendu soit correct dans Gmail, Outlook et Apple Mail. Le logo est hébergé sur Shopify Files et référencé par URL ; les couleurs sont de simples valeurs hexadécimales.
Configurez votre image de marque
1. Téléversez votre logo
Dans l'interface d'administration Alva, accédez à Paramètres → E-mail et faites défiler jusqu'à la section Logo. Cliquez sur Téléverser et choisissez un PNG carré avec un arrière-plan transparent. Shopify Files héberge le fichier ; Alva enregistre l'URL du logo pour l'utiliser dans chaque e-mail de livraison, à la taille d'affichage que vous choisissez (100 px par défaut).
2. Définissez la couleur d'accent
Dans la section Style, cliquez sur le sélecteur Couleur d'accent et choisissez une valeur hexadécimale. La couleur d'accent peint la bande d'en-tête derrière le logo et les fins séparateurs sous les titres de section. Utilisez ici la couleur principale de votre vitrine — c'est le signal de marque le plus fort dans l'e-mail.
3. Définissez les couleurs du bouton et du titre
Dans la section Bouton, choisissez une Couleur du bouton pour l'appel à l'action Télécharger. Puis, dans Style, définissez la Couleur du titre — c'est la couleur du texte qui se trouve sur la bande d'accent, elle doit donc contraster avec celle-ci. Du blanc sur un accent foncé ou un noir presque pur sur un accent pâle sont les valeurs sûres.
4. Vérifiez l'aperçu en direct
Le panneau d'aperçu à droite se régénère à chaque modification. Vérifiez que le logo a la bonne taille, que l'accent forme une bande et non une simple ligne, et que le bouton ressort. L'aperçu utilise le même modèle qu'Alva utilise lors de l'envoi.
5. Enregistrez
Cliquez sur Enregistrer. La personnalisation s'applique à chaque e-mail de livraison envoyé ensuite. Pour vérifier dans une vraie boîte de réception, envoyez un e-mail de test — voir l'article connexe ci-dessous.
Ce que voient les clients
L'e-mail s'ouvre avec une bande d'en-tête colorée (votre accent) contenant le logo et le titre. Le contenu se trouve sur l'arrière-plan de la page. Le bouton Télécharger apparaît au milieu de l'e-mail, dans votre couleur de bouton avec un texte d'étiquette blanc et l'arrondi que vous avez choisi. Les titres de section portent un fin soulignement de la couleur d'accent qui rappelle la bande d'en-tête.
Conseils
Visez un ratio de contraste d'au moins 4,5:1 entre la couleur du titre et l'accent (et entre l'étiquette du bouton et la couleur du bouton). Les vérificateurs WCAG gratuits signalent les valeurs en dessous de ce seuil ; le bouton #4a6cf7 par défaut avec une étiquette blanche le respecte.
Utilisez un PNG avec un arrière-plan transparent — les JPEG génèrent un carré blanc opaque qui entre en conflit avec toutes les couleurs d'accentuation. Conservez une source de 600 px maximum sur le grand côté ; l'e-mail l'affiche à la taille de logo que vous avez définie (100 px par défaut), les sources plus grandes ne faisant qu'alourdir le message.
Questions fréquentes
Puis-je utiliser une personnalisation différente selon les produits ?
Oui. Chaque produit peut disposer de sa propre identité visuelle d'e-mail par produit, qui remplace le logo et les couleurs globaux. Configurez-la sur la page de détail du produit sous E-mail. Les produits sans personnalisation utilisent les paramètres d'e-mail globaux.
Que se passe-t-il si l'URL de mon logo cesse de fonctionner ?
Alva intègre le logo en tant que balise d'image distante : une URL cassée affiche donc un espace vide (la plupart des clients affichent le texte alternatif). Téléversez à nouveau le logo depuis la page Paramètres e-mail pour rafraîchir l'URL. L'asset est hébergé sur Shopify Files ; sa suppression cassera l'e-mail.
Pourquoi la couleur de mon bouton paraît-elle incorrecte dans Outlook ?
Outlook sous Windows régénère le CSS inline via Word, qui ramène certaines valeurs hexadécimales à sa palette de 16 couleurs et supprime border-radius. Le bouton fonctionne toujours — il a juste un aspect plus rectangulaire. Envoyez un aperçu vers une boîte Outlook avant le lancement.
Voir aussi
Cet article vous a-t-il été utile ?
Dernière mise à jour 2026-05-06