Navi+ có 6 loại menu, mỗi loại nằm ở một vị trí khác nhau trên cửa hàng. Bạn chỉ cần nhìn qua hình mẫu dưới đây để biết từng loại trông thế nào và chọn ra loại cần làm trước.
6 loại menu trông như thế nào?
Đây là tên gọi chính xác của từng loại trong app. Nếu bạn quen gọi bằng tên khác thì xem bảng đối chiếu ngay bên dưới.
Mỗi loại hiện ở đâu và dùng khi nào?
| Loại menu | Hiện ở đâu | Thiết bị | Khi nào nên dùng |
|---|---|---|---|
| Tab Bar | Thanh tab cố định ở đáy màn hình | Điện thoại, có thể bật cho cả máy tính | Ghim 4–5 trang chính như Home, Shop, Giỏ hàng ngay tầm ngón cái của khách |
| Mobile Menu | Ngăn menu trượt ra từ cạnh màn hình khi khách bấm nút ☰ | Điện thoại | Chứa toàn bộ danh mục của cửa hàng, không giới hạn số mục menu |
| Desktop Mega Menu | Bảng menu lớn chia nhiều cột, thả xuống ngay dưới header | Máy tính | Cửa hàng có nhiều danh mục, cần hiện kèm hình ảnh và sản phẩm nổi bật |
| Mobile Mega Menu | Thanh danh mục nằm ngang ngay dưới header | Điện thoại | Bày sẵn các danh mục chính ra ngoài để khách bấm ngay mà không cần mở nút ☰ |
| Icon Menu | Lưới các ô có icon hoặc ảnh, đặt vào một khu vực trong trang | Điện thoại và máy tính | Đặt ở trang chủ để khách vừa vào là thấy ngay cửa hàng bán những gì |
| Floating Button | Nút nổi ở góc màn hình, bấm vào sẽ bung ra các nút liên hệ | Điện thoại và máy tính | Gom WhatsApp, chat, gọi điện vào chung một nút gọn ở góc |
Ngoài thực tế, có thể bạn từng nghe vài tên gọi cũ: menu “hamburger” hay “drawer” chính là Mobile Menu, “bottom bar” là Tab Bar, “grid” là Icon Menu, còn “FAB” là Floating Button. Trong tài liệu này, chúng ta thống nhất dùng 6 tên trong bảng trên cho khớp với giao diện app.
Cách đưa từng loại menu lên cửa hàng cũng khác nhau:
- Tab Bar và Floating Button chỉ cần gạt nút Turn on là hiện lên cửa hàng.
- Mobile Menu cần gắn thêm một chỗ bấm để mở, thường là nút ☰ trên đầu trang.
- Desktop Mega Menu, Mobile Mega Menu và Icon Menu cần được đặt vào một vị trí cụ thể trong trang.
Bạn có thể xem cách đặt từng loại tại bài Mỗi loại menu được đặt ở đâu trên cửa hàng.
Nên làm loại menu nào trước?
Phần lớn chủ shop làm theo thứ tự 3 bước này:
- Làm Tab Bar và Mobile Menu cho điện thoại trước. Đa số khách mua sắm trên điện thoại. Tab Bar giúp bạn ghim các trang quan trọng ở đáy màn hình, đồng thời bạn có thể cài một tab trên thanh này để khi khách bấm vào sẽ mở ra Mobile Menu chứa toàn bộ phần còn lại.
- Làm Desktop Mega Menu cho máy tính. Đây là menu lớn nhất bạn dựng, có danh mục chia cột kèm hình ảnh. Làm xong, bạn có thể nhúng luôn menu này vào Mobile Menu để sau này chỉ phải sửa ở một nơi.
- Thêm Icon Menu hoặc Floating Button khi cần. Icon Menu hợp khi khách vào trang chủ mà chưa biết bấm đi đâu. Floating Button hợp khi bạn có nhiều kênh liên hệ cần gom lại.
Bạn vẫn chưa chắc nên chọn loại nào? Trong cửa sổ Add menu, hãy tìm dòng Not sure which type fits your store? rồi bấm nút Get advice. App sẽ gợi ý loại menu phù hợp với tình huống cửa hàng của bạn.
Dùng nhiều menu cùng lúc được không?
Các menu hoạt động độc lập với nhau. Bạn cứ dựng một menu, đưa lên cửa hàng, rồi thêm các menu khác lúc nào cũng được. Một cửa hàng thường chạy song song vài menu cùng lúc, chẳng hạn vừa có Tab Bar, Mobile Menu vừa có Desktop Mega Menu.
Xem cách dựng trọn bộ ba này trong Case study: Mega Menu, Mobile Menu và Tab Bar dùng chung một cây.
Nếu muốn mỗi menu chỉ hiện ở đúng nơi bạn chọn, như chỉ hiện trên điện thoại hoặc chỉ hiện ở trang chủ, bạn dùng thêm quy tắc hiển thị.
Bạn dựng sẵn bao nhiêu menu cũng được. Số lượng menu được bật hiển thị cùng lúc trên cửa hàng sẽ tính theo từng gói trong bảng giá. Xem chi tiết tại Gói dịch vụ và thanh toán.
Xem thử trên cửa hàng mẫu
Bạn có thể mở cửa hàng demo của Navi+ để bấm thử từng loại menu trên máy tính hoặc trên điện thoại.
Khi đã chọn được loại menu muốn làm, mở bài của loại đó trong mục Tạo từng loại menu.
Nền tảng khác
Các bước ở trên dành cho Shopify — đây là cách mặc định.
Cả sáu loại đều dùng được trên Wix. Khác biệt nằm ở cách đặt menu vào trang, xem Navi+ trên Wix, WordPress và website khác.
Cả sáu loại đều dùng được trên WordPress và website khác. Khác biệt nằm ở cách gắn Navi+ và chỗ đặt menu, xem Navi+ trên Wix, WordPress và website khác.