Không có một bộ menu nào hợp với mọi cửa hàng. Một shop thời trang với hàng nghìn mã hàng cần điều hướng khác hẳn một quán cà phê bán vài chục món. Bài này gom lại cách kết hợp menu Shopify theo từng loại store, dựa trên những gì quan sát được khi vận hành và nhìn các shop khác làm.
Trước khi vào bảng, có một ý quan trọng: menu trên desktop và trên mobile không nên giống nhau. Người dùng cầm điện thoại bằng một tay, chủ yếu thao tác bằng ngón cái. Theo quan sát của Steven Hoober, khoảng 75% thao tác trên di động là do ngón cái thực hiện, và vùng dễ chạm nhất nằm ở nửa dưới màn hình. Trên desktop thì ngược lại: người ta quét mắt từ trên xuống, nên menu ngang phía trên hợp lý hơn. Hai bối cảnh khác nhau thì cách bày menu cũng nên khác.
Bảng gợi ý kết hợp menu Shopify theo loại store
| Loại store | Desktop | Mobile |
|---|---|---|
| Fashion / Lifestyle, catalog lớn | Mega Menu | Tab Bar + Slide Menu |
| Electronics, nhiều danh mục kỹ thuật | Mega Menu có filter | Slide Menu |
| F&B / Local, ít sản phẩm | Simple Nav (menu ngang đơn giản) | Tab Bar |
| Beauty / Skincare | Mega Menu kèm hình | Tab Bar + FAB chat |
| Dropshipping, nhiều ngành hàng | Mega Menu | Slide Menu |
Bảng này là điểm xuất phát, không phải luật. Bên dưới là lý do từng dòng, để bạn tự điều chỉnh theo store của mình.
Fashion và lifestyle: catalog lớn cần Mega Menu trên desktop
Shop thời trang thường có cấu trúc sâu: Nam / Nữ, rồi Áo / Quần / Phụ kiện, rồi từng dòng sản phẩm, theo mùa, theo bộ sưu tập. Nhồi tất cả vào một menu xổ dọc thì người mua phải rê chuột qua nhiều tầng.
Trên desktop, Mega Menu giải quyết việc này. Nó trải các danh mục thành nhiều cột trong một khung lớn, người dùng nhìn thấy toàn bộ cây hàng cùng lúc thay vì bấm từng cấp. Với một shop đồ nữ có hàng chục dòng sản phẩm, đây thường là cách gọn nhất.
Trên mobile thì khác. Màn hình hẹp không trải nổi Mega Menu, nên cách hay dùng là Tab Bar cho các lối đi quan trọng nhất (Trang chủ, Danh mục, Giỏ hàng, Tài khoản) đặt ở đáy màn hình, cộng Slide Menu cho phần danh mục đầy đủ. Tab Bar luôn hiện trong vùng ngón cái, còn Slide Menu chứa cây hàng chi tiết khi người dùng muốn đào sâu.
Electronics: danh mục kỹ thuật cần lọc ngay trong menu
Đồ điện tử có đặc thù riêng. Người mua thường biết khá rõ mình cần gì: dung lượng, hãng, mức giá, đời máy. Vì vậy với store electronics, Mega Menu trên desktop nên kèm vài bộ lọc hoặc nhóm phụ ngay trong menu, để người dùng nhảy thẳng tới nhánh đúng thay vì duyệt cả trang danh mục.
Ví dụ, một shop phụ kiện máy tính có thể chia Mega Menu thành cột theo loại (chuột, bàn phím, tai nghe), và trong mỗi cột liệt kê sẵn các mức giá hoặc thương hiệu phổ biến.
Trên mobile, vì cây danh mục dài và kỹ thuật, Slide Menu hợp hơn là cố nhét mọi thứ vào Tab Bar. Slide Menu cho phép menu lồng nhiều cấp mà vẫn gọn. Nếu dùng, nên có nhãn chữ rõ ràng kèm biểu tượng. Nielsen Norman Group từng đo và thấy menu ẩn (kiểu hamburger) làm khả năng người dùng tìm ra điều hướng giảm gần một nửa so với menu hiện rõ, nên đừng để menu quá kín.
F&B và local: ít sản phẩm thì đừng làm phức tạp
Quán ăn, tiệm bánh, shop địa phương thường chỉ có vài chục mặt hàng. Dựng Mega Menu cho store như vậy là thừa, thậm chí khiến trang rối hơn cần thiết.
Trên desktop, một Simple Nav, menu ngang vài mục như Thực đơn, Về chúng tôi, Liên hệ, là đủ. Người mua không cần đào sâu, họ cần đặt hàng nhanh.
Trên mobile, Tab Bar phát huy tốt ở đây. Vài nút quan trọng nhất, ví dụ Thực đơn, Đặt món, Gọi điện, nằm sẵn ở đáy màn hình, ngay vùng ngón cái dễ chạm. Một quán cà phê bán online có thể cố định nút Đặt món và Gọi điện ở Tab Bar, để khách không phải cuộn tìm.
Beauty và skincare: hình ảnh và hỗ trợ tư vấn
Mỹ phẩm bán bằng hình ảnh và niềm tin. Khách thường phân vân chọn loại nào hợp da, nên menu cũng nên phản ánh điều đó.
Trên desktop, Mega Menu kèm hình giúp khách nhìn thấy sản phẩm hoặc dòng skincare ngay trong menu, thay vì chỉ đọc chữ. Một shop beauty có thể đặt ảnh đại diện cho từng dòng (làm sạch, dưỡng ẩm, chống nắng) bên cạnh tên danh mục.
Trên mobile, ngoài Tab Bar cho điều hướng chính, một nút FAB chat nổi ở góc khá hợp với ngành này. Khách hay có câu hỏi trước khi mua (da mình dùng được không, có hợp với loại kia không), và một nút chat luôn hiện giúp họ hỏi ngay. Việc giảm do dự ở khâu này đáng giá: theo Baymard Institute, tỷ lệ bỏ giỏ trung bình trong thương mại điện tử vào khoảng 70%, nghĩa là cứ 10 người thêm vào giỏ thì chỉ khoảng 3 người hoàn tất. Giải đáp thắc mắc kịp thời là một cách níu lại phần nào.
Dropshipping: nhiều ngành hàng, ưu tiên gom nhóm rõ ràng
Store dropshipping hay bán nhiều ngành cùng lúc: đồ nhà bếp, phụ kiện điện thoại, đồ chơi, gia dụng. Vấn đề là các nhóm hàng rời rạc, không liên quan nhau.
Trên desktop, Mega Menu giúp gom từng ngành thành một cột riêng, để khách thấy ngay store bán những gì. Cấu trúc rõ ràng quan trọng hơn đẹp, vì khách thường tới từ quảng cáo và chưa quen store.
Trên mobile, Slide Menu xử lý tốt số lượng danh mục lớn mà không chiếm chỗ. Người dùng mở ra, chọn ngành, rồi đào vào.
Vì sao nên cấu hình mobile và desktop riêng
Điểm chung của cả năm trường hợp trên là cấu hình hai bên khác nhau. Đây không phải tiểu tiết. Phần lớn đơn hàng giờ đến từ điện thoại, và một menu desktop bê nguyên sang mobile thường vừa khó chạm vừa làm trang nặng thêm.
Hiệu năng cũng đáng để ý. Google đặt ngưỡng Core Web Vitals tốt là LCP dưới 2,5 giây, INP dưới 200ms và CLS dưới 0,1. Một menu cồng kềnh load trên mọi thiết bị dễ kéo các chỉ số này đi xuống. Trên di động, mỗi thành phần thêm vào đều nên nhẹ.
Đây là chỗ một công cụ như Navi+ tiện việc: nó cho phép cấu hình menu desktop và mobile riêng biệt, kéo thả không cần code, và giữ nguyên menu khi bạn đổi theme. Bạn có thể đặt Mega Menu cho desktop, Tab Bar cộng Slide Menu cho mobile, mà không phải đụng tới file theme.
Tóm lại, hãy chọn menu theo độ lớn của catalog và cách khách mua hàng, rồi tách riêng cấu hình cho hai loại màn hình. Bảng phía trên là điểm khởi đầu; phần còn lại là thử và điều chỉnh theo số liệu thật của store bạn.
Bài viết này nằm trong cẩm nang lớn hơn về Cách chọn đúng loại menu cho Shopify store của bạn.