Wie E-Mail-Branding funktioniert
Alva rendert die Liefer-E-Mail aus einer einzigen Vorlage unter Verwendung des Brandings, das Sie in den E-Mail-Einstellungen konfigurieren. Ihr Logo, die Größe, die Akzentfarbe, die Schaltflächenfarbe und die Hintergrundfarbe werden beim Senden inline angewendet, sodass das Styling in Gmail, Outlook und Apple Mail korrekt dargestellt wird. Das Logo wird auf Shopify Files gehostet und per URL referenziert; Farben sind einfache Hex-Zeichenfolgen.
Branding einrichten
1. Logo hochladen
Gehen Sie im Alva-Adminbereich zu Einstellungen → E-Mail und scrollen Sie zum Abschnitt Logo. Klicken Sie auf Hochladen und wählen Sie eine quadratische PNG-Datei mit transparentem Hintergrund. Shopify Files hostet das Asset; Alva speichert die Logo-URL zur Verwendung in jeder Liefer-E-Mail in der von Ihnen gewählten Anzeigegröße (Standard 100 Px).
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.
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.
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 eine PNG-Datei mit transparentem Hintergrund — JPEGs stellen ein undurchsichtiges weißes Quadrat dar, das mit jeder Akzentfarbe kollidiert. Halten Sie die Quelle bei maximal 600 Px auf der langen Seite; die E-Mail zeigt sie in der von Ihnen eingestellten Logogröße an (Standard 100 Px), sodass größere Quellen nur die Nutzlast aufblähen.
Häufig gestellte Fragen
Kann ich für verschiedene Produkte unterschiedliches Branding verwenden?
Ja. Jedes Produkt kann sein eigenes produktspezifisches E-Mail-Branding haben, das das globale Logo und die Farben überschreibt. Stellen Sie es auf der Produktdetailseite unter E-Mail ein. Produkte ohne Überschreibung fallen auf die globalen E-Mail-Einstellungen 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