Lägga till anpassad Liquid till Shopify e-post-kampanjer
Du kan lägga till anpassad kodning till dina Shopify e-post-meddelanden genom att lägga till ett anpassat Liquid-avsnitt eller genom att skapa ett helt anpassat e-postmeddelande. Med dessa alternativ kan du ange anpassad Liquid eller HTML.
Liquid är Shopifys enkla och lättanvända programmeringsspråk och är samma programmeringsspråk som teman från Shopifys temabutik är byggda med.
Du kan använda anpassad Liquid för att visa anpassade tillgångar, till exempel bilder sida vid sida, anpassade knappar, bilder i anpassad storlek och anpassade avsnittsstorlekar.
På den här sidan
Överväganden
Granska följande överväganden innan du börjar lägga till anpassad Liquid i dina Shopify e-post-meddelanden:
- Variablerna som du inkluderar i din kod måste stödjas av anpassad Liquid.
- Du kan bara använda en stationär enhet för att skapa ett anpassat Liquid-avsnitt.
- Variabeln
unsubscribe_link
krävs i anpassade Liquid-e-postmeddelanden. Om du har aktiverat öppen spårning krävs även variabelnopen_tracking
. Läs mer om att lägga till obligatoriska variabler i din e-post. - Koden du anger har följande begränsningar:
- Maximalt 50 kilobyte (kb) för anpassade Liquid-avsnitt.
- Maximalt 500 kb för anpassad kodad Liquid-e-post.
Liquid-variabler stöds i anpassad Liquid
Du kan använda följande variabler för att anpassa dina Shopify-e-postmeddelanden med Liquid.
Variabel | Beskrivning |
---|---|
unsubscribe_link |
Variabeln ger åtkomst till länken för att avsluta prenumerationen. Variabeln krävs om du skapar ett anpassat e-postmeddelande. |
open_tracking |
Variabeln ger åtkomst till det förformaterade öppna spårningsblocket. Variabeln krävs om du skapar ett anpassat e-postmeddelande och har aktiverat öppen spårning. | abandoned_checkout |
Denna variabel ger åtkomst till följande egenskaper för en övergiven varukorg:
Variabeln |
abandoned_visit |
Denna variabel ger åtkomst till följande egenskaper för en övergiven varukorg eller bläddra:
Variabeln |
data.customer.* |
Variabeln ger åtkomst till följande egenskaper för kunddata: förnamn efternamn e-post stad delstat land Dessa egenskaper kan inte användas inuti Liquid-filter eller Liquid-villkor. |
email.* |
Den här variabeln ger åtkomst till följande e-postegenskaper: subject visar ämnesraden i e-postmeddelandet.preview_text visar förhandsgranskningstexten i e-postmeddelandet. |
shop.* |
Den här variabeln ger åtkomst till följande butiksegenskaper:
name visar butiksnamnet.domain visar butikens huvuddomän.url visar butikens URL.shopify_domain visar butiekns Shopify-domän.
|
Använd obligatoriska variabler
När du skapar en anpassad Liquid-e-post krävs variabeln unsubscribe_link
. Om du har aktiverat öppen spårning krävs även variabeln open_tracking
.
Även om dessa variabler kan infogas var som helst i koden för din e-post, är den vanligaste platsen att lägga till dem i ett e-postmeddelandes sidfotsavsnitt, till exempel i följande exempel:
<div id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>
Exempel på anpassad Liquid-kod
Du kan lägga till din anpassade Liquid eller HTML i kodredigeraren. Följande kod är ett exempel på hur du kan lägga till Liquid-kod för att visa ditt butiksnamn, en anpassad knapp och en anpassad bild i ett e-postmeddelande.
<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>