Ein E-Mail-Layout erstellen
Ein E-Mail-Layout ist die E-Mail selbst: die Betreffzeile, das Design und etwaige Anhänge. Die Shopify-Flow-Aktion wählt ein Layout und einen Absender aus und versendet dann die E-Mail. Da das Layout vom Workflow getrennt ist, kann ein einziges Design jeden Kunden bedienen, ohne dass Sie noch einmal HTML anfassen müssen.
Ein Layout erstellen
Gehen Sie zu E-Mail-Layouts und klicken Sie auf E-Mail-Layout erstellen. Sie legen Folgendes fest:
- Name - woran Sie es erkennen. Nur Sie sehen diesen.
- Betreff - unterstützt
{{ variables.xxx }}und{{ secrets.xxx }}. - Vorschautext - optional. Die kurze Zeile, die die meisten Postfächer neben dem Betreff anzeigen. Streben Sie 40-100 Zeichen an; er unterstützt dieselben Variablen wie der Betreff. Lassen Sie ihn leer, wählt das E-Mail-Programm stattdessen den ersten Text in Ihrer E-Mail aus.
- Beschreibung - optional, nur für Ihre eigenen Notizen.
Wählen Sie dann einen Editor:
| Editor | Am besten geeignet für |
|---|---|
| Visueller Baukasten | Gestaltete, gebrandete E-Mails, die aus Drag-and-Drop-Blöcken aufgebaut werden |
| Rich Text / HTML | Einfache Transaktionsmitteilungen oder eine vollständig eigene HTML-E-Mail, die Sie einfügen |
Der visuelle Baukasten
Der Baukasten ist ein zweigeteilter Bildschirm: Einstellungen links, eine live aktualisierte Vorschau des Layouts rechts. Fügen Sie Blöcke über die Schaltfläche Abschnitt hinzufügen oder die +-Markierungen zwischen vorhandenen Blöcken hinzu.
Das linke Panel hat vier Tabs:
| Tab | Was er enthält |
|---|---|
| Allgemein | Name, Betreff, Vorschautext, Beschreibung |
| Branding | Farben, Typografie und Layout-Abstände für die gesamte E-Mail |
| Blöcke | Einstellungen für den auf der Fläche ausgewählten Block |
| Testvariablen | Der Shopify-Flow-JSON-Ausschnitt, die Referenz der Systemvariablen und Beispielwerte für die Vorschau |
Jeder Block auf der Fläche verfügt über Steuerelemente, um ihn zu verschieben, zu duplizieren, zu löschen oder ohne Löschen auszublenden.
Blockreferenz
Elemente
| Block | Einstellungen |
|---|---|
| Text | Rich Text, Ausrichtung, Schriftgröße (12/14/16/18), Farbe |
| Überschrift | Überschriftstext, Größe (Extragroß H1 bis Klein H4), Ausrichtung, Farbe |
| Bild | Bild (Upload oder Link), Alt-Text, Breite 10-100 %, Ausrichtung |
| Button | Beschriftung, URL, Stil (Primär / Sekundär / Umriss), Ausrichtung, Randradius 0-24 px |
| Trennlinie | Farbe, Stil (Durchgezogen / Gestrichelt / Gepunktet), Stärke 1-8 |
| Abstand | Höhe 4-80 px |
| Anhang | Dateiauswahl und ein Titel. Siehe Anhänge und Bilder |
| Schleife | Wiederholt einen Block aus Liquid + HTML über eine Array-Variable - verwenden Sie dies für Bestellpositionen |
| HTML / Code | Rohes HTML mit Liquid, einschließlich {% if %}-Bedingungen |
| QR-Code | Daten (URL oder Text, unterstützt Variablen), Größe 80-300 px, Ausrichtung |
Layout
| Block | Einstellungen |
|---|---|
| Bild + Text | Bildposition (links/rechts), Bildbreite 20-70 %, vertikale Ausrichtung, Abstand, Hintergrundfarbe, plus Unterkomponenten für Bild / Text / Button |
| Zwei Spalten | Spaltenaufteilung (50/50, 33/67, 67/33, 40/60, 60/40), Abstand 0-40, vertikale Ausrichtung, Innenabstand sowie separate Inhalte für die linke und rechte Spalte |
Branding
Der Tab Branding gilt für das gesamte Layout:
- Farben - Primär, Sekundär, Text, Hintergrund des Nachrichtenkörpers, Inhaltshintergrund
- Typografie - Überschriftenschrift, Fließtextschrift, Zeilenhöhe
- Layout - die unten stehenden Abstandssteuerungen
| Steuerelement | Was es ändert | Bereich |
|---|---|---|
| Maximale Breite | Wie breit der E-Mail-Inhalt werden kann | 400-800 px |
| Container-Innenabstand | Platz um den gesamten Inhaltsbereich herum | 0-40 px |
| Block-Innenabstand (Seiten) | Platz zwischen Ihrem Inhalt und dem linken und rechten Rand | 0-40 px |
| Block-Innenabstand (oben & unten) | Platz 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 Block-Innenabstand (oben & unten) klein. Blockabstand trennt die Blöcke bereits, sodass das Erhöhen beider Werte große Lücken hinterlässt.
Das Schriftarten-Dropdown bietet Systemschriften (Arial, Georgia, Verdana, Times New Roman, Helvetica, Trebuchet MS), eine Auswahl an Google-Schriften (Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Raleway, Playfair Display, Merriweather, Source Sans 3, Oswald, Work Sans, DM Sans, Space Grotesk) sowie jede eigene Schriftart, die Sie unter Einstellungen hochgeladen haben.
Kopf- und Fußzeile
Kopf- und Fußzeile sind klickbare Bereiche am oberen und unteren Rand der Fläche. Jede kann eine gespeicherte Voreinstellung verwenden, sodass eine Änderung an Ihrem Branding alle Layouts gleichzeitig aktualisiert, oder Eigene (nur dieses Layout) für eine einmalige Anpassung. Siehe Header- und Footer-Vorlagen.
Rich-Text-/HTML-Modus
In diesem Modus ist der Textkörper ein einzelner Editor mit einem Umschalter Rich Text / HTML und einem separaten Umschalter Vorschau.
- Rich Text bietet Ihnen eine vertraute Formatierungssymbolleiste.
- HTML bietet Ihnen ein rohes Textfeld - fügen Sie eine bereits vollständig gestaltete E-Mail ein, falls Sie schon eine haben.
- Bild einfügen fügt ein gehostetes Bild hinzu, entweder aus Ihrer Mediathek oder über einen Link.
Die Vorschau ist schreibgeschützt und zeigt Liquid-Tags unverändert an. Um echte Werte zu sehen, senden Sie eine Test-E-Mail.
Verknüpfung mit Shopify Flow
Ein Layout ist nur die halbe Miete - Shopify Flow muss die Werte für Ihre Platzhalter liefern.
Jedes Layout hat eine Karte In Shopify Flow verwenden mit den exakten Variablen (JSON), die Sie in die Aktion „Transaktions-E-Mail senden“ einfügen können, wobei alle Schlüsselnamen bereits korrekt sind. Kopieren Sie sie, fügen Sie sie in Flow ein und ersetzen Sie alle Platzhalter <pick a Flow variable>.
Vollständige Anleitung: Daten aus Shopify Flow übergeben.
Vorschau mit Testvariablen
Der Tab Testvariablen listet jede von der App erkannte {{ variables.x }} auf, sodass Sie Beispielwerte eingeben und sehen können, wie das Design tatsächlich dargestellt wird.
Um ein Array in einen Schleifen-Block einzuspeisen, geben Sie es in diesem Tab als JSON-Array ein.
Eine Test-E-Mail senden
Verwenden Sie Test-E-Mail senden im Layout-Editor. Dabei wird das Layout tatsächlich gerendert und über einen von Ihnen ausgewählten Absender versendet, wobei dem Betreff [TEST] vorangestellt wird. Dies ist die einzige Möglichkeit zu prüfen, ob Ihr Liquid-Code tatsächlich aufgelöst wird, da die Vorschau auf der Seite ihn nicht auswertet.
Nachdem Sie live gegangen sind, prüfen Sie den Verlauf - ein Versand, bei dem ein Platzhalter nichts ergeben hat, erhält das Abzeichen Leere Variablen. Siehe Verlauf und Fehlerbehebung.
Ein Design wiederverwenden
- Mehr → Als Vorlage speichern speichert das Design, sodass Sie später erneut davon ausgehen können. Gespeicherte Designs finden Sie unter Meine Vorlagen, das nur die von Ihnen selbst gespeicherten Designs enthält.
- Mehr → Duplizieren kopiert das Layout an Ort und Stelle.
- Mehr → Exportieren lädt es herunter, und Importieren auf der Listenseite akzeptiert eine zuvor aus der App exportierte
.zip- oder.json-Datei - praktisch, um ein Design zwischen Shops zu verschieben.
Ein Layout löschen
Sie können ein Layout jederzeit löschen. Verweist noch ein Shopify-Flow-Schritt darauf, trägt das Layout ein Abzeichen In Flow verwendet, und die Löschbestätigung weist darauf hin - hindert Sie aber nicht am Löschen.
Nach dem Löschen schlägt jeder Flow-Schritt, der noch darauf verweist, mit Email template not found fehl, was im Verlauf erscheint. Weisen Sie diesen Schritten ein anderes Layout zu, um sie zu beheben.
Verwandte Themen
- Daten aus Shopify Flow übergeben - die Werte bereitstellen.
- Variablen und Liquid - die vollständige Variablenreferenz.
- Anhänge und Bilder - Dateien, Bilder und Größenbeschränkungen.
- Header- und Footer-Vorlagen - wiederverwendbares Branding.