Wie E-Mail-Branding funktioniert
Alva rendert die Liefer-E-Mail serverseitig aus einer einzigen Vorlage, die den EmailSettings-Datensatz Ihres Shops liest. Fünf Branding-Felder — emailLogoUrl, emailLogoSize, emailAccentColor, emailButtonColor und emailBackgroundColor — werden zur Sendezeit als CSS inline eingebettet, sodass das Styling Gmail, Outlook und Apple Mail übersteht. Das Logo wird auf Shopify Files gehostet und per URL referenziert; Farben sind einfache Hex-Strings.
Branding einrichten
1. Logo hochladen
Wechseln Sie im Alva-Admin zu Einstellungen → E-Mail und scrollen Sie zum Abschnitt Logo. Klicken Sie auf Hochladen und wählen Sie ein quadratisches PNG mit transparentem Hintergrund. Shopify Files hostet das Asset; Alva speichert die URL in emailLogoUrl und die Anzeigegröße in emailLogoSize (Standard 100 px).
E-Mail-Einstellungen → Logo-Karte. Zeigen Sie die Schaltfläche Hochladen, ein bereits hochgeladenes Platzhalter-Quadrat-Logo und den Größen-Schieberegler. Heben Sie die Schaltfläche Hochladen hervor. Keine echten Kundendaten sichtbar.
2. Akzentfarbe festlegen
Klicken Sie im Abschnitt Stil auf das Feld Akzentfarbe und wählen Sie einen Hex-Wert. Der Akzent färbt das Header-Band hinter dem Logo und die dünnen Trennlinien unter den Abschnitts-Überschriften. Verwenden Sie hier die Hauptfarbe Ihres Storefronts — das ist das stärkste Brand-Signal in der E-Mail.
3. Schaltflächen- und Titelfarben festlegen
Wählen Sie im Abschnitt Schaltfläche eine Schaltflächenfarbe für den Download-Call-to-Action. Legen Sie dann unter Stil die Titelfarbe fest — das ist die Textfarbe, die auf dem Akzent-Band sitzt, sie muss also mit dem Akzent kontrastieren. Weiß auf einem dunklen Akzent oder fast Schwarz auf einem hellen Akzent sind die sicheren Standardwerte.
E-Mail-Einstellungen → Abschnitte Stil und Schaltfläche nebeneinander. Zeigen Sie drei geöffnete Polaris-Farbwähler (Akzent, Schaltfläche, Titel) mit sichtbaren Hex-Eingaben. Heben Sie den Akzent-Farbwähler hervor. Keine echten Kundendaten sichtbar.
4. Live-Vorschau prüfen
Der Vorschaubereich rechts rendert bei jeder Änderung neu. Bestätigen Sie, dass das Logo die richtige Größe hat, der Akzent als Band statt Streifen liest und die Schaltfläche hervorsticht. Die Vorschau verwendet dieselbe Vorlage, die Alva zur Sendezeit ausliefert.
5. Speichern
Klicken Sie auf Speichern. Das Branding gilt für jede Liefer-E-Mail, die danach gesendet wird. Um es gegen einen echten Posteingang zu verifizieren, senden Sie eine Test-E-Mail — siehe den verwandten Artikel unten.
Was Kunden sehen
Die E-Mail öffnet mit einem farbigen Header-Band (Ihr Akzent), das Logo und Titel enthält. Der Textinhalt sitzt auf dem Seitenhintergrund. Die Download-Schaltfläche erscheint in der Mitte der E-Mail in Ihrer Schaltflächenfarbe mit weißem Beschriftungstext und der gewählten Rundung. Abschnitts-Überschriften tragen eine dünne, akzentfarbige Unterstreichung, die die E-Mail an das Header-Band zurückbindet.
Eine gerenderte Liefer-E-Mail, in Gmail Desktop angezeigt. Zeigen Sie das Akzent-Header-Band mit Logo und Titeltext, den Textinhalt, die Download-Schaltfläche in einer kontrastierenden Farbe und eine Abschnitts-Überschrift mit der Akzent-Unterstreichung. Verwenden Sie eine fiktive Marke. Keine echten Kundendaten sichtbar.
Tipps
Streben Sie ein Kontrastverhältnis von mindestens 4,5:1 zwischen Titelfarbe und Akzent (sowie zwischen Schaltflächenbeschriftung und Schaltflächenfarbe) an. Kostenlose WCAG-Prüfer markieren Werte unterhalb dieser Schwelle; die Standard-#4a6cf7-Schaltfläche mit weißer Beschriftung erfüllt sie.
Verwenden Sie ein PNG mit transparentem Hintergrund — JPEGs rendern ein deckendes weißes Quadrat, das mit jeder Akzentfarbe konkurriert. Halten Sie die Quelle bei oder unter 600 px auf der langen Kante; die E-Mail zeigt sie in emailLogoSize Pixeln (Standard 100), größere Quellen blähen also nur die Nutzlast auf.
Häufig gestellte Fragen
Kann ich für verschiedene Produkte unterschiedliches Branding verwenden?
Ja. Jedes Produkt kann seinen eigenen ProductEmailSettings-Datensatz tragen, der das globale Logo und die Farben überschreibt. Stellen Sie diese auf der Produktdetailseite unter E-Mail ein. Produkte ohne Override fallen auf die globalen EmailSettings zurück.
Was passiert, wenn meine Logo-URL nicht mehr funktioniert?
Alva bettet das Logo als Remote-Image-Tag inline ein, sodass eine defekte URL einen leeren Bereich anzeigt (die meisten Clients zeigen den Alt-Text). Laden Sie das Logo erneut von der Seite E-Mail-Einstellungen hoch, um die URL zu aktualisieren. Das Asset ist auf Shopify Files gehostet; ein Löschen dort macht die E-Mail kaputt.
Warum sieht meine Schaltflächenfarbe in Outlook seltsam aus?
Outlook unter Windows rendert Inline-CSS über Word neu, was einige Hex-Werte auf seine 16-Farben-Palette beschränkt und border-radius entfernt. Die Schaltfläche funktioniert weiterhin — sie sieht nur rechteckiger aus. Senden Sie vor dem Launch eine Vorschau an einen Outlook-Posteingang.
Siehe auch
War das hilfreich?
Zuletzt aktualisiert 2026-05-06