将自定义 Liquid 添加到 Shopify Email 宣传活动
您可以通过添加自定义 Liquid 分区或创建完全自定义编码的电子邮件来向 Shopify Email 邮件中添加自定义编码。通过这些选项,您可以输入自定义 Liquid 或 HTML。
Liquid 是 Shopify 的简单易用的编程语言,也是构建 Shopify 模板商店中的模板时所采用的编程语言。
您可以使用自定义 Liquid 显示自定义资产,例如并排图片、自定义按钮、自定义大小的图片和自定义分区大小。
注意事项
在开始向 Shopify Email 消息中添加自定义 Liquid 之前,请查看以下注意事项:
- 代码中包含的变量需要受自定义 Liquid 支持。
- 您只能使用台式设备创建自定义 Liquid 分区。
- 自定义 Liquid 电子邮件中需要包含
unsubscribe_link
变量。如果您激活了打开情况跟踪,则还需要open_tracking
变量。详细了解如何向电子邮件中添加所需变量。 - 您输入的代码具有以下限制:
- 自定义 Liquid 分区的最大大小为 50 千字节 (KB)。
- 自定义编码的 Liquid 电子邮件的最大大小为 500 KB。
自定义 Liquid 中支持的 Liquid 变量
您可以通过 Liquid 使用以下变量来自定义 Shopify Email 邮件。
变量 | 描述 |
---|---|
unsubscribe_link |
此变量授予对取消订阅链接的访问权限。如果您创建自定义编码的电子邮件,则此变量是必填项。 |
open_tracking |
此变量授予对预先设置格式的打开情况跟踪块的访问权限。如果您创建自定义编码的电子邮件并激活打开情况跟踪,则此变量是必填项。 | 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 电子邮件时,需要包含 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>