添加 Shopify Email 自定义 Liquid 分区
已于 Jun 10, 2023 打印了此页面。若要查看当前版本,请访问 https://help.shopify.com/zh-CN/manual/promoting-marketing/create-marketing/shopify-email/create-email/custom-liquid。
通过添加自定义 Liquid 分区,您可以在 Shopify Email 消息中输入自定义 Liquid 或 HTML。
Liquid 是 Shopify 的简单易用的编程语言,也是构建 Shopify 模板商店中的模板时所采用的编程语言。
您可以使用自定义 Liquid 分区显示自定义资产,例如并排图片、自定义按钮、自定义大小的图片和自定义分区大小。
注意事项
在开始向 Shopify Email 消息中添加自定义 Liquid 之前,请查看以下注意事项。
- 代码中包含的变量需要受自定义 Liquid 分区支持。
- 您输入的代码已超过 50 KB。
- 您只能使用台式设备创建自定义 Liquid 分区。
自定义 Liquid 分区支持的 Liquid 变量
您可以在自定义 Liquid 分区中使用以下变量自定义 Shopify 电子邮件消息。
变量 | 描述 |
---|---|
abandoned_checkout |
此变量可提供对弃单的以下属性的访问权限:
只有当电子邮件包含在弃单营销自动化中时,变量 |
abandoned_visit |
此变量可提供对弃单或浏览的以下属性的访问权限:
只有当电子邮件包含在弃购或浏览产品但未加购营销自动化中时,变量 |
data.customer.* |
此变量可提供以下客户数据属性的访问权限: first_name last_name email city 状态 国家/地区 这些属性不能用在 Liquid 筛选条件或 Liquid 条件中。 |
email.* |
此变量可提供以下电子邮件属性的访问权限: subject 显示电子邮件的主题行。preview_text 显示电子邮件的预览文本。 |
shop.* |
此变量可提供以下商店属性的访问权限:
name 显示商店名称。domain 显示商店主域名。url 显示商店 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>