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.
Trên trang này
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.
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ở:
Biến |
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:
Biến |
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.
|
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>