Theme và storefront: cửa hàng trông thế nào được quyết định ở đâu

Merchant hay hỏi mình một câu: đổi theme thì có mất sản phẩm với đơn hàng không?

Câu trả lời là không. Và lý do nằm ở một chuyện khá đơn giản mà biết rồi thì bớt lo hẳn.

Shopify tách làm hai tầng

Tầng dữ liệu là phần Shopify giữ: sản phẩm, biến thể, giá, tồn kho, đơn hàng, khách hàng, bộ sưu tập. Nó nằm trong hệ thống của Shopify, có cấu trúc đàng hoàng.

Tầng giao diện là phần người mua nhìn thấy. Trên Shopify tầng này gọi là theme. Theme lấy dữ liệu ở trên rồi bày ra trang chủ, danh mục, trang sản phẩm, giỏ hàng.

Vì hai tầng tách nhau nên đổi theme không đụng gì tới dữ liệu. Giống như thay nội thất trong nhà: bàn ghế đổi hết, còn đồ trong tủ vẫn nguyên. Theme mới chỉ rút cùng một nguồn rồi hiển thị theo kiểu khác.

Nên bạn cứ thoải mái cài theme mới, xem thử, rồi publish.

Theme làm được gì

Theme là bộ khung hiển thị, nó giỏi mấy việc này:

• Sắp bố cục: header, footer, lưới sản phẩm, gallery
• Chỉnh màu, font, khoảng cách, mấy hiệu ứng nhỏ
• Chọn template cho từng loại trang, thêm bớt khối nội dung
• Kéo dữ liệu có sẵn ra giao diện bằng Liquid, CSS, JavaScript

Theme không làm được gì

Đây là chỗ hay bị kỳ vọng nhầm:

• Không tự định cách tính giá, thuế, giảm giá. Hệ thống tính, theme chỉ hiện ra.
• Không quản tồn kho hay quy tắc đặt hàng
• Không đổi được cách giỏ hàng và checkout vận hành. Sửa giao diện thì được trong phạm vi cho phép, còn quy trình là của Shopify.
• Không chạy việc nền như đồng bộ kho, email giao dịch, tác vụ định kỳ. Đó là việc của app.

Cứ hình dung theme là cái mặt tiền: lo trưng bày và sắp xếp, không giữ tiền, không tính tiền.

Section và block: kéo thả thay vì gọi dev

Từ hồi có section và block thì merchant tự chỉnh trang được, đỡ phải nhờ vả.

• Section là mảng nội dung lớn: Hero, danh sách sản phẩm, blog highlight
• Block là thành phần nhỏ nằm trong section: thẻ sản phẩm, nút bấm, dòng chữ

Trong editor bạn kéo thả, thêm bớt, đổi thứ tự, đổi ảnh, đổi màu, không đụng dòng code nào. Theme làm tốt sẽ chừa đủ nút vặn để bạn tinh chỉnh mà không làm vỡ layout.

Với người làm app như mình, đây cũng là cửa để nhúng tính năng vào: app cung cấp một section riêng, merchant kéo vào đúng trang là xong.

Chỗ đau của người làm sản phẩm

Mỗi cửa hàng một theme, mỗi theme lại một kiểu cấu hình. Cùng một theme nhưng người này thêm block, người kia xoá bớt, có nơi còn chèn code riêng.

Nên một tính năng chèn vào trang phải chịu được đủ kiểu sai lệch:

• Đừng bám cứng vào HTML của một theme cụ thể
• Cho merchant chọn vị trí đặt qua editor, hoặc tự dò chỗ hợp lý
• Giữ hiệu năng, đừng chồng CSS, đừng đụng JavaScript của theme

Mấy lỗi khó chịu nhất đều đến từ đây. Chèn widget vào trang sản phẩm mà theme lại tách thông tin ra nhiều template con là lệch vị trí ngay. Theme lazy-load ảnh theo kiểu riêng là bể layout.

Cách giảm rủi ro: ưu tiên app block khi có thể, và luôn có phương án dự phòng cho theme không hỗ trợ.

Headless là gì

Bạn có thể bỏ luôn theme và tự dựng mặt tiền bằng công nghệ khác. Cái đó gọi là headless.

Khi đó:

• Dữ liệu vẫn ở Shopify, bạn gọi API để lấy sản phẩm, giá, tồn kho, tạo giỏ, tạo đơn
• Giao diện bạn tự xây, toàn quyền bố cục và tương tác
• Đổi lại, mất hết tiện ích của theme editor, section, app block. Routing, SEO, tối ưu ảnh, tracking, nhúng widget đều phải tự làm.
• Riêng checkout vẫn đi theo cơ chế của Shopify. Bạn thiết kế phần xung quanh, chứ không viết lại phần đó.

Headless hợp với đội muốn kiểm soát chặt trải nghiệm và sẵn sàng ôm thêm việc kỹ thuật.

Tóm lại

• Dữ liệu và giao diện tách nhau, nên đổi theme không mất dữ liệu
• Theme lo hiển thị, không đụng cách tính tiền, tồn kho hay checkout
• Section và block cho phép kéo thả, cũng là chỗ app nhúng tính năng vào
• Làm sản phẩm thì phải tính tới muôn kiểu theme, ưu tiên cách nhúng chuẩn
• Muốn tự do giao diện thì đi headless, nhưng đổi lại phải tự gánh nhiều việc hơn