Comment fonctionne la personnalisation des e-mails
Alva génère l'e-mail de livraison côté serveur à partir d'un modèle unique qui lit l'enregistrement EmailSettings de votre boutique. Cinq champs de personnalisation — emailLogoUrl, emailLogoSize, emailAccentColor, emailButtonColor et emailBackgroundColor — sont intégrés en CSS au moment de l'envoi, ce qui permet au style d'être préservé 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 chaînes hexadécimales.
Configurez votre image de marque
1. Téléversez votre logo
Dans l'admin Alva, allez dans Paramètres → E-mail et faites défiler jusqu'à la section Logo. Cliquez sur Téléverser et choisissez un PNG carré avec un fond transparent. Shopify Files héberge l'asset ; Alva enregistre l'URL dans emailLogoUrl et la taille d'affichage dans emailLogoSize (100 px par défaut).
Paramètres e-mail → carte Logo. Afficher le bouton Téléverser, un logo carré factice déjà téléversé et le curseur de taille. Mettre en évidence le bouton Téléverser. Aucune donnée client réelle visible.
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.
Paramètres e-mail → sections Style et Bouton côte à côte. Afficher trois sélecteurs de couleurs Polaris ouverts (Accent, Bouton, Titre) avec les saisies hexadécimales visibles. Mettre en évidence le sélecteur Accent. Aucune donnée client réelle visible.
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.
What customers see
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.
Un e-mail de livraison rendu, vu dans Gmail Desktop. Afficher la bande d'en-tête d'accent avec le logo et le texte du titre, le contenu, le bouton Télécharger dans une couleur contrastée, et un titre de section avec le soulignement d'accent. Utiliser une marque fictive. Aucune donnée client réelle visible.
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 fond transparent — les JPEG affichent un carré blanc opaque qui entre en conflit avec toutes les couleurs d'accent. Gardez la source à 600 px ou moins sur le côté long ; l'e-mail l'affiche à emailLogoSize pixels (100 par défaut), donc des sources plus grandes ne font qu'alourdir le contenu.
Questions fréquentes
Puis-je utiliser une personnalisation différente selon les produits ?
Oui. Chaque produit peut avoir son propre enregistrement ProductEmailSettings qui remplace le logo et les couleurs globaux. Configurez-les sur la page de détail du produit, sous E-mail. Les produits sans surcharge utilisent les EmailSettings 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