Come funziona il branding email
Alva renderizza l'email di consegna lato server da un singolo template che legge il record EmailSettings del tuo shop. Cinque campi di branding — emailLogoUrl, emailLogoSize, emailAccentColor, emailButtonColor e emailBackgroundColor — sono inseriti come CSS inline al momento dell'invio così lo styling sopravvive a Gmail, Outlook e Apple Mail. Il logo è ospitato su Shopify Files e referenziato per URL; i colori sono semplici stringhe esadecimali.
Configura il tuo branding
1. Carica il tuo logo
Nell'admin Alva vai a Impostazioni → Email e scorri fino alla sezione Logo. Clicca Carica e scegli un PNG quadrato con sfondo trasparente. Shopify Files ospita l'asset; Alva memorizza l'URL su emailLogoUrl e la dimensione di visualizzazione su emailLogoSize (default 100 px).
Impostazioni email → card Logo. Mostra il pulsante Carica, un logo quadrato segnaposto già caricato e lo slider di dimensione. Evidenzia il pulsante Carica. Nessun dato cliente reale visibile.
2. Imposta il colore d'accento
Nella sezione Stile, clicca lo swatch Colore d'accento e scegli un valore esadecimale. L'accento dipinge la fascia di intestazione che sta dietro al logo e i sottili divisori sotto le intestazioni di sezione. Usa qui il colore primario del tuo storefront — questo è il segnale di brand più forte nell'email.
3. Imposta il colore del pulsante e del titolo
Nella sezione Pulsante, scegli un Colore del pulsante per la call-to-action di download. Poi in Stile, imposta il Colore del titolo — è il colore del testo che sta sopra alla fascia d'accento, quindi deve contrastare con l'accento. Bianco su accento scuro o quasi-nero su accento chiaro sono i default sicuri.
Impostazioni email → sezioni Stile e Pulsante affiancate. Mostra tre selettori colore Polaris aperti (Accento, Pulsante, Titolo) con input esadecimali visibili. Evidenzia il selettore Accento. Nessun dato cliente reale visibile.
4. Controlla l'anteprima dal vivo
Il pannello di anteprima a destra si rirenderizza ad ogni modifica. Conferma che il logo abbia la dimensione giusta, che l'accento appaia come una fascia piuttosto che una striscia e che il pulsante risalti. L'anteprima usa lo stesso template che Alva spedisce al momento dell'invio.
5. Salva
Clicca Salva. Il branding si applica a ogni email di consegna inviata da quel momento in poi. Per verificare con una casella reale, invia un'email di test — vedi l'articolo correlato qui sotto.
Cosa vedono i clienti
L'email si apre con una fascia di intestazione colorata (il tuo accento) che contiene il logo e il titolo. Il testo del corpo poggia sullo sfondo della pagina. Il pulsante Download appare a metà email nel tuo colore del pulsante con testo bianco e l'arrotondamento che hai scelto. Le intestazioni di sezione hanno una sottile sottolineatura del colore d'accento che lega l'email alla fascia di intestazione.
Un'email di consegna renderizzata vista in Gmail desktop. Mostra la fascia di intestazione d'accento con logo e testo del titolo, il testo del corpo, il pulsante Download in un colore contrastante e un'intestazione di sezione con la sottolineatura d'accento. Usa un brand fittizio. Nessun dato cliente reale visibile.
Suggerimenti
Punta a un rapporto di contrasto di almeno 4.5:1 tra il colore del titolo e l'accento (e tra il testo del pulsante e il colore del pulsante). I checker WCAG gratuiti segnalano valori sotto questa soglia; il pulsante di default #4a6cf7 con testo bianco la supera.
Usa un PNG con sfondo trasparente — i JPEG renderizzano un quadrato bianco opaco che combatte con ogni colore d'accento. Mantieni la sorgente a 600 px o meno sul lato lungo; l'email lo mostra a emailLogoSize pixel (default 100), quindi sorgenti più grandi gonfiano solo il payload.
Domande frequenti
Posso usare branding diversi per prodotti diversi?
Sì. Ogni prodotto può portare il proprio record ProductEmailSettings che sovrascrive logo e colori globali. Impostali nella pagina di dettaglio del prodotto sotto Email. I prodotti senza override ricadono sull'EmailSettings globale.
Cosa succede se l'URL del mio logo smette di funzionare?
Alva inserisce il logo come tag immagine remota, quindi un URL rotto mostra uno spazio vuoto (la maggior parte dei client mostra il testo alt). Ricarica il logo dalla pagina Impostazioni email per aggiornare l'URL. L'asset è ospitato su Shopify Files; eliminarlo lì romperà l'email.
Perché il colore del mio pulsante appare strano in Outlook?
Outlook su Windows rirenderizza il CSS inline tramite Word, che limita alcuni valori esadecimali alla sua palette di 16 colori e rimuove il border-radius. Il pulsante funziona ancora — appare solo più rettangolare. Invia un'anteprima a una casella Outlook prima del lancio.
Vedi anche
È stato utile?
Last updated 2026-05-06