新增 Shopify 電子郵件自訂 Liquid 區段

發展業務

如果您需要有關為 Shopify 電子郵件訊息建立自訂程式碼的協助，可以聘僱 Shopiy 專家。

新增自訂 Liquid 區段可讓您在 Shopify 電子郵件訊息中輸入自訂 Liquid 或 HTML。

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

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

考量事項

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

• 程式碼中使用的變數必須是自訂 Liquid 區段支援的變數。
• 輸入的程式碼大小不可超過 50KB。
• 您僅能使用桌上型裝置來建立自訂 Liquid 區段。

自訂 Liquid 區段支援的 Liquid 變數

您可以在自訂 Liquid 區段中使用下列變數自訂 Shopify 電子郵件訊息。

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

變數	說明
abandoned_checkout	此變數提供對以下未完成結帳作業屬性的存取權限： 「url」顯示未完成結帳作業的網址。 「line_items」顯示未完成結帳作業的前五個商品項目。此外，每個 line_items 物件也包含各個商品的下列屬性： product_title variant_title 數量 如果未完成結帳作業中含有超過五個商品項目，「remaining_products_count」會顯示剩餘商品項目的數量。 電子郵件是未完成結帳作業行銷自動化流程的一部分時，系統才會填入「abandoned_checkout」變數。否則變數將為「null」。
abandoned_visit	此變數提供下列放棄的購物車或放棄的商品瀏覽屬性的存取權限： 「url」顯示未完成結帳作業的網址。 「products_added_to_cart」顯示在放棄的造訪中加入購物車的前五個商品項目。此外，每個 products_added_to_cart 物件也包含各個商品的下列屬性： 標題 image_url variant_title 數量 「products_viewed」顯示在放棄的造訪中所瀏覽的前五項商品。此外，每個 products_viewed 物件也包含各個商品的下列屬性： 標題 說明 image_url URL 如果未完成結帳作業中含有超過五個商品項目，「remaining_cart_products_count」會顯示剩餘商品項目的數量。 電子郵件是放棄的購物車或放棄的商品瀏覽行銷自動化流程的一部分時，系統才會填入「abandoned_visit」變數。否則變數將為「null」。
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 區段後，您可以在程式碼編輯器中新增您的自訂 Liquid 或 HTML。

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

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