Tùy chỉnh chiến dịch Shopify Messaging bằng Liquid

Liquid là ngôn ngữ lập trình đơn giản, dễ sử dụng của Shopify và cũng là ngôn ngữ lập trình dùng để xây dựng các chủ đề trong Shopify Theme Store.

Có thể dùng Liquid tùy chỉnh để cải thiện tin nhắn Shopify Messaging bằng cách tạo email hoàn toàn bằng mã tùy chỉnh hoặc thêm phần Liquid tùy chỉnh vào mẫu. Các tùy chọn này cho phép nhập Liquid hoặc HTML tùy chỉnh.

Có thể dùng Liquid tùy chỉnh để hiển thị nội dung tùy chỉnh như hình ảnh cạnh nhau, nút tùy chỉnh, hình ảnh có kích thước tùy chỉnh và kích thước phần tùy chỉnh.

Trên trang này

Lưu ý

Xem xét các lưu ý sau trước khi bắt đầu thêm Liquid tùy chỉnh vào tin nhắn Shopify Messaging:

Các biến đưa vào mã phải được Liquid tùy chỉnh hỗ trợ.
Chỉ có thể dùng máy tính để bàn để tạo phần Liquid tùy chỉnh.
Bắt buộc phải có biến unsubscribe_link hoặc unsubscribe_url trong email Liquid tùy chỉnh. Nếu đã kích hoạt tính năng theo dõi lượt mở, biến open_tracking cũng là bắt buộc. Tìm hiểu thêm về cách thêm các biến bắt buộc vào email.
Mã đã nhập có các giới hạn sau:
- Tối đa 50 kilobyte (KB) đối với các phần Liquid tùy chỉnh.
- Tối đa 500 KB đối với email có mã Liquid tùy chỉnh.

Tạo email bằng mã tùy chỉnh bằng Liquid

Để dùng mã Liquid tùy chỉnh khi tạo email, có thể thêm phần Liquid tùy chỉnh hoặc tạo email hoàn toàn từ mã Liquid tùy chỉnh bằng cách chọn Tự viết mã (Code your own) khi tạo chiến dịch Shopify Messaging.

Các biến Liquid được hỗ trợ trong Liquid tùy chỉnh

Có thể sử dụng các biến được hỗ trợ để tùy chỉnh tin nhắn email Shopify Messaging bằng Liquid. Có thể xem lại danh sách biến Liquid được hỗ trợ cho các loại mẫu sau:

Các biến Liquid được hỗ trợ cho mọi mẫu email

Có thể dùng các biến sau để tùy chỉnh mọi tin nhắn email Shopify Messaging bằng Liquid.

Mô tả các biến Liquid được Shopify Messaging hỗ trợ
Biến	Mô tả
all_products	Tất cả sản phẩm trên cửa hàng.
customer.accepts_marketing	Trả về `true` nếu khách hàng chấp nhận tiếp thị và trả về `false` nếu không.
customer.addresses	Trả về tất cả địa chỉ liên kết với khách hàng.
customer.addresses_count	Trả về số lượng địa chỉ liên kết với khách hàng.
customer.b2b?	Trả về `true` nếu khách hàng là khách hàng B2B và trả về `false` nếu không.
customer.current_location	Trả về địa điểm công ty hiện được chọn cho khách hàng.
customer.default_address	Trả về địa chỉ mặc định của khách hàng.
customer.email	Trả về địa chỉ email của khách hàng.
customer.first_name	Trả về tên của khách hàng.
customer.has_account	Trả về `true` nếu email của khách hàng liên kết với tài khoản khách hàng và trả về `false` nếu không.
customer.has_avatar?	Trả về `true` nếu khách hàng có hình đại diện liên kết với tài khoản và trả về `false` nếu không.
customer.id	Trả về ID của khách hàng.
customer.last_name	Trả về họ của khách hàng.
customer.last_order	Trả về đơn hàng gần nhất khách hàng đã đặt, không bao gồm đơn hàng đặt thử.
customer.name	Trả về họ tên đầy đủ của khách hàng.
customer.orders	Trả về tất cả đơn hàng khách hàng đã đặt.
customer.orders_count	Trả về tổng số đơn hàng khách hàng đã đặt.
customer.payment_methods	Trả về các phương thức thanh toán đã lưu của khách hàng.
customer.phone	Trả về số điện thoại của khách hàng. Số điện thoại chỉ điền tự động nếu khách hàng đã dùng số điện thoại khi thanh toán, đã chọn nhận thông báo SMS hoặc nếu bạn đã thêm số điện thoại đó vào tài khoản khách hàng theo cách thủ công.
customer.store_credit_account.balance	Trả về số dư tín dụng cửa hàng của khách hàng bằng loại tiền tệ liên kết với ngữ cảnh phù hợp. Ví dụ: `{{customer.store_credit_account.balance \| money_with_currency}}`
customer.tags	Trả về các thẻ liên kết với khách hàng.
customer.tax_exempt	Trả về `true` nếu khách hàng được miễn thuế và trả về `false` nếu không.
customer.total_spent	Trả về tổng số tiền khách hàng đã chi tiêu cho tất cả đơn hàng từ cửa hàng của bạn.
email.*	Biến này cho phép truy cập các thuộc tính email sau: `subject` hiển thị dòng chủ đề của email. `preview_text` hiển thị văn bản xem trước của email.
open_tracking	Biến này cho phép truy cập vào khối theo dõi lượt mở (email) được định dạng sẵn. Biến này là bắt buộc nếu bạn tạo email có mã tùy chỉnh và đã kích hoạt tính năng theo dõi lượt mở.
shop.*	Biến này cho phép truy cập các thuộc tính cửa hàng sau: `name` hiển thị tên cửa hàng. `domain` hiển thị miền chính của cửa hàng. `url` hiển thị URL của cửa hàng. `shopify_domain` hiển thị miền Shopify của cửa hàng. `address` hiển thị địa chỉ cửa hàng, cho phép truy cập các thuộc tính địa chỉ sau: `address1` `address2` `city` `country` `phone` `province` `zip`
unsubscribe_url	Biến này cho phép truy cập URL hủy đăng ký thô và có thể tùy chỉnh. Nếu tạo email có mã tùy chỉnh, bạn phải thêm biến `unsubscribe_url` hoặc `unsubscribe_link`. Cả `unsubscribe_url` và `unsubscribe_link` sẽ luôn trỏ đến miền chính của cửa hàng trực tuyến và không thể sửa đổi để trỏ đến nơi khác.

Các biến Liquid được hỗ trợ cho email về giao dịch thanh toán bỏ dở

Bạn có thể sử dụng các biến sau để tùy chỉnh tin nhắn email Shopify Messaging về giao dịch thanh toán bỏ dở bằng Liquid.

Biến abandoned_checkout chỉ điền dữ liệu nếu email là một phần của quy trình tự động hóa tiếp thị đối với giao dịch thanh toán bỏ dở. Nếu không, biến này sẽ là null.

Mô tả về các biến Liquid do Shopify Messaging hỗ trợ cho phiên duyệt web, giỏ hàng và giao dịch thanh toán bỏ dở
Biến	Mô tả
abandoned_checkout.*	Biến này cho phép truy cập các thuộc tính sau của giao dịch thanh toán bỏ dở: `url` hiển thị URL của giao dịch thanh toán bỏ dở. `line_items` hiển thị 5 mục hàng đầu tiên của giao dịch thanh toán bỏ dở. Ngoài ra, mỗi `line_items` đều là một đối tượng chứa các thuộc tính sau về từng sản phẩm: `components` `image_url` `product_title` `variant_title` `quantity` `line_items.components` hiển thị các thành phần của giao dịch thanh toán bỏ dở. Ngoài ra, mỗi `components` đều là một đối tượng chứa các thuộc tính sau về từng thành phần: `image_url` `quantity` `product_title` `variant_title` `remaining_products_count` hiển thị số lượng mục hàng còn lại, nếu có nhiều hơn 5 mục hàng trong giao dịch thanh toán bỏ dở.
id (checkout ID)	Một ID duy nhất của trang thanh toán cho mục đích sử dụng nội bộ.
shop	Tên cửa hàng Shopify của bạn.
name	Tên của giao dịch thanh toán bỏ dở, còn gọi là số giao dịch thanh toán.
total_price	Tổng giá của đơn hàng (tổng phụ + chi phí vận chuyển - chiết khấu vận chuyển + thuế).
shipping_price	Giá vận chuyển. Ví dụ: `{{ shipping_price \| money }}`
shipping_address	Địa chỉ giao hàng.
billing_address	Địa chỉ thanh toán.
line_items	Danh sách tất cả mục hàng trong giao dịch thanh toán bỏ dở.
unavailable_line_items	Danh sách tất cả mục hàng trong giao dịch thanh toán bỏ dở hiện không có sẵn.
note	Ghi chú được đính kèm vào giao dịch thanh toán bỏ dở.
landing_site	Đường dẫn của trang đích mà khách hàng đã sử dụng. Đây là trang đầu tiên khách hàng truy cập khi đến cửa hàng. Ví dụ: `/products/great-product?ref=my-tracking-token`
landing_site_ref	Trích xuất một tham số tham chiếu từ trang đích. Các tham số tham chiếu có thể là: `ref`, `source`, `r`. Nếu `landing_site` là `/products/great-product?ref=my-tracking-token`, thì `landing_site_ref` là `my-tracking-token`. Bạn có thể thực hiện một hành động cụ thể nếu tham số tham chiếu của bạn bằng một giá trị nhất định: {% if landing_site_ref == 'my-tracking-token' %} My action... {% endif %}
referring_site	URL của nguồn giới thiệu đã đưa khách hàng đến cửa hàng của bạn. Ví dụ: `https://www.google.com/?s=great+products`
created_at	Ngày và giờ khách hàng tạo giao dịch thanh toán mà họ đã bỏ dở.
closed_at	Ngày và giờ khi trang thanh toán bị đóng.
customer_locale	Mã ngôn ngữ gồm hai hoặc ba chữ cái cho ngôn ngữ và vùng của khách hàng, có thể được theo sau bởi phần bổ nghĩa khu vực. Ví dụ: en , en-CA
item_count	Tổng số lượng của tất cả mặt hàng.
unique_gateways	Danh sách các nhà cung cấp dịch vụ thanh toán duy nhất có sẵn trên trang thanh toán.
discount	Khoản chiết khấu được áp dụng cho giỏ hàng hoặc mục hàng trong giao dịch thanh toán bỏ dở.
discounts	Danh sách các khoản chiết khấu được áp dụng cho trang thanh toán.
successfully_applied_discounts	Các khoản chiết khấu đã được áp dụng thành công cho trang thanh toán.
discounts_amount	Số tiền dưới dạng USD của chiết khấu được áp dụng từ tất cả các khoản chiết khấu. Ví dụ: +$5.00
discounts_savings	Số tiền tiết kiệm được dưới dạng USD từ tất cả các khoản chiết khấu. Ví dụ: -$5.00
buyer_accepts_marketing	Trả về true hoặc false tùy thuộc vào việc khách hàng có chấp nhận tiếp thị trong lúc diễn ra giao dịch thanh toán bỏ dở hay không.
subtotal_line_items	Các mục hàng được sử dụng để tính giá tổng phụ khi thanh toán, ngoại trừ các mục hàng tiền tip.
requires_shipping	Trả về true nếu có ít nhất một mặt hàng trong giao dịch thanh toán yêu cầu vận chuyển.
subtotal_price	Giá tổng phụ của các mục hàng khi thanh toán.
email	Email liên kết với giao dịch thanh toán bỏ dở.
shop_name	Tên cửa hàng.
tax_lines	Các khoản thuế được chia theo loại thuế: {% for tax_line in tax_lines %} {{ tax_line.title }} ({{ tax_line.rate_percentage }}%) : {{ tax_line.price \| money_with_currency }} {% endfor %}
tax_price	Tổng các khoản thuế của tất cả mặt hàng trong giao dịch thanh toán.
attributes	Bất kỳ thuộc tính nào được đính kèm vào giao dịch thanh toán bỏ dở. Ví dụ: `{{ attributes.gift-note }}`
shipping_method	Thông tin về phương thức vận chuyển đầu tiên có sẵn khi thanh toán.
shipping_methods	Các phương thức vận chuyển có sẵn khi thanh toán.
free	Trả về true if the total price of the checkout is zero.
free_shipping	Trả về true nếu giao dịch thanh toán không yêu cầu vận chuyển hoặc nếu giá vận chuyển bằng không.
different_billing_address	Trả về true hoặc false dựa trên việc địa chỉ giao hàng có giống với địa chỉ thanh toán hay không.
customer	Đối tượng khách hàng chứa các thuộc tính của kết quả đầu ra khách hàng.
gift_cards	Các thẻ quà tặng áp dụng cho giao dịch thanh toán.
gift_cards_amount	Số tiền của giá thanh toán sẽ được thanh toán bằng thẻ quà tặng.
transactions	Các giao dịch của quá trình thanh toán.
shareable_url	URL của sản phẩm đầu tiên trong các mục hàng.
shareable_title	Tên sản phẩm của mục hàng đầu tiên.
total_tip	Tổng số tiền tip khách hàng đã thêm khi thanh toán.
discount_applications	Mô tả lý do và cách thức một mặt hàng được giảm giá khi thanh toán.
cart_level_discount_applications	Các mức giảm giá áp dụng riêng cho giỏ hàng.
currency	Tiền tệ của giao dịch thanh toán bỏ dở.
line_items_subtotal_price	Tổng giá của tất cả các mục hàng trong giao dịch thanh toán, sau khi áp dụng bất kỳ khoản giảm giá mục hàng nào.

Các biến Liquid đối với email về duyệt xem sản phẩm bị bỏ dở và giỏ hàng chưa thanh toán

Biến abandoned_visit.* chỉ điền dữ liệu nếu email thuộc một quy trình tự động hóa tiếp thị đối với giỏ hàng chưa thanh toán hoặc duyệt xem sản phẩm bị bỏ dở. Hãy xem xét các thuộc tính sau mà biến này cấp quyền truy cập.

Mô tả các biến Liquid được Shopify Messaging hỗ trợ
Biến	Mô tả
abandoned_visit.*	Biến này cấp quyền truy cập vào các thuộc tính sau của giỏ hàng chưa thanh toán hoặc duyệt xem sản phẩm bị bỏ dở: `url` hiển thị URL của giỏ hàng chưa thanh toán hoặc lượt duyệt xem bị bỏ dở. `products_added_to_cart` hiển thị 5 mục hàng sản phẩm đầu tiên được thêm vào giỏ hàng của lượt truy cập bị bỏ dở. Ngoài ra, mỗi `products_added_to_cart` đối tượng đều chứa các thuộc tính sau về từng sản phẩm: `title` `image_url` `variant_title` `quantity` `products_viewed` hiển thị 5 sản phẩm đầu tiên được xem trong lượt truy cập bị bỏ dở. Ngoài ra, mỗi `products_viewed` đối tượng đều chứa các thuộc tính sau về từng sản phẩm: `title` `description` `image_url` `url` `image_alt_text` `remaining_cart_products_count` hiển thị số lượng mục hàng còn lại, nếu có hơn 5 mục hàng trong giao dịch thanh toán bỏ dở.

Sử dụng các biến bắt buộc

Khi tạo email Liquid tùy chỉnh, bắt buộc phải có biến unsubscribe_link hoặc unsubscribe_url. Nếu đã kích hoạt tính năng theo dõi lượt mở, biến open_tracking cũng là bắt buộc.

Mặc dù có thể chèn các biến này ở bất kỳ đâu trong mã email, vị trí phổ biến nhất để thêm chúng là trong phần chân trang của email, như trong ví dụ sau:

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

Ví dụ về mã Liquid tùy chỉnh

Bạn có thể thêm mã Liquid hoặc HTML tùy chỉnh vào trình chỉnh sửa mã. Đoạn mã sau là ví dụ về cách thêm mã Liquid để hiển thị tên cửa hàng, nút tùy chỉnh và hình ảnh có kích thước tùy chỉnh trong tin nhắn email.

<!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>