添加 Shopify Email 自定义 Liquid 分区

通过添加自定义 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>

    准备好开始使用 Shopify 进行销售了吗?

    免费试用