添加 Shopify Email 自定义 Liquid 分区

拓展您的业务

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

通过添加自定义 Liquid 分区，您可以在 Shopify Email 消息中输入自定义 Liquid 或 HTML。

Liquid 是 Shopify 的简单易用的编程语言，也是构建 Shopify 模板商店中的模板时所采用的编程语言。

您可以使用自定义 Liquid 分区显示自定义资产，例如并排图片、自定义按钮、自定义大小的图片和自定义分区大小。

注意事项

在开始向 Shopify Email 消息中添加自定义 Liquid 之前，请查看以下注意事项。

• 代码中包含的变量需要受自定义 Liquid 分区支持。
• 您输入的代码已超过 50 KB。
• 您只能使用台式设备创建自定义 Liquid 分区。

自定义 Liquid 分区支持的 Liquid 变量

您可以在自定义 Liquid 分区中使用以下变量自定义 Shopify 电子邮件消息。

Shopify Email 支持的 Liquid 变量的描述

变量	描述
abandoned_checkout	此变量可提供对弃单的以下属性的访问权限： url 显示弃单的 URL。 line_items 显示弃单的前五个订单项目。此外，每个 line_items 对象还包含有关每种产品的以下属性： 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 代码的示例

将自定义 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>