Liquid

Định nghĩa

Liquid là ngôn ngữ template mã nguồn mở do Shopify phát triển, đóng vai trò "cầu nối" giữa dữ liệu động (sản phẩm, giỏ hàng, khách hàng, đơn hàng) và giao diện hiển thị của một cửa hàng trực tuyến. Thay vì hard-code từng trang HTML tĩnh, bạn viết các file .liquid chứa cú pháp đặc biệt, và Shopify sẽ "rót" dữ liệu thật vào đó mỗi khi có người truy cập.

Điểm quan trọng với dân DTC/: Liquid chạy phía server (server-side rendering), nghĩa là trình duyệt nhận về HTML hoàn chỉnh. Điều này ảnh hưởng trực tiếp đến tốc độ tải trang, SEO và trải nghiệm mobile — những yếu tố quyết định tỷ lệ chuyển đổi (CVR) khi bán hàng xuyên biên giới.

Liquid gồm 3 thành phần cốt lõi:

- Objects — in dữ liệu ra: {{ product.title }}

- Tags — logic điều khiển: {% if %}, {% for %}, {% assign %}

- Filters — biến đổi dữ liệu: {{ price | money }}, {{ title | upcase }}

dễ hiểu

Hãy hình dung Liquid như công thức pha chế của một quán cà phê nhượng quyền:

- Objects = nguyên liệu có sẵn trong kho (cà phê, sữa, đá).

- Tags = quy trình pha (nếu khách gọi size L thì dùng ly lớn, lặp lại cho từng ly).

- Filters = công đoạn tinh chỉnh (thêm đường, đánh bọt, trang trí).

Cùng một "công thức" (theme), nhưng mỗi cửa hàng (store) có kho nguyên liệu khác nhau → ra sản phẩm khác nhau. Bạn không cần viết lại công thức cho từng chi nhánh.

Hoặc nếu bạn quen với WordPress: Liquid giống PHP template, nhưng an toàn hơn vì không cho phép chạy code tùy ý — chỉ có whitelist tag/filter. Đây là lý do Shopify cho phép merchant cài theme từ bên thứ ba mà không sợ bị chèn mã độc phá hệ thống.

Công thức & cú pháp

{{ object.property | filter: tham_số }}
{% tag dieu_kien %} ... {% endtag %}

Ví dụ thực tế — hiển thị giá đã giảm:

{% if product.compare_at_price > product.price %}
 <span class="gia-giam">{{ product.price | money }}</span>
 <s>{{ product.compare_at_price | money }}</s>
{% else %}
 <span>{{ product.price | money }}</span>
{% endif %}

Vòng lặp render danh sách sản phẩm:

{% for product in collection.products limit: 12 %}
 <a href="{{ product.url }}">{{ product.title | escape }}</a>
{% endfor %}

3 con số cụ thể cần nhớ:

1. Giới hạn 50.000 ký tự cho mỗi file template — vượt quá sẽ lỗi khi upload theme.

2. Vòng lặp tối đa 50 lần lặp mặc định trong một {% for %} (dùng limit: để kiểm soát), tránh treo server.

3. Shopify render mỗi trang trong ~200–500ms với Liquid tối ưu; mỗi filter/loop dư thừa có thể cộng thêm 10–30ms, ảnh hưởng trực tiếp đến Core Web Vitals.

Bảng so sánh

Ứng dụng trong DTC/

- Đa ngôn ngữ & đa tiền tệ: Dùng {{ shop.currency }}, {{ localization.language.iso_code }} để tự động hiển thị giá VND, USD hay EUR theo thị trường.

- Cá nhân hóa theo thị trường: {% if localization.country.iso_code == 'US' %} để hiện banner "Free shipping to US" chỉ cho khách Mỹ.

- Bundle & upsell: Lặp qua product.metafields để render combo "Mua 2 tặng 1" tự động.

- Trang landing chiến dịch: Tạo template riêng cho từng campaign TikTok/Shopee Ads, không cần app trả phí.

- Email marketing: Liquid cũng dùng trong Shopify Email và Klaviyo để chèn tên khách, mã đơn, sản phẩm đã mua.

Lỗi thường gặp

1. Quên | escape khi in dữ liệu người dùng nhập → dễ bị XSS.

2. Loop không giới hạn trên collection lớn → trang load chậm, Google phạt.

3. Lạm dụng filter trong vòng lặp (như | money 100 lần) → tăng thời gian render.

4. Nhầm {{ }} và {% %} — in giá trị vs. thực thi logic.

5. Hard-code text thay vì dùng {{ 'key' | t }} → không dịch được đa ngôn ngữ.

6. Sửa theme trực tiếp trên live không backup → mất code khi Shopify update.

Thuật ngữ liên quan

- Theme — bộ file Liquid tạo giao diện cửa hàng.

- Section & Block — đơn vị kéo-thả trong Shopify 2.0, viết bằng Liquid.

- Metafield — dữ liệu tùy chỉnh gắn vào sản phẩm/đơn, đọc qua Liquid.

- Schema — phần JSON khai báo cài đặt cho section.

- Shopify OS 2.0 — kiến trúc theme hiện đại dựa trên Liquid.

- Hydrogen / Storefront API — hướng thay thế Liquid bằng React cho headless commerce.