Shopify Email -kampanjoiden mukauttaminen Liquidin avulla
Liquid on Shopifyn yksinkertainen ja helppokäyttöinen ohjelmointikieli, ja se on sama ohjelmointikieli, jolla Shopify Theme Storen teemat on luotu.
Voit käyttää mukautettua Liquid-muuttujaa Shopify Email -viestien parantamiseen luomalla mukautetun koodin sähköpostin tai lisäämällä malliin mukautetun Liquid-osion. Näiden vaihtoehtojen avulla voit syöttää mukautettua Liquid- tai HTML-koodia.
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.
unsubscribe_link- taiunsubscribe_url-muuttuja on pakollinen mukautetuissa Liquid-sähköpostiviesteissä. Jos olet aktivoinut avaamisen seurannan, myösopen_tracking-muuttuja on pakollinen. Lue lisää pakollisten muuttujien lisäämisestä sähköpostiviestiin.- 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äsi Liquidilla tuettujen muuttujien avulla. Voit tarkastella tuettujen Liquid-muuttujien luetteloita seuraaville mallityypeille:
- Kaikki sähköpostimallit
- hylättyjen kassavaiheiden sähköpostimallit
- hylättyjen selausten ja ostoskorien sähköpostimallit.
Liquid-muuttujia tuetaan kaikissa sähköpostimalleissa
Voit mukauttaa kaikkia Shopify Email -viestejäsi Liquidilla seuraavien muuttujien avulla.
| Muuttuja | Kuvaus |
|---|---|
all_products | Kauppasi kaikki tuotteet. |
customer.accepts_marketing | Palauttaa tosi, jos asiakas hyväksyy markkinoinnin, ja palauttaa epätosi, jos ei hyväksy. |
customer.addresses | Palauttaa kaikki asiakkaaseen liittyvät osoitteet. |
customer.addresses_count | Palauttaa asiakkaaseen liittyvien osoitteiden määrän. |
customer.b2b? | Palauttaa tosi, jos asiakas on B2B-asiakas, ja palauttaa epätosi, jos ei. |
customer.current_location | Palauttaa asiakkaalle tällä hetkellä valitun yrityksen sijainnin. |
customer.default_address | Palauttaa asiakkaan oletusosoitteen. |
customer.email | Palauttaa asiakkaan sähköpostiosoitteen. |
customer.first_name | Palauttaa asiakkaan etunimen. |
customer.has_account | Palauttaa tosi, jos asiakkaan sähköposti liittyy asiakastiliin, ja palauttaa epätosi, jos ei. |
customer.has_avatar? | Palauttaa tosi, jos asiakkaan tiliin on liitetty Avatar, ja palauttaa epätosi, jos ei. |
customer.id | Palauttaa asiakkaan tunnuksen. |
customer.last_name | Palauttaa asiakkaan sukunimen. |
customer.last_order | Palauttaa viimeisen asiakkaan tekemän tilauksen testitilauksia lukuun ottamatta. |
customer.name | Palauttaa asiakkaan koko nimen. |
customer.orders | Palauttaa kaikki asiakkaan tekemät tilaukset. |
customer.orders_count | Palauttaa tilausten, jotka asiakas on tehnyt, kokonaismäärän. |
customer.payment_methods | Palauttaa tosi, jos asiakas hyväksyy Markkinoinnin, ja palauttaa epätosi, jos ei. |
customer.phone | Palauttaa asiakkaan puhelinnumeron. Puhelinnumero täytetään vain, jos asiakas käytti puhelinnumeroa maksuvaiheessa, on tilannut tekstiviesti-ilmoitukset, tai jos olet lisännyt sen manuaalisesti hänen asiakastiliinsä. |
customer.tags | Palauttaa asiakkaaseen lisätyt tunnukset. |
customer.tax_exempt | Palauttaa tosi, jos asiakas on vapautettu veroista, ja palauttaa epätosi, jos asiakasta ei ole vapautettu veroista. |
customer.total_spent | Palauttaa tosi, jos asiakas hyväksyy Markkinoinnin, ja palauttaa epätosi, jos ei. |
customer.total_spent | Palauttaa kokonaismäärän, jonka asiakas on käyttänyt kaikkiin kaupasta hankittuihin tilauksiin. |
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. |
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. |
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.
|
unsubscribe_url | Tämä muuttuja antaa pääsyn raakaan tilauksen peruuttamisen URL-osoitteeseen, ja sitä voi mukauttaa. Jos luot mukautetusti koodatun sähköpostiviestin, unsubscribe_url- tai unsubscribe_link-muuttujan sisällyttäminen on pakollista. |
Seuraavien muuttujien avulla voit mukauttaa hylätyn ostoskorin Shopify Email -ilmoituksia Liquidilla.
| Muuttuja | Kuvaus |
|---|---|
abandoned_checkout.* |
Tämä muuttuja mahdollistaa seuraavat hylätyn kassavaiheen ominaisuudet:
|
id(checkout ID) | Yksilöllinen kassamaksun tunnus sisäistä käyttöä varten. |
shop | Shopify-kauppasi nimi. |
name | Hylätyn kassavaiheen nimi, jota kutsutaan myös kassanumeroksi. |
total_price | Tilauksen kokonaishinta (välisumma + toimituskulut - toimitusalennus + vero). |
shipping_price |
Toimitushinta. Esimerkki: |
shipping_address | Toimitusosoite. |
billing_address | Laskutusosoite. |
line_items | Luettelo kaikista hylätyn kassamaksun rivikohdista. |
unavailable_line_items | Luettelo kaikista hylätyn kassamaksun rivikohdista, jotka eivät ole käytettävissä. |
note | Hylättyyn kassavaiheeseen liitetty kommentti. |
landing_site |
Asiakkaan käyttämän kohdesivun polku. Tämä on ensimmäinen sivu, jota asiakkaasi käytti kauppaan saapuessaan. Esimerkki: |
landing_site_ref |
Poimii viiteparametrin kohdesivulta. Viiteparametrit voivat olla: Jos {% if landing_site_ref == 'my-tracking-token' %} Toimintani... {% endif %}
|
referring_site |
Sen suosittelijan URL-osoite, joka toi asiakkaan kauppaan. Esimerkki: |
created_at | Päivämäärä ja kellonaika, jolloin asiakas loi hylkäämänsä kassavaiheen. |
closed_at | Päivämäärä ja kellonaika, jolloin kassavaihe suljettiin. |
customer_locale | Asiakkaan sijaintiin liittyvä kaksi- tai kolmekirjaiminen kielikoodi, jonka jälkeen saattaa tulla myös alueellinen määrite. Esimerkiksi: fi, en-CA |
item_count | Kaikkien tuotteiden määrien summa. |
unique_gateways | Luettelo kassavaiheessa saatavilla olevista yksilöllisiä maksupalveluiden tarjoajista. |
discount | Alennus, jota sovelletaan ostokoriin tai hylätyn kassavaiheen rivikohtaan. |
discounts | Luettelo kassavaiheessa sovellettavista alennuksista. |
successfully_applied_discounts | Alennukset, joita sovellettiin onnistuneesti kassavaiheessa. |
discounts_amount |
Kaikissa alennuksissa käytettävä alennuksen dollarimäärä. Esimerkiksi +5,00 $ |
discounts_savings |
Alennuksien ansiosta säästetty dollarimäärä. Esimerkiksi -5,00 $ |
buyer_accepts_marketing | Palautukset tositai epätosiriippuen siitä, hyväksyikö asiakas markkinoinnin hylätyn kassavaiheen yhteydessä. |
subtotal_line_items | Rivikohdat, joita käytetään välisumman hinnan laskemiseen kassavaiheessa ilman tippirivikohtia. |
requires_shipping | Palautukset tosijos kassalla on vähintään yksi tuote, joka edellyttää toimitusta. |
subtotal_price | Rivikohtien välisumma kassalla. |
| Hylättyyn kassavaiheeseen liittyvä sähköpostiosoite. | |
shop_name | Kauppasi nimi. |
tax_lines |
Verot verotyypin mukaan eriteltyinä: {% for tax_line in tax_lines %} {{ tax_line.title }} ({{ tax_line.rate_percentage }}%) : {{ tax_line.price | money_with_currency }} {% endfor %}
|
tax_price | Kaikkien kassavaiheen rivikohtien verot yhteensä. |
attributes |
Kaikki hylättyyn kassavaiheeseen liitetyt ominaisuudet. Esimerkki: |
shipping_method | Lisätietoja kassavaiheessa saatavilla olevaista ensimmäisestä toimitusmenetelmästä. |
shipping_methods | Kassavaiheessa saatavilla olevat toimitustavat. |
free | Palautukset tosi jos kassavaiheen kokonaishinta on nolla. |
free_shipping | Palautukset tosijos kassavaihe ei edellytä toimitusta tai jos toimituskulut ovat nolla. |
different_billing_address | Palautukset tositai epätosisen mukaan, onko toimitusosoite sama kuin laskutusosoite. |
customer | Asiakasobjekti, joka sisältää asiakkaan tuotoksen ominaisuudet. |
gift_cards | Kassavaiheessa sovellettavat lahjakortit. |
gift_cards_amount | Lahjakorteilla maksettava kassavaiheen summa. |
transactions | Kassan tapahtumat. |
shareable_url | Rivikohtien ensimmäisen tuotteen URL-osoite. |
shareable_title | Ensimmäisen rivikohdan tuotenimike. |
total_tip | Asiakkaan kassavaiheessa lisäämä kokonaistippi. |
discount_applications | Kuvaa, miksi ja miten tuotteesta annettiin alennusta kassalla. |
cart_level_discount_applications | Sovelletut ostoskorikohtaiset alennukset. |
currency | Hylätyn kassavaiheen valuutta. |
line_items_subtotal_price | Kaikkien kassavaiheen rivikohtien hintojen summa sen jälkeen, kun rivikohtiin on sovellettu alennuksia. |
Muuttuja abandoned_visit.* täyttyy vain, jos sähköposti on osa hylätyn ostoskorin tai hylätyn tuoteselauksen markkinointiautomaatiota. Tarkista seuraavat ominaisuudet, joihin tämä muuttuja antaa käyttöoikeuden.
| Muuttuja | Kuvaus |
|---|---|
abandoned_visit.* |
Tämä muuttuja mahdollistaa seuraavat hylätyn ostoskorin tai selauksen ominaisuudet:
|
Kun luot mukautetun Liquid-sähköpostiviestin, unsubscribe_link- tai unsubscribe_url-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ä.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ shop.name }} Newsletter</title>
<style>
/* Reset styles */
body, html {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #333333;
background-color: #f5f5f5;
-webkit-font-smoothing: antialiased;
}
/* Main container */
.email-container {
max-width: 600px;
margin: 0 auto;
background-color: #ffffff;
}
/* Header styles */
.header {
background: linear-gradient(135deg, #4a6de5 0%, #3b5de8 100%);
padding: 30px 0;
text-align: center;
border-bottom: 5px solid #3b5de8;
}
.header-title {
color: #ffffff;
font-size: 28px;
font-weight: 700;
margin: 0;
letter-spacing: 0.5px;
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.header-subtitle {
color: rgba(255,255,255,0.9);
font-size: 16px;
margin: 5px 0 0;
font-weight: 400;
}
/* Content area */
.content {
padding: 40px 30px;
}
/* Greeting section */
.greeting {
font-size: 22px;
font-weight: 700;
color: #222222;
margin-bottom: 20px;
}
/* Sections */
.section {
margin-bottom: 35px;
padding-bottom: 30px;
border-bottom: 1px solid #eeeeee;
}
.section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.section-title {
color: #4a6de5;
font-size: 20px;
font-weight: 700;
margin: 0 0 20px;
padding-bottom: 10px;
position: relative;
}
.section-title:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background-color: #4a6de5;
}
/* Text styles */
p {
margin: 0 0 15px;
color: #555555;
font-size: 15px;
}
.highlight {
color: #4a6de5;
font-weight: 600;
}
/* Order items */
.order-summary {
background-color: #f9f9f9;
border-radius: 8px;
padding: 20px;
margin-top: 15px;
}
.order-item {
margin: 15px 0;
padding: 15px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
overflow: hidden;
}
.order-item-content {
display: flex;
align-items: center;
}
.order-item-image {
flex: 0 0 100px;
margin-right: 15px;
}
.order-item-image img {
border-radius: 5px;
width: 100%;
height: auto;
}
.order-item-details {
flex: 1;
}
.product-title {
font-weight: 600;
color: #333333;
margin-bottom: 5px;
font-size: 16px;
}
/* Product grid */
.product-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 25px;
}
.product {
width: 48%;
margin-bottom: 25px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(0,0,0,0.08);
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
}
.product:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.product-image {
position: relative;
overflow: hidden;
padding-top: 75%; /* 4:3 aspect ratio */
}
.product-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.product:hover .product-image img {
transform: scale(1.05);
}
.product-info {
padding: 15px;
text-align: center;
}
.product-price {
color: #4a6de5;
font-weight: 700;
font-size: 18px;
margin: 5px 0 10px;
}
.button {
display: inline-block;
background: linear-gradient(to right, #4a6de5, #3b5de8);
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 30px;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.5px;
transition: all 0.3s;
border: none;
cursor: pointer;
box-shadow: 0 4px 10px rgba(74, 109, 229, 0.3);
}
.button:hover {
background: linear-gradient(to right, #3b5de8, #2a4cd7);
box-shadow: 0 6px 15px rgba(74, 109, 229, 0.4);
transform: translateY(-2px);
}
/* Stats section */
.stats-container {
display: flex;
justify-content: space-between;
margin: 20px 0;
flex-wrap: wrap;
}
.stat-box {
flex: 0 0 48%;
background-color: #f9f9f9;
border-radius: 8px;
padding: 15px;
text-align: center;
margin-bottom: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.stat-number {
font-size: 24px;
font-weight: 700;
color: #4a6de5;
margin-bottom: 5px;
}
.stat-label {
color: #666666;
font-size: 14px;
}
/* Divider */
.divider {
height: 1px;
background-color: #eeeeee;
margin: 30px 0;
}
/* Call to action */
.cta-box {
background: linear-gradient(135deg, #f5f7ff 0%, #e8eeff 100%);
border-radius: 8px;
padding: 25px;
text-align: center;
margin: 30px 0;
}
.cta-title {
font-size: 18px;
font-weight: 700;
color: #333333;
margin-bottom: 15px;
}
.cta-text {
margin-bottom: 20px;
color: #555555;
}
/* Footer */
.footer {
background-color: #f2f2f2;
padding: 30px;
text-align: center;
border-top: 1px solid #e5e5e5;
}
.social-links {
margin: 20px 0;
}
.social-link {
display: inline-block;
margin: 0 8px;
width: 32px;
height: 32px;
background-color: #4a6de5;
border-radius: 50%;
color: white;
line-height: 32px;
text-align: center;
text-decoration: none;
transition: background-color 0.3s;
}
.social-link:hover {
background-color: #3b5de8;
}
.footer-links {
margin: 15px 0;
}
.footer-link {
color: #666666;
text-decoration: none;
margin: 0 10px;
font-size: 13px;
}
.footer-link:hover {
color: #4a6de5;
text-decoration: underline;
}
.copyright {
color: #999999;
font-size: 12px;
margin-top: 15px;
}
.unsubscribe {
color: #999999;
font-size: 12px;
text-decoration: underline;
margin-top: 10px;
display: inline-block;
}
/* Responsive adjustments */
@media screen and (max-width: 480px) {
.content {
padding: 30px 20px;
}
.product {
width: 100%;
}
.stat-box {
flex: 0 0 100%;
}
.order-item-content {
flex-direction: column;
}
.order-item-image {
margin-right: 0;
margin-bottom: 15px;
flex: 0 0 auto;
width: 100%;
}
}
</style>
</head>
<body>
<div class="email-container">
<!-- Header -->
<div class="header">
<h1 class="header-title">{{ shop.name }}</h1>
<p class="header-subtitle">Your Personalized Book Recommendations</p>
</div>
<!-- Main Content -->
<div class="content">
<!-- Greeting Section -->
<div class="section">
<div class="greeting">Hello {{ customer.name }}!</div>
<p>We hope this email finds you well. We noticed you're from <span class="highlight">{{ customer.default_address.city }}</span> and wanted to share some updates tailored just for you.</p>
{% if customer.email %}
<p>Your registered email is: <span class="highlight">{{ customer.email }}</span></p>
{% endif %}
</div>
<!-- Purchase History Section -->
<div class="section">
<h2 class="section-title">Your Reading Journey With Us</h2>
<p>Thank you for being a loyal customer! Here's a snapshot of your journey with {{ shop.name }}:</p>
<div class="stats-container">
<div class="stat-box">
<div class="stat-number">{{ customer.orders_count }}</div>
<div class="stat-label">Total Orders</div>
</div>
<div class="stat-box">
<div class="stat-number">{{ customer.total_spent | money}}</div>
<div class="stat-label">Total Spent</div>
</div>
</div>
<p>Your continued support helps us bring more amazing books to readers like you!</p>
</div>
<!-- Last Order Section -->
{% if customer.last_order %}
<div class="section">
<h2 class="section-title">Your Recent Purchase</h2>
<p>We hope you're enjoying your latest reads:</p>
<div class="order-summary">
{% for item in customer.last_order.line_items %}
<div class="order-item">
<div class="order-item-content">
<div class="order-item-image">
<img src="{{ item.product.featured_image | image_url: width: 300 }}" alt="{{ item.title }}"/>
</div>
<div class="order-item-details">
<div class="product-title">{{ item.title }}</div>
<p>We hope you're enjoying this book! Don't forget to leave a review.</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
<!-- Recommended Products Section -->
<div class="section">
<h2 class="section-title">Books You Might Love</h2>
<p>Based on your reading preferences, we've handpicked these titles just for you:</p>
<div class="product-container">
<div class="product">
<div class="product-image">
<img src="{{ all_products['first-product-handle'] | image_url: width: 300 }}" alt="Microelectronic Circuits"/>
</div>
<div class="product-info">
<div class="product-title">{{ all_products['first-product-handle'].title }}</div>
<div class="product-price">${{ all_products['first-product-handle'].price }}</div>
<a href="{{ all_products['first-product-handle'].url }}" class="button">View Book</a>
</div>
</div>
<div class="product">
<div class="product-image">
<img src="{{ all_products['second-product-handle'] | image_url: width: 300 }}" alt="General Chemistry"/>
</div>
<div class="product-info">
<div class="product-title">{{ all_products['second-product-handle'].title }}</div>
<div class="product-price">${{ all_products['second-product-handle'].price }}</div>
<a href="{{ all_products['second-product-handle'].url }}" class="button">View Book</a>
</div>
</div>
</div>
</div>
<!-- Additional Recommendations -->
<div class="section">
<h2 class="section-title">This Month's Top Picks</h2>
<p>Discover what other readers are loving this month:</p>
<div class="cta-box">
<div class="cta-title">Join Our Book Club!</div>
<p class="cta-text">Connect with fellow readers, get exclusive discounts, and receive early access to new releases.</p>
<a href="{{ shop.url }}/pages/book-club" class="button">Learn More</a>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer">
<div class="footer-links">
<a href="{{ shop.url }}" class="footer-link">Home</a>
<a href="{{ shop.url }}/collections/all" class="footer-link">Shop</a>
<a href="{{ shop.url }}/pages/about" class="footer-link">About</a>
<a href="{{ shop.url }}/pages/contact" class="footer-link">Contact</a>
</div>
<p>Best regards,<br><strong>{{ shop.name }} Team</strong></p>
<p class="copyright">© {{ 'now' | date: '%Y' }} {{ shop.name }}. All rights reserved.</p>
<p>{{ open_tracking_block }}</p>
<a href="{{ unsubscribe_url }}" class="unsubscribe">{{ unsubscribe_link }}</a>
</div>
</div>
</body>
</html>