Sådan føjer du tilpasset Liquid-kode til Shopify Email-kampagner
Du kan indsætte tilpasset kode i dine Shopify Email-mails ved at tilføje et afsnit med tilpasset Liquid eller ved at oprette en mail med fuldt ud tilpasset kode. Med disse valgmuligheder kan du indsætte tilpasset Liquid- eller HTML-kode.
Liquid er Shopifys enkle og brugervenlige programmeringssprog og det samme programmeringssprog, som temaerne fra Shopifys temabutik er udviklet med.
Du kan bruge tilpasset Liquid til at vise tilpassede aktiver, som f.eks. billeder side om side, tilpassede knapper, billeder i tilpasset størrelse og tilpassede afsnitsstørrelser.
På denne side
Overvejelser
Gennemgå følgende overvejelser, før du begynder at føje tilpasset Liquid til dine Shopify Email-mails:
- De variabler, som du inkluderer i din kode, skal understøttes af tilpasset Liquid.
- Du kan kun bruge en computer til at oprette et tilpasset Liquid-afsnit.
- Variablen
unsubscribe_link
er påkrævet i tilpassede Liquid-mails. Hvis du har aktiveret sporing af åbninger, er variablenopen_tracking
også påkrævet. Få mere at vide om, hvordan du føjer påkrævede variabler til din mail. - Du kan indsætte kode med følgende begrænsninger:
- Højst 50 kilobyte (KB) for afsnit med tilpasset Liquid-kode.
- Højst 500 KB for mails med tilpasset Liquid-kode.
Liquid-variabler, der understøttes i tilpasset Liquid-kode
Du kan bruge følgende variabler til at tilpasse dine Shopify Email-mails med Liquid.
Variabel | Beskrivelse |
---|---|
unsubscribe_link |
Denne variabel giver adgang til linket til afmelding. Denne variabel er påkrævet, hvis du opretter en kodetilpasset mail. |
open_tracking |
Denne variabel giver adgang til den forudformaterede blok til sporing af åbninger . Denne variabel er påkrævet, hvis du opretter en kodetilpasset mail og har aktiveret sporing af åbninger. | abandoned_checkout |
Denne variabel giver adgang til følgende egenskaber for en forladt betaling:
Variablen |
abandoned_visit |
Denne variabel giver adgang til følgende egenskaber for en forladt indkøbskurv eller browsing:
Variablen |
data.customer.* |
Denne variabel giver adgang til følgende egenskaber for kundedata: first_name last_name mail by status land Disse egenskaber kan ikke bruges i Liquid-filtre eller Liquid-betingelser. |
email.* |
Denne variabel giver adgang til følgende mailegenskaber: subject viser emnelinjen i mailen.preview_text viser forhåndsvisningen af mailen. |
shop.* |
Denne variabel giver adgang til følgende butiksegenskaber:
name viser butikkens navn.domain viser butikkens primære domæne.url viser butikkens webadresse.shopify_domain viser Shopify-domænet.
|
Brug af påkrævede variabler
Når du opretter en tilpasset Liquid-mail, er variablen unsubscribe_link
påkrævet. Hvis du har aktiveret sporing af åbninger, er variablen open_tracking
også påkrævet.
Selv om disse variabler kan indsættes et vilkårligt sted i koden for din mail, er det mest almindelige sted at tilføje dem i sidefodsafsnittet i en mail, som f.eks. i følgende eksempel:
<div id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>
Eksempel på tilpasset Liquid-kode
Du kan indsætte din tilpassede Liquid- eller HTML-kode i kodeeditoren. Følgende kode er et eksempel på, hvordan du kan tilføje Liquid-kode for at få vist dit butiksnavn, en tilpasset knap og et tilpasset billede i en mailbesked.
<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>