Thêm mục Liquid tùy chỉnh cho 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ê Chuyên gia Shopify.

Nếu thêm mục Liquid tùy chỉnh, bạn sẽ có thể nhập Liquid hoặc HTML tùy chỉnh vào thư Shopify Email.

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 mục 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 mục Liquid tùy chỉnh hỗ trợ.
• Mã mà bạn nhập không được vượt quá kích thước 50 KB.
• 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.

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

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

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

Biến	Mô tả
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: 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.

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

Sau khi thêm mục Liquid tùy chỉnh vào mẫu email, bạn có thể thêm 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>
  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>