使用 Liquid 自訂您的 Shopify Email 行銷活動
Liquid 是 Shopify 簡單又易於使用的程式語言,與建立 Shopify Theme Store 中的主題所使用的程式語言相同。
您可以建立完全自訂程式碼的電子郵件,或在範本中新增自訂 Liquid 區段,然後使用自訂 Liquid 增強 Shopify Email 的訊息成效。這些選項可讓您輸入自訂的 Liquid 或 HTML 內容。
您可以使用自訂 Liquid 來顯示自訂資產,例如並排顯示的圖片、自訂按鈕、自訂尺寸的圖片和自訂區段尺寸。
考量事項
開始新增自訂 Liquid 至 Shopify 電子郵件訊息之前,請先檢視下列考量事項:
- 程式碼中使用的變數必須是自訂 Liquid 支援的變數。
- 您僅能使用桌上型裝置來建立自訂 Liquid 區段。
- 自訂 Liquid 電子郵件中需有
unsubscribe_link
或unsubscribe_url
變數。如果您已啟用「電子郵件開啟動作追蹤」功能,則還需有open_tracking
變數。深入瞭解如何在電子郵件新增所需變數。 - 您輸入的程式碼具有以下限制: - 自訂 Liquid 區段的大小最大為 50 KB。 - 自訂程式碼 Liquid 電子郵件的大小最大為 500 KB。
自訂 Liquid 區段支援的 Liquid
您可以使用支援的變數,透過 Liquid 自訂您的 Shopify 電子郵件訊息。您可以檢視下列範本類型所支援的 Liquid 變數清單:
所有電子郵件範本支援的 Liquid 變數
您可以使用以下變數,透過 Liquid 自訂任何 Shopify Email 訊息。
變數 | 說明 |
---|---|
all_products | 您商店的所有商品。 |
customer.accepts_marketing | 如果顧客接受行銷,則傳回 true ;如果不接受,則傳回 false 。 |
customer.addresses | 傳回與顧客相關的所有地址。 |
customer.addresses_count | 傳回與顧客相關的地址數量。 |
customer.b2b? | 如果顧客是 B2B 顧客,則傳回 true ,若否則傳回 false 。 |
customer.current_location | 傳回顧客目前選定的公司地點。 |
customer.default_address | 傳回顧客的預設地址。 |
customer.email | 傳回客戶的電子郵件地址。 |
customer.first_name | 傳回顧客的名字。 |
customer.has_account | 如果顧客的電子郵件與顧客帳號有關聯,則傳回 true ,若無則傳回 false 。 |
customer.has_avatar? | 如果顧客有與其帳號相關聯的大頭貼,則傳回 true ,若無則傳回 false 。 |
customer.id | 傳回顧客的 ID。 |
customer.last_name | 傳回顧客的姓氏。 |
customer.last_order | 傳回顧客最後一筆提交的訂單,不包括測試訂單。 |
customer.name | 傳回顧客的全名。 |
customer.orders | 傳回顧客已提交的所有訂單。 |
customer.orders_count | 傳回顧客已提交的訂單總數。 |
customer.payment_methods | 傳回顧客儲存的付款方式。 |
customer.phone | 傳回顧客的電話號碼。只有當顧客結帳時使用電話號碼、已加入簡訊通知,或您手動將其加入其顧客帳號時,系統才會填入電話號碼。 |
customer.store_credit_account.balance |
以與相關背景資訊關聯的幣別傳回顧客商店抵用金餘額。例如:
|
customer.tags | 傳回與顧客相關的標籤。 |
customer.tax_exempt | 如果顧客免稅,則傳回 true ;如果並未免稅,則傳回 false 。 |
customer.total_spent | 傳回顧客在您商店所有訂單消費的總金額。 |
email.* |
此變數提供下列電子郵件屬性的存取權限: subject 」顯示電子郵件的主旨行。preview_text 」顯示電子郵件的預覽文字。 |
open_tracking | 此變數可讓您存取預先格式化的「開啟追蹤」區塊。如果您建立了自訂程式碼的電子郵件,並啟用開啟追蹤,則此變數為必填項目。 |
shop.* | 此變數提供下列商店屬性的存取權限:
name 」顯示商店名稱。domain 」顯示商店主要網域。url 」顯示商店網址。shopify_domain 」顯示商店的 Shopify 網域。
|
unsubscribe_url | 此變數可讓您存取原始取消訂閱網址,並且可以自訂。若您建立自訂程式碼電子郵件,則需包含 unsubscribe_url 或 unsubscribe_link 變數。unsubscribe_url 和 unsubscribe_link 皆會始終指向主要的網路商店網域,且無法修改為指向其他位置。 |
未完成結帳作業電子郵件支援的 Liquid 變數
您可以使用以下變數,透過 Liquid 自訂 Shopify Email 的未完成結帳作業訊息。
變數 | 說明 |
---|---|
abandoned_checkout.* |
此變數提供對以下未完成結帳作業屬性的存取權限:
|
id(checkout ID) | 供內部使用的結帳頁面唯一 ID。 |
shop | 您的 Shopify 商店名稱。 |
name | 未完成結帳作業的名稱,又稱為結帳編號。 |
total_price | 訂單的總金額 (小計 + 運送成本 - 運送成本折扣 + 稅金)。 |
shipping_price |
運費價格。 範例: |
shipping_address | 運送地址。 |
billing_address | 帳單地址。 |
line_items | 未完成結帳作業中所有商品項目的清單。 |
unavailable_line_items | 未完成結帳作業中無法供貨的所有商品項目的清單。 |
note | 附加到未完成結帳作業的備註。 |
landing_site |
顧客使用的登陸網站的路徑。這是顧客接觸商店時存取的第一個頁面。 範例: |
landing_site_ref |
擷取登陸網站的引用參數。引用參數可為: 若 {% if landing_site_ref == 'my-tracking-token' %} 我的動作... {% endif %} |
referring_site |
將顧客帶往您商店的轉介管道 URL。 範例: |
created_at | 遭顧客放棄的結帳作業的建立日期和時間。 |
closed_at | 關閉結帳作業的日期和時間。 |
customer_locale | 顧客語言設定的二碼或三碼語言代碼,後面可能會加註地區修飾詞。範例: zh-tw, en-CA |
item_count | 所有商品項目數量的總和。 |
unique_gateways | 結帳頁面顯示的唯一付款服務供應商清單。 |
discount | 該折扣已套用至購物車或未完成結帳作業中的商品項目。 |
discounts | 已套用至結帳作業的折扣清單。 |
successfully_applied_discounts | 已成功套用至結帳作業的折扣。 |
discounts_amount |
套用至所有折扣的折扣金額。 範例:+$5.00 |
discounts_savings |
全部折扣所省下的金額。 範例:-$5.00 |
buyer_accepts_marketing | 退貨 是或 否取決於顧客在未完成結帳作業期間是否接受行銷訊息。 |
subtotal_line_items | 結帳時用於計算小計價格的商品項目,不包括任何小費商品項目。 |
requires_shipping | 退貨 是結帳頁面是否至少有一項商品需要運送。 |
subtotal_price | 結帳時商品項目的小計價格。 |
與未完成結帳作業關聯的電子郵件。 | |
shop_name | 您的商店名稱 |
tax_lines |
依「稅金類型」劃分的稅金: {% for tax_line in tax_lines %} {{ tax_line.title }} ({{ tax_line.rate_percentage }}%) : {{ tax_line.price | money_with_currency }} {% endfor %} |
tax_price | 結帳時所有商品的綜合計稅金。 |
attributes |
附加到未完成結帳作業的任何屬性。 範例: |
shipping_method | 結帳時可用的第一種運送方式的相關資訊。 |
shipping_methods | 結帳時可用的運送方式。 |
free | 退貨 是 結帳總金額是否為零。 |
free_shipping | 退貨 是結帳時是否不需要運送,或運送價格為零。 |
different_billing_address | 退貨 是或 否取決於運送地址是否與帳單地址相同。 |
customer | 包含顧客輸出屬性的顧客對象。 |
gift_cards | 已套用至結帳作業的禮品卡。 |
gift_cards_amount | 用禮品卡支付的結帳價格金額。 |
transactions | 結帳頁面的交易紀錄。 |
shareable_url | 商品項目中第一項商品的網址。 |
shareable_title | 第一個商品項目的商品名稱。 |
total_tip | 顧客在結帳時新增的小費總計。 |
discount_applications | 在結帳頁面說明商品的折扣原因及方式。 |
cart_level_discount_applications | 購物車適用的特定購物車折扣申請。 |
currency | 未完成結帳作業的幣別。 |
line_items_subtotal_price | 套用任何商品項目折扣後,結帳頁面所有商品項目的價格總和。 |
適用於「放棄的瀏覽」和「放棄購物車電子郵件」的 Liquid 變數
abandoned_visit.*
:只有在電子郵件屬於「放棄的購物車」或「已捨棄的商品瀏覽」行銷自動化流程的一部分時,系統才會填入此變數。請檢視此變數授予存取權的下列屬性。
變數 | 說明 |
---|---|
abandoned_visit.* |
此變數提供下列放棄的購物車或放棄的商品瀏覽屬性的存取權限:
|
使用所需變數
建立自訂 Liquid 電子郵件時,需有 unsubscribe_link
或 unsubscribe_url
變數。如果您已啟用「電子郵件開啟動作追蹤」功能,則還需有 open_tracking
變數。
雖然這些變數可以插入電子郵件程式碼中的任何位置,但最常見的位置為電子郵件的頁尾區段,如下所示:
<div id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>
自訂 Liquid 程式碼範例
您可以在程式碼編輯器中新增自訂 Liquid 或 HTML。下列程式碼範例說明如何新增 Liquid 程式碼,在電子郵件訊息中顯示商店名稱、自訂按鈕和自訂尺寸的圖片。
<!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>
</head>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; line-height: 1.5; color: #333333; background-color: #f5f5f5;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #f5f5f5;">
<tr>
<td align="center" style="padding: 20px;">
<table cellpadding="0" cellspacing="0" border="0" width="600" style="background-color: #ffffff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
<!-- Header -->
<tr>
<td align="center" style="background-color: #4a6de5; padding: 30px 20px; color: #ffffff;">
<h1 style="margin: 0; font-size: 28px; font-weight: bold;">{{ shop.name }}</h1>
<p style="margin: 10px 0 0; font-size: 16px;">Your Book Journey with Us</p>
</td>
</tr>
<!-- Content -->
<tr>
<td style="padding: 30px 20px;">
<!-- Greeting Section -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 30px;">
<tr>
<td>
<h2 style="margin: 0 0 15px; font-size: 22px; color: #222222;">Hello {{ customer.name }}!</h2>
<p style="margin: 0 0 15px; font-size: 15px;">We hope this email finds you well. We noticed you're from {{ customer.default_address.city }}.</p>
{% if customer.email %}
<p style="margin: 0 0 15px; font-size: 15px;">Your registered email is: {{ customer.email }}</p>
{% endif %}
</td>
</tr>
</table>
<!-- Reading Journey Section -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 30px;">
<tr>
<td>
<h2 style="margin: 0 0 15px; font-size: 20px; color: #4a6de5;">Your Reading Journey</h2>
<p style="margin: 0 0 15px; font-size: 15px;">Thank you for being a loyal customer! Here's a snapshot of your journey:</p>
<p style="margin: 0 0 15px; font-size: 15px;">You purchased {{ customer.orders_count }} books with us.</p>
{% if customer.last_order %}
<p style="margin: 0 0 15px; font-size: 15px;"> You last read {{customer.last_order.line_items[0].title}}. Great choice! </p>
{% endif %}
</td>
</tr>
</table>
<!-- Recommended Books Section -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 30px;">
<tr>
<td>
<h2 style="margin: 0 0 15px; font-size: 20px; color: #4a6de5;">Books You Might Love</h2>
<p style="margin: 0 0 15px; font-size: 15px;">Based on your reading preferences, we've handpicked these titles just for you:</p>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td width="50%" style="padding-right: 10px;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #f9f9f9; border-radius: 4px; padding: 15px;">
<tr>
<td align="center">
<!-- Image with proper email attributes -->
<img src="https:{{ all_products['product-1-handle'] | image_url: width: 200 }}"
alt="Product 1"
width="200"
height="200"
style="display: block; border: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;"
title="Product 1"
border="0">
<h3 style="margin: 0 0 10px; font-size: 16px; color: #333333;">{{ all_products['product-1-handle'].title }}</h3>
<p style="margin: 0 0 10px; font-size: 15px; color: #4a6de5;">${{ all_products['product-1-handle'].price }}</p>
<a href="{{shop.domain}}{{ all_products['product-1-handle'].url }}" style="display: inline-block; background-color: #4a6de5; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 4px; font-size: 14px;">View Book</a>
</td>
</tr>
</table>
</td>
<td width="50%" style="padding-left: 10px;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #f9f9f9; border-radius: 4px; padding: 15px;">
<tr>
<td align="center">
<!-- Image with proper email attributes -->
<img src="https:{{ all_products['product-2-handle'] | image_url: width: 200 }}"
alt="Product 2"
width="200"
height="200"
style="display: block; border: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;"
title="Product 2"
border="0">
<h3 style="margin: 0 0 10px; font-size: 16px; color: #333333;">{{ all_products['product-2-handle'].title }}</h3>
<p style="margin: 0 0 10px; font-size: 15px; color: #4a6de5;">${{ all_products['product-2-handle'].price }}</p>
<a href="{{shop.domain}}{{ all_products['product-2-handle'].url }}" style="display: inline-block; background-color: #4a6de5; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 4px; font-size: 14px;">View Book</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Book Club Section -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 30px;">
<tr>
<td style="background-color: #f5f7ff; border-radius: 4px; padding: 25px; text-align: center;">
<h2 style="margin: 0 0 15px; font-size: 18px; color: #333333;">This Month's Top Picks</h2>
<p style="margin: 0 0 20px; font-size: 15px;">Discover what other readers are loving this month:</p>
<a href="{{ shop.url }}/pages/book-club" style="display: inline-block; background-color: #4a6de5; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 4px; font-size: 14px;">Join Our Book Club</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="background-color: #f2f2f2; padding: 30px 20px; text-align: center;">
<p style="margin: 0 0 15px; font-size: 15px;">Best regards,<br><strong>{{ shop.name }} Team</strong></p>
<p style="margin: 0 0 15px; font-size: 12px; color: #999999;">© {{ 'now' | date: '%Y' }} {{ shop.name }}. All rights reserved.</p>
<p style="margin: 0 0 15px; font-size: 12px;">{{ open_tracking_block }}</p>
<a href="{{ unsubscribe_url }}" style="color: #999999; font-size: 12px; text-decoration: underline;">{{ unsubscribe_link }}</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>