新增 Shopify 電子郵件自訂 Liquid 區段
此頁面列印時間為 May 30, 2023。如須最新版本,請至 https://help.shopify.com/zh-TW/manual/promoting-marketing/create-marketing/shopify-email/create-email/custom-liquid。
新增自訂 Liquid 區段可讓您在 Shopify 電子郵件訊息中輸入自訂 Liquid 或 HTML。
Liquid 是 Shopify 簡單又易於使用的程式語言,與建立 Shopify 佈景主題商店中的主題所使用的程式語言相同。
您可以使用自訂 Liquid 區段來顯示自訂資產,例如並排顯示的圖片、自訂按鈕、自訂尺寸的圖片和自訂區段尺寸。
考量事項
開始新增自訂 Liquid 至 Shopify 電子郵件訊息之前,請先檢視下列考量事項。
- 程式碼中使用的變數必須是自訂 Liquid 區段支援的變數。
- 輸入的程式碼大小不可超過 50KB。
- 您僅能使用桌上型裝置來建立自訂 Liquid 區段。
自訂 Liquid 區段支援的 Liquid 變數
您可以在自訂 Liquid 區段中使用下列變數自訂 Shopify 電子郵件訊息。
變數 | 說明 |
---|---|
abandoned_checkout |
此變數提供對以下未完成結帳作業屬性的存取權限:
電子郵件是未完成結帳作業行銷自動化流程的一部分時,系統才會填入「 |
abandoned_visit |
此變數提供下列放棄的購物車或放棄的商品瀏覽屬性的存取權限:
電子郵件是放棄的購物車或放棄的商品瀏覽行銷自動化流程的一部分時,系統才會填入「 |
data.customer.* |
此變數提供下列顧客資料屬性的存取權限: 名字 姓氏 電子郵件 city 狀態 國家/地區 這些屬性無法用於 Liquid 篩選條件或 Liquid 條件。 |
email.* |
此變數提供下列電子郵件屬性的存取權限: subject 」顯示電子郵件的主旨行。preview_text 」顯示電子郵件的預覽文字。 |
shop.* |
此變數提供下列商店屬性的存取權限:
name 」顯示商店名稱。domain 」顯示商店主要網域。url 」顯示商店網址。shopify_domain 」顯示商店的 Shopify 網域。
|
自訂 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>