Lägga till ett anpassat Liquid-avsnitt för Shopify Email
Om du lägger till ett anpassat Liquid-avsnitt kan du ange anpassad Liquid eller HTML i dina Shopify e-postmeddelanden.
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 det anpassade Liquid-avsnittet 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 avsnittet anpassad Liquid.
- Koden du anger får inte vara större än 50 KB.
- Du kan bara använda en stationär enhet för att skapa ett anpassat Liquid-avsnitt.
Liquid-variabler stöds i det anpassade Liquid-avsnittet
Du kan använda följande variabler för att anpassa dina Shopify-e-postmeddelanden i det anpassade Liquid-avsnittet.
Variabel | Beskrivning |
---|---|
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.
|
Exempel på anpassad Liquid-kod
När du har lagt till ett anpassat Liquid-avsnitt i din e-postmall kan du 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>
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>