Hinzufügen eines Abschnitts für benutzerdefiniertes Liquid für Shopify Email
Durch das Hinzufügen eines Abschnitts für benutzerdefiniertes Liquid kannst du benutzerdefiniertes Liquid oder HTML in deine Shopify Email-Nachrichten einfügen.
Liquid ist die einfache und leicht zu verwendende Programmiersprache von Shopify, mit der auch Themes aus dem Shopify Theme Store erstellt werden.
Du kannst den Abschnitt für benutzerdefiniertes Liquid verwenden, um benutzerdefinierte Elemente wie nebeneinander liegende Bilder, benutzerdefinierte Schaltflächen, Bilder mit benutzerdefinierter Größe und benutzerdefinierte Abschnittsgrößen anzuzeigen.
Auf dieser Seite
Erwägungen
Beachte die folgenden Überlegungen, bevor du beginnst, benutzerdefiniertes Liquid zu deinen Shopify Email-Nachrichten hinzuzufügen.
- Die Variablen, die du in deinen Code einfügst, müssen vom Abschnitt für benutzerdefiniertes Liquid unterstützt werden.
- Der eingegebene Code darf die Größe von 50 KB nicht überschreiten.
- Du kannst nur ein Desktop-Gerät verwenden, um einen Abschnitt für benutzerdefiniertes Liquid zu erstellen.
Im Abschnitt für benutzerdefiniertes Liquid unterstützte Liquid-Variablen
Mit den folgenden Variablen kannst du deine Shopify Email-Nachrichten im Abschnitt für benutzerdefiniertes Liquid anpassen.
Variable | Beschreibung |
---|---|
abandoned_checkout |
Diese Variable gewährt Zugriff auf die folgenden Eigenschaften eines abgebrochenen Checkouts:
Die Variable |
abandoned_visit |
Diese Variable gewährt Zugriff auf die folgenden Eigenschaften eines abgebrochenen Warenkorbs oder einer abgebrochenen Suche:
Die Variable |
data.customer.* |
Diese Variable gewährt Zugriff auf die folgenden Kundendateneigenschaften: first_name last_name email city state country Diese Eigenschaften können nicht in Liquid-Filtern oder in Liquid-Bedingungen verwendet werden. |
email.* |
Diese Variable gewährt Zugriff auf die folgenden E-Mail-Eigenschaften: subject zeigt die Betreffzeile der E-Mail an.preview_text zeigt den Vorschautext der E-Mail an. |
shop.* |
Diese Variable gewährt Zugriff auf die folgenden Shop-Eigenschaften:
name zeigt den Shop-Namen an.domain zeigt die primäre Domain des Shops an.url zeigt die Shop-URL an.shopify_domain zeigt die Shopify-Domain des Shops an.
|
Beispiel für benutzerdefinierten Liquid-Code
Nachdem du einen Abschnitt für benutzerdefiniertes Liquid zu deiner E-Mail-Vorlage hinzugefügt hast, kannst du dein benutzerdefiniertes Liquid oder HTML im Code-Editor hinzufügen.
Der folgende Code ist ein Beispiel, wie du Liquid-Code hinzufügen kannst, um deinen Shop-Namen, eine benutzerdefinierte Schaltfläche und ein Bild mit benutzerdefinierter Größe in einer E-Mail-Nachricht anzuzeigen.
<style>
p#welcome {
margin: 0;
padding: 3rem;
color: white;
font-weight: 700;
font-size: 26px;
font-family: 'Futura';
}
div#image_wrapper img {
max-width: 70%;
border-radius: 60px;
box-shadow: -2px 6px 0px rgba(227, 111, 59, 0.7);
}
div#button_wrapper {
padding: 1rem;
}
div#button_wrapper a {
padding: 1rem 2rem;
border-radius: 24px;
display: inline-block;
background: linear-gradient(120deg, #F6A179, #865CFF);
box-shadow: -2px 4px 0px rgba(96, 54, 173, 0.9);
font-weight: 700;
font-size: 16px;
font-family: 'Futura';
color: white;
}
div#button_wrapper:hover a {
box-shadow: -4px 6px 0px rgba(96, 54, 173, 0.8);
}
div#custom_section {
background: linear-gradient(120deg, #FF9F73, #FFC7AD);
padding:0 0 2rem 0;
border-radius: 4rem;
}
</style>
<div id="custom_section">
<p id="welcome">
Hello from {{shop.name}}<strong></strong>!
</p>
<div id="image_wrapper">
<img src="https://burst.shopifycdn.com/photos/a-trio-of-natural-soaps.jpg" alt="" />
</div>
<div id="button_wrapper">
<a href="">Shop now</a>
</div>
</div>