Hinzufügen von benutzerdefiniertem Liquid zu Shopify Email-Kampagnen
Du kannst benutzerdefiniertes Codieren zu deinen Shopify Email-Nachrichten hinzufügen, indem du einen benutzerdefinierten Liquid-Abschnitt hinzufügst oder eine komplett benutzerdefinierte E-Mail erstellst. Mit diesen Optionen kannst du benutzerdefiniertes Liquid oder HTML eingeben.
Liquid ist die einfache und leicht zu verwendende Programmiersprache von Shopify, mit der auch Themes aus dem Shopify Theme Store erstellt werden.
Du kannst 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 von benutzerdefiniertem Liquid unterstützt werden.
- Du kannst nur ein Desktop-Gerät verwenden, um einen Abschnitt für benutzerdefiniertes Liquid zu erstellen.
- Die Variable
unsubscribe_link
ist in benutzerdefinierten Liquid-E-Mails erforderlich. Wenn du die Nachverfolgung von geöffneten E-Mails aktiviert hast, ist auch die Variableopen_tracking
erforderlich. Erfahre mehr über das Hinzufügen von erforderlichen Variablen zu deiner E-Mail. - Der Code, den du eingibst, unterliegt den folgenden Einschränkungen:
- Maximal 50 Kilobyte (KB) für benutzerdefinierte Liquid-Abschnitte.
- Maximal 500 KB für benutzerdefinierte Liquid-E-Mails.
In benutzerdefiniertem Liquid unterstützte Liquid-Variablen
Mit den folgenden Variablen kannst du deine Shopify-E-Mail-Nachrichten mit Liquid anpassen.
Variable | Beschreibung |
---|---|
unsubscribe_link |
Diese Variable gibt Zugriff auf den Abmeldelink. Diese Variable ist erforderlich, wenn du eine benutzerdefinierte E-Mail erstellst. |
open_tracking |
Diese Variable gibt Zugriff auf den vorformatierten offenen Tracking-Block . Diese Variable ist erforderlich, wenn du eine benutzerdefinierte E-Mail erstellst und die Nachverfolgung von geöffneten E-Mails aktiviert hast. | 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.
|
Erforderliche Variablen verwenden
Wenn du eine benutzerdefinierte Liquid-E-Mail erstellst, ist die Variable unsubscribe_link
erforderlich. Wenn du die Nachverfolgung von geöffneten E-Mails aktiviert hast, ist auch die Variable open_tracking
erforderlich.
Obwohl diese Variablen an einer beliebigen Stelle im Code deiner E-Mail eingefügt werden können, stellt der Fußzeilenabschnitt einer E-Mail eine häufig verwendete Stelle für das Hinzufügen der Variablen dar. Es folgt ein Beispiel:
<div id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>
Beispiel für benutzerdefinierten Liquid-Code
Du kannst benutzerdefiniertes Liquid und HTML in den Code-Editor eingeben. 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>
body {
text-align: center;
}
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#footer {
font-weight: 700;
font-size: 16px;
font-family: 'Futura';
padding: 2rem;
}
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 id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>
</div>