Mỗi loại menu sinh ra để giải một bài toán khác nhau. Chọn sai không làm hỏng store ngay, nhưng khách phải nghĩ nhiều hơn cần thiết — và mỗi lần khách phải nghĩ là một lần họ có thể rời đi. Bài này hiểu rõ các loại menu Shopify phổ biến nhất, với mỗi loại: nó là gì, hợp khi nào, không hợp khi nào, và lỗi người bán hay mắc.
Một con số đáng nhớ trước khi vào chi tiết. Theo Baymard Institute, tỷ lệ bỏ giỏ hàng trung bình trong thương mại điện tử khoảng 70%. Không phải lỗi nào cũng do điều hướng, nhưng điều hướng rối góp phần khiến khách chưa kịp tới giỏ đã thoát.
Bốn loại dưới đây không loại trừ nhau. Một store thường dùng vài loại cùng lúc — chẳng hạn mega menu cho desktop, tab bar cho mobile. Vấn đề là dùng đúng loại cho đúng ngữ cảnh.
Mega menu: hợp khi nhiều danh mục và khách duyệt trên desktop
Mega menu là menu mở rộng lớn. Khi rê chuột hoặc bấm vào một mục, một bảng rộng hiện ra cho thấy nhiều danh mục con cùng lúc, thường kèm hình ảnh hoặc một sản phẩm nổi bật. Khách thấy được toàn cảnh gian hàng chỉ trong một cú nhìn.
Nó phát huy tốt khi store có nhiều danh mục — tạm lấy mốc 10 nhóm trở lên — và phần lớn khách vào bằng máy tính. Các ngành mà người mua thích lượn xem rồi mới quyết, như thời trang, mỹ phẩm, đồ gia dụng, nội thất, thường hợp kiểu này. Khách chưa biết chính xác mình cần gì, nên bày sẵn nhiều lối đi sẽ giúp họ.
Mega menu không hợp khi store ít sản phẩm hoặc phần lớn khách dùng điện thoại. Một shop bán mười kiểu áo mà bung ra một bảng to là thừa, trông trống trải. Và vì 79% lưu lượng Shopify đến từ mobile (theo Shopify), một thiết kế chỉ đẹp trên màn hình rộng sẽ bỏ rơi đa số khách.
Lỗi hay gặp nhất là nhét quá nhiều. Người bán muốn khoe hết, dồn mọi danh mục và banner vào một bảng. Kết quả là khách bị choáng và không bấm gì. Quá nhiều lựa chọn cũng giống như không có lựa chọn. Hãy nhóm gọn, chừa khoảng trống, và chỉ làm nổi vài thứ thật sự muốn bán.
Slide menu: hợp khi danh mục nhiều cấp và khách đã biết mình muốn gì
Slide menu (còn gọi là hamburger menu, mở từ biểu tượng ba gạch) trượt vào từ cạnh màn hình. Nó hiển thị danh mục dạng cây — bấm vào một nhóm thì các nhóm con xổ ra, có thể đi sâu nhiều tầng. Đây là cách gọn gàng để xếp một cấu trúc phức tạp vào không gian hẹp.
Slide menu hợp khi store có nhiều cấp danh mục và bạn cần một hệ thống phân cấp rõ ràng, đặc biệt với tư duy mobile-first. Ví dụ một cửa hàng phụ tùng: Hãng xe › Dòng xe › Loại phụ tùng. Slide menu cho khách đi xuống đúng nhánh mà không phải tải trang mới ở mỗi bước.
Nó không hợp khi store đơn giản. Nếu bạn chỉ có vài danh mục, giấu chúng sau một biểu tượng là tự làm khó khách. Nielsen Norman Group cho thấy giấu điều hướng làm giảm khả năng khách tìm thấy mục cần và khiến họ thao tác chậm hơn so với khi menu hiện sẵn.
Nên hiểu bản chất: slide menu giấu thông tin đi. Vì thế nó phục vụ tốt người đã biết mình muốn gì — họ chủ động mở ra và đi thẳng tới nhánh quen thuộc. Nó kém hơn cho việc dạo xem, vì khách không thấy gì cho tới khi tự bấm. Nếu mục tiêu của bạn là để khách tình cờ phát hiện sản phẩm, một mình slide menu là chưa đủ.
Tab bar: hợp khi phần lớn khách dùng điện thoại
Tab bar là thanh điều hướng cố định nằm sát đáy màn hình điện thoại, thường chứa 4–5 mục quan trọng nhất như Trang chủ, Danh mục, Tìm kiếm, Giỏ hàng, Tài khoản. Nó luôn hiện, khách cuộn tới đâu nó vẫn ở đó.
Sức mạnh của tab bar nằm ở vị trí. Nghiên cứu của Steven Hoober về cách cầm điện thoại (hơn 1.300 quan sát ngoài thực tế) cho thấy phần lớn thao tác trên mobile làm bằng một ngón cái, và vùng đáy giữa màn hình là chỗ ngón cái với tới dễ nhất — thường gọi là vùng ngón cái (thumb zone). Đặt các hành động chính ở đáy nghĩa là đặt chúng đúng nơi tay khách đang đậu sẵn.
Tab bar hợp khi phần lớn lưu lượng đến từ điện thoại, mà với đa số store Shopify hiện nay thì đúng là vậy. Nó cũng giúp những thứ quan trọng — đặc biệt là giỏ hàng — luôn trong tầm một cú chạm, thay vì bắt khách cuộn lên đầu trang.
Lưu ý là tab bar có chỗ cho rất ít mục. Đừng cố nhồi bảy tám biểu tượng; chọn 4–5 thứ quan trọng nhất, phần còn lại để slide menu hoặc trang danh mục lo. Hãy coi tab bar là phím tắt, không phải toàn bộ điều hướng.
FAB: một nút nổi cho một hành động
FAB (floating action button) là nút tròn nổi trên nội dung, dành cho một hành động quan trọng — chat với shop, xem giỏ, hay quay về đầu trang. Nó luôn ở đó nhưng kín đáo, không chiếm chỗ.
FAB hợp khi có đúng một việc bạn muốn khách làm được ở bất cứ đâu. Ví dụ thường gặp ở Việt Nam là nút chat Messenger hoặc Zalo nổi góc phải dưới — khách đang xem sản phẩm mà thắc mắc thì bấm hỏi ngay, không cần đi tìm.
Điểm cần nhớ: FAB không thay thế menu. Nó là lối tắt cho một hành động, không phải nơi chứa cả hệ thống điều hướng. Lỗi hay gặp là gắn quá nhiều việc cho nó — một nút nở ra năm sáu lựa chọn, hoặc dồn ba bốn nút nổi cùng lúc che mất nội dung và che cả nút Thêm vào giỏ. Khi đó FAB từ tiện ích thành vật cản. Một FAB, một mục đích.
Vài điều áp dụng cho cả bốn loại
Dù chọn loại nào, ba điểm này luôn đúng.
- Tách cấu hình mobile và desktop. Cùng một store nhưng khách trên hai thiết bị hành xử khác nhau. Một menu lý tưởng cho cả hai thường không tồn tại; tốt hơn là dùng mega menu cho desktop và tab bar hoặc slide menu cho mobile.
- Đừng đánh đổi tốc độ. Google đặt mốc tốt cho Core Web Vitals là LCP dưới 2,5 giây, INP dưới 200 mili-giây và CLS dưới 0,1. Một menu đẹp mà làm trang giật hay tải chậm thì lợi bất cập hại. Theo dữ liệu của Shopify, một store trung bình cài khoảng 6 ứng dụng, nên mỗi app thêm vào đều góp phần làm nặng trang — chọn lọc là cần thiết.
- Đừng để menu hỏng khi đổi theme. Nếu menu gắn cứng vào theme, mỗi lần đổi giao diện bạn lại phải dựng lại từ đầu.
Đây cũng là lý do nhiều người dùng một công cụ điều hướng riêng. Navi+ dựng được cả bốn loại trên — mega menu, slide menu, tab bar, FAB cùng grid menu — bằng kéo-thả, không cần code, cấu hình mobile và desktop tách bạch, và menu giữ nguyên khi bạn đổi theme. Công cụ cũng được làm để không kéo Core Web Vitals đi xuống. Nhưng dù dùng công cụ nào, nguyên tắc vẫn vậy: chọn loại menu theo thiết bị của khách và cách họ mua, không theo cái nào trông oách nhất.
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.