Erstellen Sie ein E-Mail-Layout

Ein E-Mail-Layout umfasst die E-Mail selbst: die Betreffzeile, das Design und etwaige Anhänge. Die Aktion Shopify Flow wählt ein Layout und einen Absender aus und versendet die E-Mail anschließend. Da das Layout vom Workflow getrennt ist, kann ein einziges Design für alle Kunden verwendet werden, ohne dass Sie sich erneut mit HTML befassen müssen.

Die Liste verfügt über zwei Registerkarten: „Transaktional“ und „Marketing“, auf denen jeweils angezeigt wird, wie viele Layouts sie enthält. Sie wird standardmäßig auf der Registerkarte „Transaktional“ geöffnet, und jedes Layout, das Sie erstellt haben, bevor es E-Mail-Typen gab, ist transaktional. Ihre Such- und Sortiereinstellungen sowie die Seitenanzahl bleiben beim Wechseln zwischen den Registerkarten erhalten. Ein Marketing-Layout ist durch ein „Marketing“-Symbol neben dem Namen gekennzeichnet, und über die Schaltfläche „E-Mail-Layout erstellen“ auf der Registerkarte „Marketing“ wird das neue Layout als Marketing-Layout angelegt.

Ein Layout erstellen

Gehen Sie zu „E-Mail-Vorlagen“ und klicken Sie auf „E-Mail-Vorlage erstellen“. Dort legen Sie Folgendes fest:

• Name - so erkennen Sie ihn. Nur Sie können ihn sehen.
• Betreff - Support {{ variables.xxx }} und {{ secrets.xxx }}.
• Vorschautext - optional. Die kurze Zeile, die in den meisten Posteingängen neben der Betreffzeile angezeigt wird. Streben Sie eine Länge von 40 bis 100 Zeichen an; es unterstützt dieselben Variablen wie die Betreffzeile. Lassen Sie das Feld leer, wählt der E-Mail-Client stattdessen den ersten Textabschnitt Ihrer E-Mail aus.
• Beschreibung - optional, zu Ihrer eigenen Orientierung.
• E-Mail-Typ - Transaktions-E-Mails für Mitteilungen, die Kunden erwarten, wie beispielsweise Mitteilungen zu Bestellungen und zum Versand; diese werden stets versendet, auch an Kunden, die sich vom Marketing abgemeldet haben. Marketing - für Newsletter, Werbeaktionen und Rückgewinnungs-E-Mails; jeder Empfänger erhält eine eigene E-Mail mit einem Abmeldelink und Ihren Unternehmensdaten aus den Einstellungen, wobei Kunden, die sich abgemeldet haben, übersprungen werden. Im Gegensatz zum Editor kann der Typ später im Layout-Editor geändert werden. Details finden Sie unter Marketing-E-Mails und Abmeldungen.

Wählen Sie anschließend einen Editor aus:

Redakteur	Am besten geeignet für
Visueller Builder	Individuell gestaltete E-Mails mit Markenidentität, die aus Drag-and-Drop-Blöcken zusammengestellt werden
Rich Text / HTML	Einfache Transaktionsbenachrichtigungen oder eine vollständig individuell gestaltete HTML-E-Mail, die Sie einfügen

Der visuelle Builder

Der Builder besteht aus einem zweigeteilten Fenster: links befinden sich die Einstellungen, rechts eine Live-Vorschau auf der Arbeitsfläche. Fügen Sie Blöcke über die Schaltfläche „Abschnitt hinzufügen“ oder über die „+“-Symbole zwischen bereits vorhandenen Blöcken ein.

Der linke Bereich verfügt über vier Registerkarten:

Registerkarte	Was darin enthalten ist
Allgemeines	Name, Betreff, Vorschautext, Beschreibung
Markenbildung	Farben, Typografie und Abstände im Layout der gesamten E-Mail
Blöcke	Einstellungen für den Block, den Sie auf der Arbeitsfläche ausgewählt haben
Testvariablen	Der JSON-Ausschnitt Shopify Flow, die Referenz zu den Systemvariablen sowie Beispielwerte zur Vorschau

Jeder Block auf der Arbeitsfläche verfügt über Steuerelemente, mit denen Sie ihn verschieben, duplizieren, löschen oder ausblenden können, ohne ihn zu löschen.

Blockreferenz

Elemente

Block	Einstellungen
Text	Formatierter Text, Ausrichtung, Schriftgröße (12/14/16/18), Farbe
Überschrift	Überschriftentext, Größe (von „Extra groß“ (H1) bis „Klein“ (H4)), Ausrichtung, Farbe
Bild	Bild (Hochladen oder Link), Alternativtext, Breite 10-100 %, Ausrichtung
Schaltfläche	Bezeichnung, URL, Stil (Primär / Sekundär / Gliederung), Ausrichtung, Eckenradius 0-24 px
Trennzeichen	Farbe, Stil (durchgehend / gestrichelt / gepunktet), Strichstärke 1-8
Abstand	Höhe 4-80 px
Anhang	Dateiauswahl, ein Link oder ein Metafeld zur Bestellung oder zum Kunden des Schritts sowie ein Titel. Siehe Anhänge und Bilder
Schleife	Wiederholt einen Block aus Liquid und HTML über eine Array-Variable
HTML / Code	Roh-HTML mit Liquid, einschließlich {% if %}-Bedingungen
QR-Code	Daten (URL oder Text, unterstützt Variablen), Größe 80-300 px, Ausrichtung
Tabelle der Artikel	Die Artikel der Bestellung aus einer Listenvariablen, mit Zeilen für Bild, Menge, Preis und Gesamtbeträge

Handels- und Inhaltsblöcke (neu in Version 1.17; detaillierte Informationen zu den einzelnen Blöcken finden Sie unter Inhaltsblöcke: Produkt, Rabatt, Countdown, Sendungsverfolgung und mehr)

Block	Funktionsweise
Produkt	Eine Produktkarte: Bild, Titel, Beschreibung, Preis mit Vergleichspreis und eine Schaltfläche. Jedes Feld nimmt eine Variable entgegen.
Produktraster	Zwei oder drei Karten pro Zeile aus einer Listenvariablen, wie beispielsweise der Tabelle mit den Artikeln
Rabattcode	Ein Codefeld mit einer Schaltfläche, über die der Code am Checkout eingelöst wird. Entweder ein Code, den Sie selbst eingeben, oder ein einmalig verwendbarer Code, der in Ihrem Shop für jede E-Mail generiert wird.
Countdown	Ein Live-Countdown bis zu einem bestimmten Datum, der beim Öffnen der E-Mail als animiertes Bild angezeigt wird. Kästchen, Umblätterkarten, minimalistischer Stil oder Textstil
Sendungsverfolgung für Bestellungen	Beförderer, Sendungsnummer, eine Schaltfläche „Sendung verfolgen“ und ein Fortschrittsbalken, der sich entsprechend dem Sendungsstatus ändert
Sternebewertung	Sterne aus einer Zahl, mit einer Beschriftung und einem optionalen Link zu Ihrer Bewertungsseite
Kundenstimme	Ein Zitat mit Name, Funktion und Foto, als Karte, mit Akzentleiste oder schlicht
Soziale Netzwerke	Eine Reihe von Netzwerksymbolen
Video	Ein Vorschaubild mit einer Wiedergabetaste, die zum Video führt
Unterschrift	Name, Titel, Unternehmen, Telefonnummer, E-Mail-Adresse, Website und ein Foto
Tabelle	Eine kleine Datentabelle, in der jede Zelle eine Variable enthält
Im Browser anzeigen	Die übliche Zeile „Diese E-Mail im Browser anzeigen“
Preis	Eine Preiszeile für sich: der Preis, ein optionaler, durchgestrichener Vergleichspreis, Größe, Farbe und Ausrichtung

Layout

Block	Einstellungen
Bild + Text	Bildposition (links/rechts), Bildbreite 20-70 %, vertikale Ausrichtung, Abstand, Hintergrundfarbe sowie Unterkomponenten wie Bild, Text und Schaltfläche
Zwei Spalten	Spaltenaufteilung (50/50, 33/67, 67/33, 40/60, 60/40), Abstand 0-40, vertikale Ausrichtung, Abstandspuffer sowie getrennte Inhalte für die linke und rechte Spalte
Spalten	Zwei, drei oder vier gleich große Spalten, jede mit eigenen Blöcken
Anzeigen, wenn	Ein Abschnitt, der nur dann gesendet wird, wenn eine Bedingung bezüglich der Variablen wahr ist, zum Beispiel variables.total > 100 oder language == "de"

Markenbildung

Die Registerkarte „Branding“ gilt für das gesamte Layout:

• Farben - Primärfarben, Sekundärfarben, Textfarbe, Hintergrundfarbe des Hauptbereichs, Hintergrundfarbe des Inhalts
• Typografie - Schriftart für Überschriften, Schriftart für Fließtext, Zeilenhöhe
• Layout - die folgenden Steuerelemente für den Abstand

Steuerung	Was sich dadurch ändert	Reichweite
Maximale Breite	Wie umfangreich der Inhalt der E-Mail werden kann	400-800 px
Container-Polsterung	Abstand um den gesamten Inhaltsbereich herum	0-40 px
Blockpolsterung (Seiten)	Abstand zwischen Ihrem Inhalt und dem linken sowie dem rechten Rand	0-40 px
Blockabstand (oben und unten)	Abstand oberhalb und unterhalb des Inhalts jedes Blocks	0-40 px
Blockabstand	Vertikaler Abstand zwischen einem Block und dem nächsten	0-40 px

Halten Sie die Blockabstände (oben und unten) gering. Da die Blockaufteilung die Blöcke bereits voneinander trennt, entstehen bei einer Vergrößerung beider Werte große Lücken.

Wenn Sie unter „Einstellungen > Marke und Schriftarten“** Markenfarben** benannt haben, werden diese in allen Farbauswahlfeldern des Builders als Farbfelder unter dem Feld angezeigt; durch Anklicken eines Farbfeldes wird die entsprechende Farbe übernommen. Das Farbfeld der aktuell im Feld ausgewählten Farbe ist hervorgehoben. Siehe Einstellungen.

Das Schriftarten-Dropdown-Menü bietet Systemschriftarten (Arial, Georgia, Verdana, Times New Roman, Helvetica, Trebuchet MS), eine Auswahl an Google-Schriftarten (Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Raleway, Playfair Display, Merriweather, Source Sans 3, Oswald, Work Sans, DM Sans, Space Grotesk) sowie alle benutzerdefinierten Schriftarten, die Sie unter „Einstellungen > Marke und Schriftarten“ hochgeladen haben.

Kopf- und Fußzeile

Die Kopf- und Fußzeile sind anklickbare Bereiche am oberen und unteren Rand der Arbeitsfläche. Für jeden dieser Bereiche können Sie entweder eine gespeicherte Voreinstellung verwenden, sodass sich bei einer Änderung Ihres Markenauftritts alle Layouts gleichzeitig anpassen, oder die Option „Benutzerdefiniert“ (nur dieses Layout) für eine einmalige Anpassung wählen. Siehe Voreinstellungen für Kopf- und Fußzeilen.

Rich-Text-/HTML-Modus

In diesem Modus besteht der Textkörper aus einem einzigen Editor mit einer Umschaltfunktion für Rich Text/HTML und einer separaten Umschaltfunktion für die Vorschau.

• Mit „Rich Text“ steht Ihnen eine vertraute Formatierungsleiste zur Verfügung.
• HTML stellt Ihnen ein reines Textfeld zur Verfügung - fügen Sie eine fertig gestaltete E-Mail ein, falls Sie bereits eine haben.
• Mit „Bild einfügen“ fügen Sie ein gehostetes Bild hinzu, entweder aus Ihrer Medienbibliothek oder über einen Link.

Die Vorschau ist schreibgeschützt und zeigt Liquid-Tags unverändert an. Um die tatsächlichen Werte zu sehen, senden Sie bitte eine Test-E-Mail.

Anschluss an Shopify Flow

Ein Layout ist nur die halbe Arbeit - Shopify Flow muss die Werte für Ihre Platzhalter bereitstellen.

Jedes Layout verfügt über eine Karte „In Shopify Flow verwenden“, die die genauen Variablen (JSON) enthält, die Sie in die Aktion „Transaktions-E-Mail senden“ einfügen können, wobei alle Schlüsselnamen bereits korrekt sind. Kopieren Sie diese, fügen Sie sie in Shopify Flow ein und ersetzen Sie alle Platzhalter <pick a Flow variable>.

Ausführliche Anleitung: Daten aus Shopify Flow übergeben.

Vorschau mit Testvariablen

Auf der Registerkarte „Testvariablen“ werden alle von der App erkannten {{ variables.x }} aufgelistet, sodass Sie Beispielwerte eingeben und überprüfen können, ob das Design korrekt dargestellt wird.

Um ein Array in einen „Loop“-Block einzufügen, geben Sie es auf dieser Registerkarte als JSON-Array ein.

Eine Test-E-Mail senden

Verwenden Sie im Layout-Editor die Funktion** „Test-E-Mail senden**“. Dadurch wird das Layout realistisch dargestellt und über einen von Ihnen ausgewählten Absender versendet, wobei dem Betreff der Präfix [TEST] vorangestellt wird. Dies ist die einzige Möglichkeit, um zu überprüfen, ob Ihr Liquid-Code tatsächlich ausgewertet wird, da die Vorschau auf der Seite dies nicht tut.

Nachdem Sie den Betrieb aufgenommen haben, überprüfen Sie bitte den Verlauf - eine Übertragung, bei der ein Platzhalter keine Ausgabe erzeugt hat, wird mit dem Vermerk „Leere Variablen“ gekennzeichnet. Siehe Hintergrund und Fehlerbehebung.

Ein Design wiederverwenden

• Mehr → Mit „Als Vorlage speichern“ wird das Design gespeichert, sodass Sie es später wieder verwenden können. Gespeicherte Designs finden Sie unter „Meine Vorlagen“; dort werden ausschließlich die von Ihnen selbst gespeicherten Designs angezeigt.
• Mehr → „Duplizieren“ kopiert das Layout an Ort und Stelle.
• Mehr → Über „Exportieren“ können Sie die Datei herunterladen, und die Funktion „Importieren“ auf der Listenseite akzeptiert eine zuvor aus der App exportierte Datei im Format .zip oder .json - sehr praktisch, um ein Design zwischen verschiedenen Shops zu übertragen.

Ein Layout löschen

Sie können ein Layout jederzeit löschen. Falls ein Schritt Shopify Flow noch darauf verweist, wird das Layout mit dem Hinweis „In Shopify Flow verwendet“ gekennzeichnet, und dies wird auch in der Löschbestätigung angegeben - dies hindert Sie jedoch nicht daran, den Vorgang fortzusetzen.

Nach dem Löschen schlagen alle Shopify Flow-Schritte, die noch darauf verweisen, mit der Fehlermeldung Email template not found fehl, die im Verlauf angezeigt wird. Verweisen Sie diese Schritte auf ein anderes Layout, um das Problem zu beheben.

Verwandte Themen

• Inhaltsblöcke: Produkt, Rabatt, Countdown, Sendungsverfolgung und mehr - Produkt, Rabatt, Countdown, Nachverfolgung und die übrigen Inhaltsblöcke.
• Daten aus Shopify Flow übergeben - die Werte einzugeben.
• Variablen und Flüssigkeit - die vollständige Variablenreferenz.
• Anhänge und Bilder - Dateien, Bilder und Größenbeschränkungen.
• Voreinstellungen für Kopf- und Fußzeilen - wiederverwendbares Branding.
• Marketing-E-Mails und Abmeldungen - Was ein Marketing-Layout anders macht.
• Einstellungen - Markenfarben, benutzerdefinierte Schriftarten und shopweite E-Mail-Standardeinstellungen.