Liquid Cơ Bản Cho Merchant — Tự Chỉnh Theme Không Lo Hỏng

Liquid trông phức tạp hơn thực chất của nó. Bạn không cần trở thành developer — nhưng hiểu đủ để đọc, sửa nhỏ, và không hoảng loạn khi nhìn vào code theme sẽ mở ra rất nhiều khả năng mà không tốn đồng nào thuê người.

Liquid là gì và tại sao cần biết?

Liquid là ngôn ngữ template do Shopify tạo ra, dùng để kết nối dữ liệu từ store (sản phẩm, giỏ hàng, khách hàng...) với HTML hiển thị ra trình duyệt. Khi bạn nhìn vào file .liquid trong theme, phần HTML là bố cục tĩnh, phần Liquid là dữ liệu động điền vào đó.

Ba thành phần cốt lõi của Liquid

1. Objects — biến chứa dữ liệu

Objects là những biến chứa dữ liệu từ store. Bạn gọi chúng bằng dấu ngoặc kép đôi: {{ }}

{{ product.title }}          → tên sản phẩm
{{ product.price | money }}  → giá đã format
{{ customer.name }}          → tên khách đang đăng nhập
{{ cart.item_count }}        → số sản phẩm trong giỏ

2. Tags — điều khiển logic

Tags dùng dấu ngoặc nhọn kèm phần trăm: {% %}. Dùng để điều kiện, vòng lặp, gán biến.

{% if product.available %}
  <button>Thêm vào giỏ</button>
{% else %}
  <p>Hết hàng</p>
{% endif %}

{% for product in collection.products %}
  <div>{{ product.title }}</div>
{% endfor %}

3. Filters — xử lý dữ liệu

Filters đứng sau dấu | để transform dữ liệu trước khi hiển thị.

{{ product.price | money }}           → 250.000 ₫
{{ product.title | upcase }}          → ÁO POLO NAM
{{ product.description | truncate: 100 }} → Cắt ngắn còn 100 ký tự
{{ 'logo.png' | asset_url }}          → URL đầy đủ đến file asset

Cấu trúc file trong một theme

Khi vào Online Store → Themes → Edit code, bạn sẽ thấy 6 thư mục. Phần bạn sẽ đụng nhiều nhất:

• sections/ — Mỗi section trong Theme Editor có một file .liquid tương ứng ở đây
• snippets/ — Các đoạn code nhỏ tái sử dụng (ví dụ: product-card.liquid, icon-chevron.liquid)
• assets/ — CSS và JavaScript của theme. Đây thường là chỗ an toàn nhất để chỉnh nhỏ
• layout/theme.liquid — Khung tổng của toàn bộ trang, hiếm khi cần chỉnh trực tiếp

Những chỉnh sửa nhỏ thường gặp

Thêm text tĩnh vào section

Tìm file section cần sửa, tìm đúng chỗ trong HTML, thêm text hoặc HTML của bạn. Ví dụ thêm dòng chữ "Giao hàng miễn phí nội thành" vào section header — tìm file header.liquid, tìm </header>, thêm vào trước đó.

Đổi màu nút, ẩn element

Phần lớn màu sắc được kiểm soát qua CSS variables trong file base.css hoặc theme.css trong thư mục assets. Tìm biến --color-button hay tương tự, đổi giá trị. Để ẩn element, thêm display: none vào đúng class CSS.

Thực hành: badge "Bestseller" theo tag sản phẩm

Đây là ví dụ thực tế và rất phổ biến. Mục tiêu: hiển thị badge "Bestseller" trên product card nếu sản phẩm có tag "bestseller".

Tìm file card-product.liquid trong thư mục snippets (tên có thể khác tùy theme), thêm đoạn này vào bên trong phần ảnh sản phẩm:

{% if product.tags contains 'bestseller' %}
  <div>Bestseller</div>
{% endif %}

Rồi thêm CSS vào file base.css:

.badge-bestseller {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #2D6A4F;
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

Debug bằng Shopify Theme Inspector

Shopify Theme Inspector là extension Chrome miễn phí giúp bạn xem từng file Liquid nào đang render phần nào trên trang, thời gian render mỗi file, và variable nào đang có giá trị gì. Cực kỳ hữu ích khi bạn không chắc chỉnh sửa ở đúng file không.

Tài nguyên học thêm

• Shopify Dev Docs — shopify.dev/docs/api/liquid (tài liệu chính thức, đầy đủ nhất)
• Liquid Cheat Sheet — shopify.github.io/liquid (tra cứu nhanh filters và tags)
• Shopify Community — community.shopify.com (hỏi đáp và code snippet miễn phí)