使用 Liquid 自定义您的 Shopify Messaging 宣传活动

Liquid 是 Shopify 开发的一种简单易用的编程语言,Shopify Theme Store 中的模板也是用这种编程语言构建的。

您可以通过创建完全自定义编码的电子邮件或向模板添加自定义 Liquid 分区来使用自定义 Liquid 增强 Shopify Messaging 消息。这些选项可让您输入自定义 Liquid 或 HTML。

您可以使用自定义 Liquid 来显示自定义资产,例如并排图片、自定义按钮、自定义尺寸的图片和自定义分区尺寸。

注意事项

在开始向 Shopify Messaging 消息添加自定义 Liquid 之前,请查看以下注意事项:

  • 您在代码中包含的变量必须是自定义 Liquid 支持的变量
  • 您只能在台式电脑上创建自定义 Liquid 分区。
  • 在自定义 Liquid 电子邮件中,必须提供 unsubscribe_linkunsubscribe_url 变量。如果您已激活打开情况跟踪,则还必须提供 open_tracking 变量。详细了解如何向您的电子邮件添加必需变量
  • 您输入的代码有以下限制:
    • 自定义 Liquid 分区的最大大小为 50 KB。
    • 自定义编码的 Liquid 电子邮件最大大小为 500 KB。

使用 Liquid 创建自定义编码的电子邮件

如果您想在创建电子邮件时使用自定义 Liquid 代码,则可以添加自定义 Liquid 分区,或者在创建 Shopify Messaging 宣传活动时选择 Code your own(自行编码)以完全通过自定义 Liquid 代码创建电子邮件。

自定义 Liquid 中支持的 Liquid 变量

您可以使用支持的变量通过 Liquid 自定义 Shopify Messaging 电子邮件消息。您可以查看以下类型模板的支持的 Liquid 变量列表:

所有电子邮件模板均支持的 Liquid 变量

您可以使用以下变量通过 Liquid 自定义任何 Shopify Messaging 电子邮件消息。

Shopify Messaging 支持的 Liquid 变量的描述
变量描述
all_products
您商店中的所有产品
customer.accepts_marketing
如果客户接受营销,则返回 true;否则返回 false
customer.addresses
返回与客户关联的所有地址。
customer.addresses_count
返回与客户关联的地址数。
customer.b2b?
如果客户是 B2B 客户,则返回 true;否则返回 false
customer.current_location
返回客户当前选择的公司地点。
customer.default_address
返回客户的默认地址。
customer.email
返回客户的电子邮件地址。
customer.first_name
返回客户的名字。
customer.has_account
如果客户的电子邮件与客户账户相关联,则返回 true;否则返回 false
customer.has_avatar?
如果客户的账户有关联的头像,则返回 `true`;否则返回 `false`。
customer.id
返回客户的 ID。
customer.last_name
返回客户的姓氏。
customer.last_order
返回客户下的最后一个订单,不包括测试订单。
customer.name
返回客户的全名。
customer.orders
返回客户下的所有订单。
customer.orders_count
返回客户下的订单总数。
customer.payment_methods
返回客户保存的付款方式。
customer.phone
返回客户的电话号码。仅当客户在结账时使用了电话号码、选择接收 SMS 通知,或者您已手动将其添加到客户账户时,系统才会填充电话号码。
customer.store_credit_account.balance

以与相关上下文关联的货币返回客户的商店抵扣额余额。例如:

{{customer.store_credit_account.balance | money_with_currency}}
customer.tags
返回与客户关联的标记。
customer.tax_exempt
如果客户免税,则返回 `true`;否则返回 `false`。
customer.total_spent
返回客户在您商店的所有订单上花费的总金额。
email.*

此变量可用于访问以下电子邮件属性:

  • subject 显示电子邮件的主题行。
  • preview_text 显示电子邮件的预览文本。
  • open_tracking
    此变量可用于访问预设格式的 打开情况跟踪 块。如果您创建了 自定义编码的电子邮件 并且已激活“打开情况跟踪”,则此变量为必需项。
    shop.*
    此变量可用于访问以下商店属性:
  • name 显示商店名称。
  • domain 显示商店主域名。
  • url 显示商店 URL。
  • shopify_domain 显示商店 Shopify 域名。
    • 地址 显示商店地址,可用于访问以下地址属性:
      • address1
      • address2
      • city
      • country
      • phone
      • province
      • zip
    unsubscribe_url
    此变量可用于访问原始的取消订阅 URL,并且可以自定义。如果您创建 自定义编码的电子邮件,则必须包含 `unsubscribe_url` 或 `unsubscribe_link` 变量。`unsubscribe_url` 和 `unsubscribe_link` 都将始终指向主在线商店域名,并且无法修改以定向到其他位置。

    弃单营销邮件支持的 Liquid 变量

    您可以使用以下变量通过 Liquid 自定义您的弃单 Shopify Messaging 电子邮件消息。

    仅当电子邮件是 弃单营销自动化 的一部分时,才会填充 `abandoned_checkout` 变量。否则,该变量为 `null`。

    适用于“浏览产品但未加购”、“弃购物车”和“弃单”的 Shopify Messaging Liquid 变量说明
    变量描述
    abandoned_checkout.*

    此变量可用于访问弃单的以下属性:

    • url 显示弃单的 URL。
    • 订单项目 显示弃单的前五个订单项目。此外,每个 订单项目 对象都包含有关每个产品的以下属性:
      • components
      • image_url
      • product_title
      • variant_title
      • quantity
    • line_items.components 显示弃单的组成产品。此外,每个 组成产品 对象都包含有关每个组成产品的以下属性:
      • image_url
      • quantity
      • product_title
      • variant_title
    • remaining_products_count 显示剩余订单项目的数量(如果弃单中有超过五个订单项目)。
    id
    (checkout ID)
    结账的唯一 ID,供内部使用。
    shop
    您的 Shopify 商店名称。
    name
    弃单的名称,也称为结账编号。
    total_price
    订单的总价(小计 + 发货成本 - 运费折扣 + 税款)。
    shipping_price

    运费。

    示例:{{ shipping_price | money }}

    shipping_address
    收货地址
    billing_address
    账单地址
    line_items
    弃单中所有订单项目的列表。
    unavailable_line_items
    弃单中所有不可用的订单项目的列表。
    note
    附加到弃单的备注。
    landing_site

    客户使用的登录网站的路径。这是客户访问商店时访问的第一个页面。

    示例:/products/great-product?ref=my-tracking-token

    landing_site_ref

    从登录网站中提取引用参数。引用参数可以是:refsourcer

    如果 `landing_site` 是 `/products/great-product?ref=my-tracking-token`,则 landing_site_ref 为 `my-tracking-token`。如果您的引用参数等于某个特定值,您可以执行特定操作:

    {% if landing_site_ref == 'my-tracking-token' %}
    My action...
    {% endif %}
    referring_site

    将客户引导至您商店的推荐人的 URL。

    示例:https://www.google.com/?s=great+products

    created_at

    客户创建其弃单的结账的日期和时间。

    closed_at

    结账关闭的日期和时间。

    customer_locale
    客户区域设置的双字母或三字母语言代码,可选择后跟区域修饰符。例如,
    en
    en-CA
    item_count
    所有商品的总数量。
    unique_gateways
    结账时可用的不同支付服务提供商的列表。
    discount
    应用于弃单中的购物车或订单项目的折扣。
    discounts
    应用于结账的折扣列表。
    successfully_applied_discounts
    已成功应用于结账的折扣。
    discounts_amount

    所有折扣应用的总金额。

    示例:+$5.00

    discounts_savings

    所有折扣带来的节省金额。

    示例:-$5.00

    buyer_accepts_marketing
    返回
    true
    false
    ,具体取决于客户在弃单期间是否接受营销。
    subtotal_line_items
    用于计算结账时小计价格的订单项目,不包括任何小费订单项目。
    requires_shipping
    返回
    true
    (如果结账中至少有一件商品需要发货)。
    subtotal_price
    结账时订单项目的小计价格。
    email
    与弃单关联的电子邮件。
    shop_name
    您的商店名称。
    tax_lines

    按税种细分的税款:

    {% for tax_line in tax_lines %}
    {{ tax_line.title }} ({{ tax_line.rate_percentage }}%) : {{ tax_line.price | money_with_currency  }}
    {% endfor %}
    tax_price
    结账中所有商品的总税款。
    attributes

    附加到弃单的任何属性

    示例:{{ attributes.gift-note }}

    shipping_method
    有关结账时可用的第一种发货方式的信息。
    shipping_methods
    结账时可用的发货方式。
    free
    返回
    true if the total price of the checkout is zero.
    free_shipping
    返回
    true
    (如果结账不需要发货,或运费为零)。
    different_billing_address
    返回
    true
    false
    ,具体取决于收货地址是否与账单地址相同。
    customer
    包含客户输出属性的客户对象。
    gift_cards
    应用于结账的礼品卡。
    gift_cards_amount
    将通过礼品卡支付的结账金额。
    transactions
    结账的交易。
    shareable_url
    订单项目中第一个产品的 URL。
    shareable_title
    第一个订单项目的产品标题。
    total_tip
    客户在结账时添加的总小费。
    discount_applications
    描述商品在结账时获得折扣的原因和方式。
    cart_level_discount_applications
    针对购物车的折扣应用。
    currency
    弃单的货币。
    line_items_subtotal_price
    在应用任何订单项目折扣后,结账中所有订单项目的价格总和。

    用于放弃浏览和弃购电子邮件的 Liquid 变量

    仅当电子邮件属于弃购或放弃产品浏览营销自动化的一部分时,系统才会填充 abandoned_visit.* 变量。请查看此变量可供访问的以下属性。

    Shopify Messaging 支持的 Liquid 变量的描述
    变量描述
    abandoned_visit.*

    此变量可用于访问弃购或放弃浏览的以下属性:

    • url 可显示弃购或放弃浏览的 URL。
    • products_added_to_cart 可显示添加到已放弃访问的购物车中的前五个产品订单项目。此外,每个 products_added_to_cart 对象都包含有关每个产品的以下属性:
      • title
      • image_url
      • variant_title
      • quantity
    • products_viewed 可显示在放弃访问期间浏览的前五个产品。此外,每个 products_viewed 对象都包含有关每个产品的以下属性:
      • title
      • description
      • image_url
      • url
      • image_alt_text
    • 如果弃单中有超过五个订单项目,remaining_cart_products_count 会显示剩余订单项目的数量。

    使用必需的变量

    创建自定义 Liquid 电子邮件时,必须包含 unsubscribe_linkunsubscribe_url 变量。如果您已启用打开情况跟踪,则还必须包含 open_tracking 变量。

    虽然这些变量可以插入到您电子邮件代码的任何位置,但最常见的做法是将它们添加到电子邮件的页脚部分,如以下示例所示:

    <div id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>

    自定义 Liquid 代码示例

    您可以在代码编辑器中添加自定义 Liquid 或 HTML。以下代码是一个示例,说明了如何添加 Liquid 代码以在电子邮件消息中显示您的商店名称、自定义按钮和自定义尺寸的图片。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{ shop.name }} Newsletter</title>
    </head>
    <body style="margin: 0; padding: 0; font-family: Arial, sans-serif; line-height: 1.5; color: #333333; background-color: #f5f5f5;">
        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #f5f5f5;">
            <tr>
                <td align="center" style="padding: 20px;">
                    <table cellpadding="0" cellspacing="0" border="0" width="600" style="background-color: #ffffff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                        <!-- Header -->
                        <tr>
                            <td align="center" style="background-color: #4a6de5; padding: 30px 20px; color: #ffffff;">
                                <h1 style="margin: 0; font-size: 28px; font-weight: bold;">{{ shop.name }}</h1>
                                <p style="margin: 10px 0 0; font-size: 16px;">Your Book Journey with Us</p>
                            </td>
                        </tr>
    
                        <!-- Content -->
                        <tr>
                            <td style="padding: 30px 20px;">
                                <!-- Greeting Section -->
                                <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 30px;">
                                    <tr>
                                        <td>
                                            <h2 style="margin: 0 0 15px; font-size: 22px; color: #222222;">Hello {{ customer.name }}!</h2>
                                            <p style="margin: 0 0 15px; font-size: 15px;">We hope this email finds you well. We noticed you're from {{ customer.default_address.city }}.</p>
                                            {% if customer.email %}
                                                <p style="margin: 0 0 15px; font-size: 15px;">Your registered email is: {{ customer.email }}</p>
                                            {% endif %}
                                        </td>
                                    </tr>
                                </table>
    
                                <!-- Reading Journey Section -->
                                <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 30px;">
                                    <tr>
                                        <td>
                                            <h2 style="margin: 0 0 15px; font-size: 20px; color: #4a6de5;">Your Reading Journey</h2>
                                            <p style="margin: 0 0 15px; font-size: 15px;">Thank you for being a loyal customer! Here's a snapshot of your journey:</p>
                                            <p style="margin: 0 0 15px; font-size: 15px;">You purchased {{ customer.orders_count }} books with us.</p>
                                            {% if customer.last_order %}
                                                <p style="margin: 0 0 15px; font-size: 15px;"> You last read {{customer.last_order.line_items[0].title}}. Great choice! </p>
                                              {% endif %}
                                        </td>
                                    </tr>
                                </table>
    
                                <!-- Recommended Books Section -->
                                <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 30px;">
                                    <tr>
                                        <td>
                                            <h2 style="margin: 0 0 15px; font-size: 20px; color: #4a6de5;">Books You Might Love</h2>
                                            <p style="margin: 0 0 15px; font-size: 15px;">Based on your reading preferences, we've handpicked these titles just for you:</p>
    
                                            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                                <tr>
                                                    <td width="50%" style="padding-right: 10px;">
                                                        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #f9f9f9; border-radius: 4px; padding: 15px;">
                                                            <tr>
                                                                <td align="center">
                                                                    <!-- Image with proper email attributes -->
                                                                    <img src="https:{{ all_products['product-1-handle'] | image_url: width: 200 }}"
                                                                         alt="Product 1"
                                                                         width="200"
                                                                         height="200"
                                                                         style="display: block; border: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;"
                                                                         title="Product 1"
                                                                         border="0">
                                                                    <h3 style="margin: 0 0 10px; font-size: 16px; color: #333333;">{{ all_products['product-1-handle'].title }}</h3>
                                                                    <p style="margin: 0 0 10px; font-size: 15px; color: #4a6de5;">${{ all_products['product-1-handle'].price }}</p>
                                                                    <a href="{{shop.domain}}{{ all_products['product-1-handle'].url }}" style="display: inline-block; background-color: #4a6de5; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 4px; font-size: 14px;">View Book</a>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                    <td width="50%" style="padding-left: 10px;">
                                                        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #f9f9f9; border-radius: 4px; padding: 15px;">
                                                            <tr>
                                                                <td align="center">
                                                                    <!-- Image with proper email attributes -->
                                                                    <img src="https:{{ all_products['product-2-handle'] | image_url: width: 200 }}"
                                                                         alt="Product 2"
                                                                         width="200"
                                                                         height="200"
                                                                         style="display: block; border: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;"
                                                                         title="Product 2"
                                                                         border="0">
                                                                    <h3 style="margin: 0 0 10px; font-size: 16px; color: #333333;">{{ all_products['product-2-handle'].title }}</h3>
                                                                    <p style="margin: 0 0 10px; font-size: 15px; color: #4a6de5;">${{ all_products['product-2-handle'].price }}</p>
                                                                    <a href="{{shop.domain}}{{ all_products['product-2-handle'].url }}" style="display: inline-block; background-color: #4a6de5; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 4px; font-size: 14px;">View Book</a>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
    
                                <!-- Book Club Section -->
                                <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 30px;">
                                    <tr>
                                        <td style="background-color: #f5f7ff; border-radius: 4px; padding: 25px; text-align: center;">
                                            <h2 style="margin: 0 0 15px; font-size: 18px; color: #333333;">This Month's Top Picks</h2>
                                            <p style="margin: 0 0 20px; font-size: 15px;">Discover what other readers are loving this month:</p>
                                            <a href="{{ shop.url }}/pages/book-club" style="display: inline-block; background-color: #4a6de5; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 4px; font-size: 14px;">Join Our Book Club</a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
    
                        <!-- Footer -->
                        <tr>
                            <td style="background-color: #f2f2f2; padding: 30px 20px; text-align: center;">
                                <p style="margin: 0 0 15px; font-size: 15px;">Best regards,<br><strong>{{ shop.name }} Team</strong></p>
                                <p style="margin: 0 0 15px; font-size: 12px; color: #999999;">© {{ 'now' | date: '%Y' }} {{ shop.name }}. All rights reserved.</p>
                                <p style="margin: 0 0 15px; font-size: 12px;">{{ open_tracking_block }}</p>
                                <a href="{{ unsubscribe_url }}" style="color: #999999; font-size: 12px; text-decoration: underline;">{{ unsubscribe_link }}</a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
    </html>