Tùy Chỉnh Theme Shopify Nâng Cao — Không Cần Code

Hầu hết merchant chỉ dùng 30% khả năng của Theme Editor. Bài này khai thác phần còn lại — Dynamic Sources, App Blocks, và những tùy chỉnh biến store của bạn trở nên khác biệt mà không cần động đến một dòng code.

Theme Editor 2.0 — những tính năng bị bỏ qua

Từ bài CB-04, bạn đã biết cách kéo thả Sections cơ bản. Nhưng Theme Editor 2.0 (đi kèm với Online Store 2.0) có thêm khá nhiều thứ ở tầng sâu hơn mà hầu hết merchant không khám phá.

Điều đầu tiên nên biết: bạn có thể ẩn từng Block riêng lẻ mà không cần xóa nó. Click vào icon mắt bên cạnh block — hữu ích khi muốn A/B test layout mà không mất cấu hình cũ. Nhiều merchant không biết điều này và cứ xóa rồi thêm lại.

Thứ hai: Color Schemes. Vào Theme Settings → Colors → chỗ gọi là "Color schemes" (có thể thấy ở Dawn, Refresh và hầu hết theme mới). Đây là nơi bạn định nghĩa sẵn 6–8 bảng màu, sau đó assign từng scheme cho từng section — thay vì chỉnh màu thủ công từng chỗ một. Cực kỳ tiết kiệm thời gian khi cần rebrand hay tạo seasonal theme.

Dynamic Sources — kết nối dữ liệu linh hoạt

Dynamic Sources là tính năng cho phép một block hiển thị nội dung động từ nhiều nguồn khác nhau — thay vì nội dung cố định bạn gõ tay vào.

Ví dụ thực tế: bạn có block text "Hướng dẫn bảo quản" trên trang sản phẩm. Nếu điền text cứng, mọi sản phẩm sẽ hiện cùng một nội dung. Kết nối với Dynamic Source từ metafield product.care_instructions — mỗi sản phẩm sẽ tự hiện đúng hướng dẫn riêng của nó.

Điều này nghĩa là bạn chỉ cần thiết kế layout một lần, dữ liệu tự fill vào. Đây là cách các store chuyên nghiệp giữ giao diện nhất quán với hàng trăm sản phẩm.

Tạo landing page bán hàng từ Theme Editor

Nhiều merchant tốn tiền mua thêm app landing page (Pagefly, GemPages...) trong khi Theme Editor 2.0 đã đủ để làm khá nhiều. Dưới đây là cách tạo một landing page sản phẩm hiệu quả mà không cần app:

• Vào Online Store → Pages → Add page, chọn template page.landing (nếu theme có) hoặc dùng page trống
• Customize page này trong Theme Editor — thêm các section: Hero banner lớn, Product feature (ảnh + text xen kẽ), Testimonials, FAQ, nút CTA nổi bật
• Ẩn header và footer nếu muốn landing page tập trung — một số theme có tùy chọn này trong Page template settings
• Gắn nút CTA thẳng vào trang sản phẩm hoặc checkout, bỏ qua trang collection

💡 Với chiến dịch quảng cáo Facebook/TikTok, landing page riêng biệt (không có header/footer điều hướng đi chỗ khác) thường cho conversion rate cao hơn trang sản phẩm thông thường 20–40%.

Tùy chỉnh trang Collection

Trang Collection mặc định thường chỉ là grid sản phẩm đơn giản. Bạn có thể làm phong phú hơn ngay trong Theme Editor:

Bộ lọc (Filters): Vào Theme Editor → chọn trang Collection → tìm phần "Filters and sorting". Bật storefront filtering để khách có thể lọc theo size, màu, giá ngay trên trang — không cần app. Filters tự động lấy các options từ variants sản phẩm của bạn.

Grid layout: Hầu hết theme có tùy chọn 2/3/4 cột trên desktop, và 1/2 cột trên mobile. Với ngành thời trang, 4 cột desktop + 2 cột mobile là phổ biến. Với sản phẩm cần nhìn chi tiết (đồ thủ công, mỹ phẩm), 3 cột lớn hơn thường tốt hơn.

Hero banner cho Collection: Thêm section banner phía trên grid — gồm ảnh nền, tiêu đề collection, và mô tả ngắn. Đây là nơi nhiều store bỏ trống, trong khi nó là cơ hội tốt để kể câu chuyện về nhóm sản phẩm đó.

Tùy chỉnh trang Cart để tăng AOV

Trang Cart là điểm "cuối phễu" mà nhiều merchant bỏ qua. Ba thứ nên thêm ngay:

Free shipping progress bar — Hiển thị khách còn thiếu bao nhiêu để đạt ngưỡng miễn phí ship. Một số theme có sẵn tính năng này trong Cart settings. Nếu không có, tìm app Cart Upsell miễn phí.

Trust badges — Icons nhỏ ngay trên nút Checkout: bảo mật SSL, chính sách đổi trả, thời gian giao hàng. Giảm lo ngại tại điểm quyết định cuối cùng.

Upsell / Cross-sell section — Gợi ý sản phẩm liên quan bên dưới cart. Shopify có product recommendations API tự động — xem bài NC-08 để chi tiết hơn.

Thêm custom section từ code cộng đồng

Shopify Community (community.shopify.com) và GitHub có hàng trăm section code miễn phí: countdown timer, before/after slider, video testimonial, icon list với SVG. Cách thêm vào theme:

• Online Store → Themes → Edit code → thư mục sections/
• Add file mới, dán code section vào, save
• Quay lại Theme Editor — section mới xuất hiện trong danh sách "Add section"

⚠️ Luôn duplicate theme trước khi thêm code từ nguồn bên ngoài. Nếu section code có lỗi, nó có thể ảnh hưởng đến các phần khác của theme. Test kỹ trên mobile sau khi thêm.

Khi nào cần thuê developer?

Theme Editor rất mạnh, nhưng có những giới hạn rõ ràng. Bạn cần developer khi: muốn layout hoàn toàn mới không có trong bất kỳ section nào, cần custom logic như hiển thị giá theo tier khách hàng, tích hợp sâu với hệ thống bên ngoài, hoặc muốn build từ file Figma/XD của bạn.