Hoe e-mailbranding werkt
Alva rendert de bezorgmail server-side vanuit één template dat het EmailSettings-record van je shop uitleest. Vijf brandingvelden — emailLogoUrl, emailLogoSize, emailAccentColor, emailButtonColor en emailBackgroundColor — worden bij verzending inline als CSS toegevoegd, zodat de styling Gmail, Outlook en Apple Mail overleeft. Het logo staat op Shopify Files en wordt via URL gerefereerd; kleuren zijn gewone hex-strings.
Stel je branding in
1. Upload je logo
Ga in de Alva-admin naar Instellingen → E-mail en scrol naar de sectie Logo. Klik op Uploaden en kies een vierkante PNG met een transparante achtergrond. Shopify Files host de asset; Alva slaat de URL op in emailLogoUrl en de weergavegrootte in emailLogoSize (standaard 100 px).
E-mailinstellingen → Logo-kaart. Toon de knop Uploaden, een placeholder-vierkant logo dat al is geüpload en de schuifregelaar voor de grootte. Markeer de knop Uploaden. Geen echte klantgegevens zichtbaar.
2. Stel de accentkleur in
Klik in de sectie Stijl op het kleurvlak Accentkleur en kies een hex-waarde. Het accent kleurt de headerband achter het logo en de dunne scheidingslijnen onder sectiekoppen. Gebruik hier de primaire kleur van je storefront — dit is het sterkste merksignaal in de mail.
3. Stel de kleuren van de knop en de titel in
Kies in de sectie Knop een Knopkleur voor de Download-CTA. Stel daarna in Stijl de Titelkleur in — dat is de tekstkleur op de accentband, dus die moet contrasteren met het accent. Wit op een donker accent of bijna zwart op een licht accent zijn veilige standaardwaarden.
E-mailinstellingen → secties Stijl en Knop naast elkaar. Toon drie geopende Polaris-kleurkiezers (Accent, Knop, Titel) met zichtbare hex-velden. Markeer de Accent-kiezer. Geen echte klantgegevens zichtbaar.
4. Bekijk het live voorbeeld
Het voorbeeldpaneel rechts rendert bij elke wijziging opnieuw. Controleer of het logo de juiste grootte heeft, het accent als band en niet als streep oogt, en de knop opvalt. Het voorbeeld gebruikt dezelfde template die Alva bij verzending gebruikt.
5. Opslaan
Klik op Opslaan. De branding geldt voor elke bezorgmail die daarna wordt verstuurd. Om het tegen een echte inbox te verifiëren, stuur je een testmail — zie het gerelateerde artikel hieronder.
Wat klanten zien
De mail opent met een gekleurde headerband (jouw accent) met het logo en de titel. De hoofdtekst staat op de paginaachtergrond. De Download-knop verschijnt halverwege de mail in jouw knopkleur met witte labeltekst en de afronding die je hebt gekozen. Sectiekoppen hebben een dunne onderstreping in de accentkleur die de mail verbindt met de headerband.
Een gerenderde bezorgmail in Gmail-desktop. Toon de accentheaderband met logo en titeltekst, de hoofdtekst, de Download-knop in een contrasterende kleur en een sectiekop met de accentonderstreping. Gebruik een fictief merk. Geen echte klantgegevens zichtbaar.
Tips
Mik op een contrastverhouding van minimaal 4,5:1 tussen de titelkleur en het accent (en tussen knoplabel en knopkleur). Gratis WCAG-checkers geven waarden onder die drempel als waarschuwing; de standaardknop #4a6cf7 met een wit label haalt die ruimschoots.
Gebruik een PNG met een transparante achtergrond — JPEG's geven een dichte witte vlek die elke accentkleur verstoort. Houd het bronbestand op of onder 600 px op de lange zijde; de mail toont het op emailLogoSize pixels (standaard 100), dus grotere bronnen blazen de payload alleen op.
Veelgestelde vragen
Kan ik per product een andere branding gebruiken?
Ja. Elk product kan een eigen ProductEmailSettings-record hebben dat het globale logo en de kleuren overrult. Stel ze in op de productdetailpagina onder E-mail. Producten zonder override vallen terug op de globale EmailSettings.
Wat gebeurt er als mijn logo-URL niet meer werkt?
Alva voegt het logo inline toe als een remote image-tag, dus een kapotte URL toont een lege plek (de meeste mailclients laten de alt-tekst zien). Upload het logo opnieuw via de pagina E-mailinstellingen om de URL te verversen. De asset staat op Shopify Files; daar verwijderen breekt de mail.
Waarom ziet mijn knopkleur er anders uit in Outlook?
Outlook op Windows rendert inline CSS via Word, dat sommige hex-waarden vastpint op zijn 16-kleurenpalet en border-radius verwijdert. De knop werkt nog — hij oogt alleen rechthoekiger. Stuur een voorbeeld naar een Outlook-inbox vóór de livegang.
Zie ook
Was dit nuttig?
Laatst bijgewerkt 2026-05-06