Thêm Liquid tùy chỉnh vào chiến dịch Shopify Email

Phát triển doanh nghiệp

Nếu cần hỗ trợ tạo mã tùy chỉnh cho thư Shopify Email, bạn có thể thuê Đối tác của Shopify.

Bạn có thể thêm tính năng viết mã tùy chỉnh vào thư của Shopify Email bằng cách thêm mục Liquid tùy chỉnh hoặc tạo email được mã hóa tùy chỉnh hoàn toàn. Những tùy chọn này cho phép bạn nhập Liquid hoặc HTML tùy chỉnh.

Quyền truy cập sớm

Email được mã hóa tùy chỉnh đang trong giai đoạn truy cập sớm và chỉ dành cho một số cửa hàng.

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

Bạn có thể sử dụng Liquid tùy chỉnh để hiển thị các phần tử tùy chỉnh, ví dụ 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 cỡ mục tùy chỉnh.

Những điều cần cân nhắc

Xem lại những lưu ý sau đây trước khi bắt đầu thêm Liquid tùy chỉnh vào thư Shopify Email:

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

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

Bạn có thể sử dụng các biến sau để tùy chỉnh thư email Shopify bằng Liquid.

Mô tả các biến Liquid được Shopify Email hỗ trợ

Biến	Mô tả
unsubscribe_link	Biến này cấp quyền truy cập vào liên kết hủy đăng ký. Bạn phải có biến này nếu muốn tạo email được mã hóa tùy chỉnh.
open_tracking	Biến này cấp quyền truy cập vào khối theo dõi lượt mở định dạng sẵn. Bạn phải có biến này và kích hoạt tính năng theo dõi lượt mở nếu muốn tạo email được mã hóa tùy chỉnh.
abandoned_checkout	Biến này cấp quyền truy cập vào 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ị năm mục hàng đầu tiên của giao dịch thanh toán bỏ dở. Ngoài ra, mỗi đối tượng line_items đều chứa các thuộc tính sau về từng sản phẩm: image_url product_title variant_title số lượng remaining_products_count hiển thị số lượng mục hàng còn lại nếu có nhiều hơn năm mục hàng trong giao dịch thanh toán bỏ dở. Biến abandoned_checkout sẽ chỉ điền nếu email là một phần của quy trình tự động hóa tiếp thị về giao dịch thanh toán bỏ dở. Nếu không, biến này sẽ là null.
abandoned_visit	Biến này cấp quyền truy cập vào các thuộc tính sau của lần duyệt xem hoặc giỏ hàng bị bỏ quên: url hiển thị URL của giao dịch thanh toán bỏ dở. products_added_to_cart hiển thị năm 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ỏ dở. Ngoài ra, mỗi đối tượng products_added_to_cart đều chứa các thuộc tính sau về từng sản phẩm: tiêu đề image_url variant_title số lượng products_viewed hiển thị năm sản phẩm đầu tiên được xem trong lượt truy cập bỏ dở. Ngoài ra, mỗi đối tượng products_viewed đều chứa các thuộc tính sau về từng sản phẩm: tiêu đề mô tả image_url url remaining_cart_products_count hiển thị số lượng mục hàng còn lại nếu có nhiều hơn năm mục hàng trong giao dịch thanh toán bỏ dở. Biến abandoned_visit sẽ chỉ điền nếu email nằm trong quy trình tự động hóa tiếp thị về giỏ hàng bị bỏ quên hoặc lần duyệt xem bỏ dở. Nếu không, biến này sẽ là null.
data.customer.*	Biến này cấp quyền truy cập vào các thuộc tính dữ liệu khách hàng sau: first_name last_name gửi email city trạng thái quốc gia Bạn không thể sử dụng những thuộc tính này trong bộ lọc Liquid hoặc điều kiện Liquid.
email.*	Biến này cấp quyền truy cập vào 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.
shop.*	Biến này cấp quyền truy cập vào các thuộc tính sau của cửa hàng: 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 biết các thuộc tính địa chỉ sau: address1 address2 city quốc gia điện thoại province ZIP branding hiển thị nhãn hiệu của cửa hàng, bao gồm các thuộc tính sau: 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, được kết xuất trực tiếp dưới dạng thẻ img.

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

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

Bạn có thể chèn những biến này vào bất kỳ chỗ nào trong mã của email, nhưng vị trí phổ biến nhất để thêm là trong mục chân trang của email, ví dụ như sau:

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

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

Bạn có thể nhập Liquid hoặc HTML tùy chỉnh vào trình chỉnh sửa mã. Mã sau đây là ví dụ về cách bạn có thể 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 cỡ tùy chỉnh trong thư email.

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