使用 Liquid 自訂您的 Shopify Email 行銷活動

Liquid 是 Shopify 簡單又易於使用的程式語言,與建立 Shopify Theme Store 中的主題所使用的程式語言相同。

您可以建立完全自訂程式碼的電子郵件,或在範本中新增自訂 Liquid 區段,然後使用自訂 Liquid 增強 Shopify Email 的訊息成效。這些選項可讓您輸入自訂的 Liquid 或 HTML 內容。

您可以使用自訂 Liquid 來顯示自訂資產,例如並排顯示的圖片、自訂按鈕、自訂尺寸的圖片和自訂區段尺寸。

考量事項

開始新增自訂 Liquid 至 Shopify 電子郵件訊息之前,請先檢視下列考量事項:

  • 程式碼中使用的變數必須是自訂 Liquid 支援的變數。
  • 您僅能使用桌上型裝置來建立自訂 Liquid 區段。
  • 自訂 Liquid 電子郵件中需有 unsubscribe_linkunsubscribe_url 變數。如果您已啟用「電子郵件開啟動作追蹤」功能,則還需有 open_tracking 變數。深入瞭解如何在電子郵件新增所需變數
  • 您輸入的程式碼具有以下限制: - 自訂 Liquid 區段的大小最大為 50 KB。 - 自訂程式碼 Liquid 電子郵件的大小最大為 500 KB。

自訂 Liquid 區段支援的 Liquid

您可以使用支援的變數,透過 Liquid 自訂您的 Shopify 電子郵件訊息。您可以檢視下列範本類型所支援的 Liquid 變數清單:

所有電子郵件範本支援的 Liquid 變數

您可以使用以下變數,透過 Liquid 自訂任何 Shopify Email 訊息。

Shopify 電子郵件支援的 Liquid 變數之說明
變數說明
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.store_credit_account.balance | money_with_currency}}
customer.tags
傳回與顧客相關的標籤。
customer.tax_exempt
如果顧客免稅,則傳回 true;如果並未免稅,則傳回 false
customer.total_spent
傳回顧客在您商店所有訂單消費的總金額。
email.*

此變數提供下列電子郵件屬性的存取權限:

  • subject」顯示電子郵件的主旨行。
  • preview_text」顯示電子郵件的預覽文字。
  • open_tracking
    此變數可讓您存取預先格式化的「開啟追蹤」區塊。如果您建立了自訂程式碼的電子郵件,並啟用開啟追蹤,則此變數為必填項目。
    shop.*
    此變數提供下列商店屬性的存取權限:
  • name」顯示商店名稱。
  • domain」顯示商店主要網域。
  • url」顯示商店網址。
  • shopify_domain」顯示商店的 Shopify 網域。
    • address」顯示商店地址,可將存取權限授予下列地址屬性:
      • address1
      • address2
      • city
      • 國家/地區
      • 電話
      • province
      • 郵遞區號
    unsubscribe_url
    此變數可讓您存取原始取消訂閱網址,並且可以自訂。若您建立自訂程式碼電子郵件,則需包含 unsubscribe_urlunsubscribe_link 變數。unsubscribe_urlunsubscribe_link 皆會始終指向主要的網路商店網域,且無法修改為指向其他位置。

    未完成結帳作業電子郵件支援的 Liquid 變數

    您可以使用以下變數,透過 Liquid 自訂 Shopify Email 的未完成結帳作業訊息。

    只有在電子郵件屬於未完成結帳作業行銷自動化流程的一部分時,系統才會填入「abandoned_checkout」變數。否則變數會是「null」。

    Shopify 電子郵件行銷工具支援的 Liquid 變數之說明 (適用於放棄的瀏覽、購物車和結帳作業)
    變數說明
    abandoned_checkout.*

    此變數提供對以下未完成結帳作業屬性的存取權限:

    • url」顯示未完成結帳作業的網址。
    • line_items」顯示未完成結帳作業的前五個商品項目。此外,每個 line_items 物件也包含各個商品的下列屬性:
      • 元件
      • image_url
      • product_title
      • variant_title
      • 數量
    • line_items.components 會顯示未完成結帳作業的元件。此外,每個 components 物件還包含各個元件的下列屬性:
      • image_url
      • 數量
      • product_title
      • variant_title
    • 如果未完成結帳作業中含有超過五個商品項目,「remaining_products_count」會顯示剩餘商品項目的數量。
    id
    (checkout ID)
    供內部使用的結帳頁面唯一 ID。
    shop
    您的 Shopify 商店名稱。
    name
    未完成結帳作業的名稱,又稱為結帳編號。
    total_price
    訂單的總金額 (小計 + 運送成本 - 運送成本折扣 + 稅金)。
    shipping_price

    運費價格。

    範例:{{ shipping_price | money }}

    shipping_address
    運送地址
    billing_address
    帳單地址
    line_items
    未完成結帳作業中所有商品項目的清單。
    unavailable_line_items
    未完成結帳作業中無法供貨的所有商品項目的清單。
    note
    附加到未完成結帳作業的備註。
    landing_site

    顧客使用的登陸網站的路徑。這是顧客接觸商店時存取的第一個頁面。

    範例:/products/great-product?ref=my-tracking-token

    landing_site_ref

    擷取登陸網站的引用參數。引用參數可為:refsourcer

    landing_site/products/great-product?ref=my-tracking-token,則 landing_site_ref 將為 my-tracking-token。若您的引用參數等於特定值,即可執行特定動作:

    {% if landing_site_ref == 'my-tracking-token' %} 我的動作... {% endif %}
    referring_site

    將顧客帶往您商店的轉介管道 URL。

    範例:https://www.google.com/?s=great+products

    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
    結帳時商品項目的小計價格。
    email
    與未完成結帳作業關聯的電子郵件。
    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

    附加到未完成結帳作業的任何屬性

    範例:{{ attributes.gift-note }}

    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.*:只有在電子郵件屬於「放棄的購物車」或「已捨棄的商品瀏覽」行銷自動化流程的一部分時,系統才會填入此變數。請檢視此變數授予存取權的下列屬性。

    Shopify 電子郵件支援的 Liquid 變數之說明
    變數說明
    abandoned_visit.*

    此變數提供下列放棄的購物車或放棄的商品瀏覽屬性的存取權限:

    • url」顯示「放棄的購物車」或「放棄的瀏覽」的網址。
    • products_added_to_cart」顯示在放棄的造訪中加入購物車的前五個商品項目。此外,每個 products_added_to_cart 物件也包含各個商品的下列屬性:
      • 標題
      • image_url
      • variant_title
      • 數量
    • products_viewed」顯示在放棄的造訪中所瀏覽的前五項商品。此外,每個 products_viewed 物件也包含各個商品的下列屬性:
      • 標題
      • 說明
      • image_url
      • URL
      • image_alt_text
    • 如果未完成結帳作業中含有超過五個商品項目,「remaining_cart_products_count」會顯示剩餘商品項目的數量。

    使用所需變數

    建立自訂 Liquid 電子郵件時,需有 unsubscribe_linkunsubscribe_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>
    沒有找到您需要的答案嗎?我們很樂意為您提供協助。