將自訂 Liquid 新增到 Shopify Email 行銷活動

發展業務

如需為 Shopify 電子郵件訊息建立自訂程式碼的相關協助，可以聘僱 Shopiy 合作夥伴。

您可以透過兩種方式在 Shopify 電子郵件行銷工具的訊息中加入自訂程式碼：新增自訂 Liquid 區段，或建立完全自訂程式碼的電子郵件。這些選項能讓您輸入自訂的 Liquid 或 HTML 內容。

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

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

考量事項

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

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

自訂 Liquid 區段支援的 Liquid

您可以使用以下變數，透過 Liquid 自訂 Shopify 電子郵件訊息。

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

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

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

變數	說明
all_products	您商店的所有商品。
unsubscribe_link	此變數提供取消訂閱連結的存取權限。如果您建立了自訂程式碼的電子郵件，此變數為必填項目。
open_tracking	此變數可讓您存取預先格式化的「開啟追蹤」區塊。如果您建立了自訂程式碼的電子郵件，並啟用開啟追蹤，則此變數為必填項目。
data.customer.*	此變數提供下列顧客資料屬性的存取權限： 名字 姓氏 電子郵件 city 狀態 國家/地區 這些屬性無法用於 Liquid 篩選條件或 Liquid 條件。
email.*	此變數提供下列電子郵件屬性的存取權限： 「subject」顯示電子郵件的主旨行。 「preview_text」顯示電子郵件的預覽文字。
shop.*	此變數提供下列商店屬性的存取權限： 「name」顯示商店名稱。 「domain」顯示商店主要網域。 「url」顯示商店網址。 「shopify_domain」顯示商店的 Shopify 網域。 「address」顯示商店地址，可將存取權限授予下列地址屬性： address1 address2 city 國家/地區 電話 province 郵遞區號 「branding」顯示商店品牌，可將存取權限授予下列屬性： accent_section_color background_primary_color background_border_color body_text_color button_background_and_link_color button_label_color footer_link_color footer_text_color footer_background_color social_link_facebook social_link_twitter social_link_instagram social_link_pinterest shop_name logo，直接轉譯為「img」標籤。

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

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

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

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

變數	說明
abandoned_checkout.*	此變數提供對以下未完成結帳作業屬性的存取權限： 「url」顯示未完成結帳作業的網址。 「line_items」顯示未完成結帳作業的前五個商品項目。此外，每個 line_items 物件也包含各個商品的下列屬性： 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	擷取登陸網站的引用參數。這些引用參數可以是：ref、source、r。 若 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_link 變數。如果已啟用「開啟追蹤」功能，則您同時還需有 open_tracking 變數。

雖然這些變數可以插入電子郵件程式碼中的任何位置，但最常見的位置為電子郵件的頁尾區段，如下所示：

<div id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>

自訂 Liquid 程式碼範例

您可以在程式碼編輯器中新增自訂 Liquid 或 HTML。下列程式碼範例說明如何新增 Liquid 程式碼，在電子郵件訊息中顯示商店名稱、自訂按鈕和自訂尺寸的圖片。

<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>