将自定义 Liquid 添加到 Shopify Email 宣传活动

拓展您的业务

如果您需要有关为 Shopify Email 消息创建自定义代码的帮助，那么您可以聘请 Shopiy 合作伙伴。

您可以通过添加自定义 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 邮件。

Shopify Email 支持的 Liquid 变量的描述

变量	描述
unsubscribe_link	此变量授予对取消订阅链接的访问权限。如果您创建自定义编码的电子邮件，则此变量是必填项。
open_tracking	此变量授予对预先设置格式的打开情况跟踪块的访问权限。如果您创建自定义编码的电子邮件并激活打开情况跟踪，则此变量是必填项。
abandoned_checkout	此变量可提供对弃单的以下属性的访问权限： url 显示弃单的 URL。 line_items 显示弃单的前五个订单项目。此外，每个 line_items 对象还包含有关每种产品的以下属性： image_url product_title variant_title quantity 如果弃单中包含超过 5 个订单项目，remaining_products_count 将显示剩余的订单项目计数。 只有当电子邮件包含在弃单营销自动化中时，变量 abandoned_checkout 才会填充。否则，变量将为 null。
abandoned_visit	此变量可提供对弃单或浏览的以下属性的访问权限： url 显示弃单的 URL。 products_added_to_cart 显示弃单访问中添加的前五个产品订单项目。此外，每个 products_added_to_cart 对象还包含有关每种产品的以下属性： title image_url variant_title quantity products_viewed 显示弃单访问期间查看的前五种产品。此外，每个 products_viewed 对象还包含有关每个产品的以下属性： title 描述 image_url URL 如果弃单中包含超过 5 个订单项目，remaining_cart_products_count 将显示剩余的订单项目计数。 只有当电子邮件包含在弃购或浏览产品但未加购营销自动化中时，变量 abandoned_visit 才会填充。否则，变量将为 null。
data.customer.*	此变量可提供以下客户数据属性的访问权限： first_name last_name email city 状态 国家/地区 这些属性不能用在 Liquid 筛选条件或 Liquid 条件中。
email.*	此变量可提供以下电子邮件属性的访问权限： subject 显示电子邮件的主题行。 preview_text 显示电子邮件的预览文本。
shop.*	此变量可提供以下商店属性的访问权限： name 显示商店名称。 domain 显示商店主域名。 url 显示商店 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 电子邮件时，需要包含 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>