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

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.

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>

    Bạn đã sẵn sàng bán hàng với Shopify?

    Dùng thử miễn phí