Mukautetun Liquid-osan lisääminen Shopify Email -kampanjoihin
Voit lisätä mukautettua koodausta Shopify Email -viesteihin lisäämällä mukautetun Liquid-osan tai luomalla täysin mukautetun sähköpostiviestikoodin. Näiden vaihtoehtojen avulla voit syöttää mukautettua Liquid- tai HTML-koodia.
Liquid on Shopifyn yksinkertainen ja helppokäyttöinen ohjelmointikieli, ja se on sama ohjelmointikieli, jolla Shopify Theme Storen teemat on luotu.
Mukautetun Liquidin avulla voit näyttää mukautettuja resursseja, kuten vierekkäisiä kuvia, mukautettuja painikkeita, mukautetun kokoisia kuvia ja mukautettuja osion kokoja.
Tällä sivulla
Huomioitavaa
Tarkista seuraavat seikat, ennen kuin alat käyttää mukautettua Liquid-koodia Shopify Email ‑viesteissä:
- Mukautetun Liquidin on tuettava koodiin sisällytettäviä muuttujia.
- Voit luoda mukautetun Liquid-osion vain tietokoneella.
- Mukautetuissa Liquid-sähköpostiviestissä tarvitaan
unsubscribe_link
. Jos olet aktivoinut avaamisen seurannan, myösopen_tracking
-muuttuja on pakollinen. Lue lisää pakollisten muuttujien lisäämisestä sähköpostiisi. - Syötetyllä koodilla on seuraavat rajoitukset:
- Mukautettujen Liquid-osien koko enintään 50 kilotavua (KB).
- Enintään 500 kilotavua mukautetuille koodatuille Liquid-sähköposteille.
Tuetuissa Liquid tuetut Liquid-muuttujat
Voit mukauttaa Shopify-sähköpostiviestejä Liquidilla seuraavien muuttujien avulla.
Muuttuja | Oikeuksien kuvaus |
---|---|
unsubscribe_link |
Tämä muuttuja antaa pääsyn tilauksen peruuttamislinkkiin. Tämä muuttuja on pakollinen, jos luot mukautetusti koodatun sähköpostin. |
open_tracking |
Tämä muuttuja antaa pääsyn esimuotoiltuun avoimen seurannan lohkoon. Tämä muuttuja on pakollinen, jos luot mukautetusti koodatun sähköpostin ja olet aktivoinut avoimen seurannan. | abandoned_checkout |
Tämä muuttuja mahdollistaa seuraavat hylätyn kassavaiheen ominaisuudet:
Muuttuja |
abandoned_visit |
Tämä muuttuja mahdollistaa seuraavat hylätyn ostoskorin tai selauksen ominaisuudet:
Muuttuja |
data.customer.* |
Tämä muuttuja mahdollistaa seuraavat asiakastietojen ominaisuudet: first_name (etunimi) last_name (sukunimi) sähköposti city Valtion maa Näitä ominaisuuksia ei voi käyttää Liquid-suodattimissa tai Liquid-ehdoissa. |
email.* |
Tämä muuttuja mahdollistaa seuraavat sähköpostin ominaisuudet: subject näyttää sähköpostiviestin aiherivin.preview_text näyttää sähköpostiviestin esikatselutekstin. |
shop.* |
Tämä muuttuja mahdollistaa seuraavat kaupan ominaisuudet:
name näyttää kaupan nimen.domain näyttää kaupan ensisijaisen verkkotunnuksen.url näyttää kaupan URL-osoitteen.shopify_domain näyttää kaupan Shopify-verkkotunnuksen.
|
Pakollisten muuttujien käyttäminen
Kun luot mukautetun Liquid-sähköpostin, unsubscribe_link
-muuttuja on pakollinen. Jos olet aktivoinut avaamisen seurannan, myös open_tracking
-muuttuja on pakollinen.
Vaikka nämä muuttujat voidaan lisätä minne tahansa sähköpostin koodiin, sähköpostin alatunniste-osa on yleisin paikka seuraavan esimerkin tapaan:
<div id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>
Esimerkki mukautetusta Liquid-koodista
Voit lisätä mukautettua Liquid- ja HTML-koodia koodieditoriin. Seuraava koodi on esimerkki siitä, miten voit lisätä Liquid-koodin, joka näyttää kauppasi nimen, mukautetun painikkeen ja mukautetun kokoisen kuvan sähköpostiviestissä.
<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>