Bạn tìm thấy các cài đặt trong bài này ở Configure (bước 3 trên thanh bước dọc bên trái, mở ra tấm lớn trượt từ phải), thẻ Display on mobile, ngay dưới nút gạt Show menu on mobile. Đây là nơi bạn chỉnh cách menu phản ứng khi khách chạm tay, cuộn trang hoặc vuốt ngang. Riêng hai ô ẩn hiện khi cuộn trên máy tính nằm ở thẻ Display on desktop.
Tuỳ loại menu đang mở, bạn chỉ thấy những mục phù hợp. Xem bảng cuối bài để biết loại menu nào có mục nào.
Màu khi khách chạm vào mục
Khối Touch highlight (mobile/tablet) gồm hai ô nằm cạnh nhau. Khi khách chạm và giữ ngón tay lên một mục menu, nền mục đó đổi sang màu bạn chọn để khách biết mình đã bấm trúng. Khối này cần gói Business trở lên: ở gói thấp hơn, nó bị làm mờ và hiện nút Upgrade to Business. Dù bạn tắt Show menu on mobile, khối này vẫn hiện vì máy tính bảng màn hình cảm ứng cũng dùng đến.
BG Color
Nằm trong Configure › Display on mobile › khối Touch highlight (mobile/tablet). Đây là màu của vệt sáng hiện ra khi khách chạm vào một mục.
- Lựa chọn: chọn màu từ bảng màu hoặc nhập mã màu. Để trống thì ô hiện
Inheritvà menu dùng màu chạm mặc định của nó. - Mặc định cho menu mới: để trống.
- Áp cho: cả 6 loại menu, mọi cấp, mọi loại mục. Cần gói Business trở lên.
- Khách thấy gì: chỉ khi bạn đã chọn màu, mục đang được chạm mới đổi sang màu đó (cả mục cấp 1 lẫn mục con, trừ tiêu đề nhóm và đường kẻ). Bỏ trống thì khách thấy hiệu ứng chạm mặc định.
Opacity /100
Nằm ngay cạnh ô BG Color. Đây là độ đậm của màu chạm.
- Lựa chọn: số từ 0 đến 100 (0 là trong suốt, 100 là đặc hoàn toàn). Không cần gõ dấu %.
- Mặc định cho menu mới: để trống. Nếu bạn đã chọn BG Color mà bỏ trống ô này, app tự lấy mức
15. - Áp cho: cả 6 loại menu. Cần gói Business trở lên.
- Chỉ có tác dụng khi bạn đã chọn BG Color. Chưa chọn màu thì ô này không đổi gì.
- Khách thấy gì: số càng cao thì vệt màu càng đậm, che mất nền mục; số thấp thì chỉ phủ nhẹ một lớp màu.
Ẩn hiện menu khi khách cuộn trang
Khối Scroll effects giúp tự ẩn hoặc hiện menu theo hướng khách vuốt trang, nhường chỗ cho nội dung web. Chỉ Tab Bar và Floating Button mới có khối này. Hai ô ở mỗi màn hình (điện thoại, máy tính) hoạt động ngược nhau nên bạn chỉ nên bật một trong hai.
Hide when scrolling down on Mobile screen
Nằm trong Configure › Display on mobile › khối Scroll effects. Dùng khi bạn muốn menu nhường chỗ cho nội dung lúc khách đang cuộn xuống đọc.
- Lựa chọn: nút gạt bật/tắt.
- Mặc định cho menu mới: bật nếu bạn tự tạo menu mới trong app. Nếu bạn tạo menu từ mẫu có sẵn hoặc bằng AI, ô này có thể đang tắt nên nhớ kiểm tra lại.
- Áp cho: Tab Bar và Floating Button, mọi gói, mọi nền tảng.
- Chỉ có tác dụng khi Show menu on mobile đang bật.
- Khách thấy gì: mới vào trang thì menu hiện. Khách cuộn xuống thì menu trượt ẩn đi, cuộn lên lại hiện ra. Ở sát đầu trang menu luôn hiện; chạm đáy trang menu luôn ẩn.
- Khi bật ô này, Navi+ không chừa khoảng trống cuối trang cho Tab Bar vì thanh này tự ẩn khi khách cuộn xuống. Khi tắt, cuối trang có thêm một khoảng trống đúng bằng chiều cao Tab Bar để thanh menu không đè lên chân trang.
Only show after scrolling down on Mobile
Nằm ngay dưới ô Hide when scrolling down trong cùng khối Scroll effects. Dùng khi bạn muốn trang đầu sạch sẽ, chỉ cho menu xuất hiện khi khách đã cuộn đọc.
- Lựa chọn: nút gạt bật/tắt.
- Mặc định cho menu mới: tắt.
- Áp cho: Tab Bar và Floating Button, mọi gói, mọi nền tảng.
- Chỉ có tác dụng khi Show menu on mobile đang bật.
- Khách thấy gì: mới vào trang thì menu ẩn. Khách cuộn xuống thì menu hiện ra, cuộn lên lại ẩn đi. Ở sát đầu trang menu luôn ẩn; chạm đáy trang menu luôn hiện.
Hide when scrolling down on desktop screen
Giống ô trên nhưng cho máy tính. Nằm ở Configure › Display on desktop › khối Scroll effects.
- Lựa chọn: nút gạt bật/tắt.
- Mặc định cho menu mới: tắt.
- Áp cho: Tab Bar và Floating Button, mọi gói, mọi nền tảng.
- Chỉ có tác dụng khi Show menu on desktop đang bật. Nếu Tab Bar của bạn đặt làm thanh dọc sát mép trái hoặc phải màn hình thì ô này không có tác dụng (Floating Button thì luôn có).
- Khách thấy gì: cuộn xuống thì menu ẩn, cuộn lên thì hiện lại; cách hoạt động giống ô trên điện thoại.
Only show after scrolling down on Desktop
Giống ô Only show after scrolling down on Mobile nhưng cho máy tính. Nằm ngay dưới ô trên, trong Configure › Display on desktop › Scroll effects.
- Lựa chọn: nút gạt bật/tắt.
- Mặc định cho menu mới: tắt.
- Áp cho: Tab Bar và Floating Button, mọi gói, mọi nền tảng.
- Chỉ có tác dụng khi Show menu on desktop đang bật. Tab Bar dạng thanh dọc sát mép trái/phải cũng không dùng được ô này.
- Khách thấy gì: mới vào trang menu ẩn, cuộn xuống thì hiện ra, cuộn lên thì ẩn lại.
Khoá trang khi mở menu con
Lock page scroll when submenu is open
Nằm trong Configure › Display on mobile › khối Overlay & page scroll. Ô này chỉ có ở Tab Bar và chỉ hoạt động trên điện thoại.
- Lựa chọn: nút gạt bật/tắt.
- Mặc định cho menu mới: bật.
- Áp cho: chỉ Tab Bar, mọi gói, mọi nền tảng.
- Khách thấy gì: khi bật, lúc khách mở menu con cấp 2 hoặc cấp 3, trang web phía sau đứng yên, khách chỉ cuộn riêng danh sách menu con. Khách không bị trượt nhầm trang bên dưới và Tab Bar không bị tự ẩn khi menu con đang mở. Khi tắt, khách có thể vừa mở menu con vừa cuộn trang phía sau, nên nếu menu con dài thì có thể cuộn cả hai chỗ cùng lúc.
- Hầu hết shop nên giữ nguyên là bật.
Vuốt ngang menu trên điện thoại
Khi danh sách mục menu dài quá màn hình điện thoại, khối Horizontal scroll (Mobile only) giúp khách vuốt ngang qua lại để xem tiếp. Khối này nằm trong thẻ Display on mobile, chỉ có ở Icon Menu và Mobile Mega Menu, và ẩn đi nếu bạn tắt Show menu on mobile.
Enable horizontal scrolling on mobile
Nằm ở đầu khối Horizontal scroll (Mobile only). Dùng khi hàng menu dài hơn màn hình điện thoại.
- Lựa chọn: nút gạt bật/tắt. Dòng nhỏ kèm theo ghi “If the layout < Screen width”, nghĩa là dùng khi tổng bề ngang các mục lớn hơn màn hình.
- Mặc định cho menu mới: tắt.
- Áp cho: Icon Menu và Mobile Mega Menu, mọi gói, mọi nền tảng.
- Khách thấy gì: bật thì hàng menu trên điện thoại cuộn ngang được, thay vì bị xuống dòng. Trên máy tính menu luôn trải rộng 100% khung chứa và không cuộn ngang.
- Khi bật, ô Fix width of the menu bên dưới mới hiện ra.
Fix width of the menu (px)
Nằm ngay dưới nút gạt Enable horizontal scrolling on mobile. Đây là tổng bề ngang vùng cuộn của menu.
- Lựa chọn: số, đơn vị px.
- Mặc định cho menu mới:
520. - Áp cho: Icon Menu và Mobile Mega Menu.
- Chỉ hiện khi Enable horizontal scrolling on mobile đang bật. Nếu số này để trống hoặc bằng 0, menu coi như không cuộn ngang.
- Khách thấy gì tuỳ cách bạn chia độ rộng từng mục:
- Mục menu để Auto width: bạn không cần bận tâm số này, app tự co giãn theo khung chứa và tự cho vuốt ngang nếu các mục dài quá màn hình.
- Mục menu chia theo cột lưới như 2/10: con số này quyết định tổng bề ngang của cả lưới. Trên điện thoại, các mục có thể rớt xuống thành nhiều hàng và chia đều nhau trong bề ngang bạn đã nhập.
Scroll to screen edges
Nằm cuối khối Horizontal scroll (Mobile only), ngay dưới ô Fix width of the menu. Ô này chỉ có ở Mobile Mega Menu.
- Lựa chọn: nút gạt bật/tắt. Dòng nhỏ kèm theo ghi: “Items slide all the way to the edges of the phone screen, even when the theme section has side margins”.
- Mặc định cho menu mới: bật với Mobile Mega Menu tạo mới từ mẫu Blank (wizard và AI cũng đặt như vậy). Menu cũ chưa có ô này thì giữ tắt, hiển thị như trước.
- Áp cho: chỉ Mobile Mega Menu.
- Khách thấy gì: bật thì hàng mục cuộn ngang chạy tràn tới hai mép màn hình, thay vì bị lề của section theme cắt. Tắt thì hàng mục bị giữ trong khung lề của theme. Cài đặt này áp cho cả vùng cuộn do bạn bật và vùng cuộn mà Navi+ tự bọc khi hàng quá khung.
Loại menu nào có cài đặt nào?
| Khối / ô trong app | Tab Bar | Floating Button | Icon Menu | Mobile Mega Menu | Mobile Menu | Desktop Mega Menu |
|---|---|---|---|---|---|---|
| BG Color và Opacity /100 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Hide when scrolling down / Only show after scrolling down (điện thoại) | ✓ | ✓ | ||||
| Hai ô tương tự trên máy tính: Hide… / Only show… | ✓ | ✓ | ||||
| Lock page scroll when submenu is open | ✓ | |||||
| Enable horizontal scrolling + Fix width of the menu (px) | ✓ | ✓ | ||||
| Scroll to screen edges | ✓ |
Chỉ khối Touch highlight cần gói Business trở lên. Tất cả cài đặt còn lại đều mở sẵn ở mọi gói trên Shopify, Wix và các nền tảng website khác.