Hoe e-mailbranding werkt
Alva rendert de bezorgingsmail vanuit één sjabloon met de huisstijl die je configureert in E-mailinstellingen. Je logo, grootte, accentkleur, knopkleur en achtergrondkleur worden inline toegepast bij verzending, zodat de opmaak correct wordt weergegeven in Gmail, Outlook en Apple Mail. Het logo wordt gehost op Shopify Files en via URL opgeroepen; kleuren zijn gewone hex-strings.
Stel je branding in
1. Upload je logo
Ga in het Alva-beheerpaneel naar Instellingen → E-mail en scroll naar het gedeelte Logo. Klik op Uploaden en kies een vierkante PNG met een transparante achtergrond. Shopify Files host het bestand; Alva slaat de logo-URL op voor gebruik in elke bezorgingsmail, op de weergavegrootte die je kiest (standaard 100 px).
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.
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.
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 renderen een ondoorzichtig wit vierkant dat conflicteert met elke accentkleur. Houd de bron op of onder 600 px aan de lange zijde; de e-mail toont het op de logo-grootte die je hebt ingesteld (standaard 100 px), dus grotere bronnen vergroten alleen de bestandsgrootte.
Veelgestelde vragen
Kan ik per product een andere branding gebruiken?
Ja. Elk product kan zijn eigen huisstijl per product hebben die het globale logo en de globale kleuren overschrijft. Stel dit in op de productdetailpagina onder E-mail. Producten zonder een eigen instelling vallen terug op de globale e-mailinstellingen.
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