Khác với Tab Bar, khi bạn bật Publish cho Mobile Menu, khách vào cửa hàng vẫn chưa thấy menu ngay. Menu chỉ trượt ra khi khách bấm vào một nút mở như nút ☰ trên đầu trang hay một tab dưới đáy màn hình. Bài này hướng dẫn bạn bật menu và chọn nút mở đó.
Chuẩn bị trước khi bật
- Bạn đã tạo xong một Mobile Menu.
- Bạn đã bật app embed của Navi+ trong theme. Nếu chưa bật, bạn xem bài Bật app embed Navi+ trong theme.
Cách bật và chọn nút mở menu
-
Mở menu trong app Navi+, rồi bấm Publish.
1Build Menu2Design3Configure4Preview & Test5PublishOFF1MoreMenu itemsHome/AutoShopcollections/all2AutoCollectionscollectionsAutoContactpages/contactAutoITEMMobileDesktopPreview only9:41•••yourshop.comSTORE -
Bấm Turn on ở góc trên cửa sổ Publish. Status sẽ đổi sang ON và app tự lưu luôn. Lúc này menu đã bật nhưng khách vẫn chưa có chỗ để bấm mở. Nếu bạn dùng Wix hoặc website khác, thay cho nút Turn on sẽ là công tắc Publish this menu.
PublishMethod 1: Open the menu from a menu spotNo code needed — Navi+ already found your theme’s menu icon and logo.STATUS:OFF3Turn on2STEP 1Enable Navi+ in Theme → App embeds Store Connector is on in Dawn. Review
This is Shopify’s standard method - safe and removable anytime.STEP 2Where can shoppers open this menu? Pick one or more.Use your existing menu iconTapping your theme’s ≡ button opens this Navi+ menu instead of the theme drawer.Add a ≡ icon next to your logoNavi+ places a small ≡ icon beside your logo — for desktop, or when the theme has no menu button.Floating buttonAn independent ≡ button floating on your site — tap or click it to open.Somewhere elseTap any element you choose, or insert a ≡ icon before/after it (CSS Selector). For developers too.STEP 3Optimize speed & experience SetupSTEP 4Test this menu Open Test -
Kéo xuống mục Where can shoppers open this menu?, chọn một hoặc nhiều cách để khách bấm mở menu. Bạn xem bảng ngay bên dưới để biết cách nào hợp với cửa hàng của mình.
PublishMethod 1: Open the menu from a menu spotNo code needed — Navi+ already found your theme’s menu icon and logo.STATUS:ONTurn offSTEP 1Enable Navi+ in Theme → App embeds Store Connector is on in Dawn. Review
This is Shopify’s standard method - safe and removable anytime.STEP 2Where can shoppers open this menu? Pick one or more.Use your existing menu iconTapping your theme’s ≡ button opens this Navi+ menu instead of the theme drawer.3Add a ≡ icon next to your logoNavi+ places a small ≡ icon beside your logo — for desktop, or when the theme has no menu button.4Floating buttonAn independent ≡ button floating on your site — tap or click it to open.5Somewhere elseTap any element you choose, or insert a ≡ icon before/after it (CSS Selector). For developers too.6STEP 3Optimize speed & experience SetupSTEP 4Test this menu Open Test -
Bấm lưu, sau đó mở cửa hàng trên điện thoại và bấm thử vào nút mở bạn vừa chọn.
9:41•••yourshop.comSTORESTOREHomeShopCollectionsAbout usContactMobile Menu mở ra sau khi khách bấm
Chọn cách mở menu phù hợp
Trong cửa sổ Publish có bốn thẻ chọn cách mở: Use your existing menu icon, Add a ≡ icon next to your logo, Floating button và Somewhere else. Ngoài ra, bạn cũng có thể gắn menu này vào một mục menu của menu Navi+ khác, chẳng hạn như một tab trên Tab Bar. Cả năm cách đều mở ra cùng một Mobile Menu.
| Cách mở | Khi nào nên dùng | Bạn cần làm gì |
|---|---|---|
| Nút ☰ của theme — Use your existing menu icon | Theme đã có sẵn nút ☰ trên điện thoại và bạn muốn bấm vào đó sẽ mở menu Navi+ thay cho menu cũ của theme | Navi+ tự tìm nút ☰ của theme. Nếu app chưa tìm thấy, bạn cần điền thêm CSS selector theo hướng dẫn tại bài Tìm chỗ đặt menu bằng Navi+ Live |
| Tab trên Tab Bar hoặc mục của menu Navi+ khác | Bạn có một Tab Bar dưới đáy màn hình và muốn bấm vào tab “Menu” để mở ngăn kéo | Bạn dán đoạn mã open:NaviMenu(mã menu) vào ô link của mục menu đó. Mã này nằm sẵn trong cửa sổ Publish của Mobile Menu, chỉ cần bấm vào để chép chứ không phải một thẻ chọn riêng |
| Icon Navi+ chèn thêm — Add a ≡ icon next to your logo | Theme không có nút ☰, hoặc bạn muốn có thêm nút ☰ trên máy tính | Không cần cài thêm gì. Navi+ sẽ tự đặt một icon ☰ nhỏ ngay cạnh logo |
| Nút nổi — Floating button | Bạn muốn có một nút mở menu luôn nổi ở góc màn hình | Không cần cài thêm gì. Bạn chỉnh được chữ, icon, màu sắc và vị trí của nút ngay bên dưới |
Ngoài bốn cách trên còn có thẻ Somewhere else. Thẻ này giúp bạn biến bất kỳ thành phần nào trên trang thành nút mở menu, hoặc chèn icon ☰ vào ngay trước hay sau thành phần đó bằng CSS selector, tức địa chỉ của phần tử trên trang.
Dùng nút có sẵn trên theme Shopify
Navi+ đã đo sẵn vị trí nút ☰, logo, icon tìm kiếm và icon giỏ hàng của hơn 300 theme Shopify phổ biến. Nhờ vậy, khi bạn chọn Use your existing menu icon, menu thường chạy được ngay mà không cần điền selector. Nếu theme của bạn chưa có trong danh sách hỗ trợ sẵn, bạn hãy chọn thẻ Somewhere else rồi dùng công cụ Navi+ Live để chỉ vào nút cần bấm trên trang.
Mở cùng một menu từ nhiều chỗ
Bạn có thể bật nhiều cách mở cho cùng một Mobile Menu. Ví dụ, trên điện thoại khách bấm nút ☰ của theme, còn trên máy tính khách bấm icon cạnh logo.
Nếu bạn muốn hiển thị nhiều Mobile Menu có nội dung khác nhau trên cùng một trang, hãy tạo từng menu riêng và chọn nút mở riêng cho mỗi menu.
Cách khách đóng menu
Khi menu đang mở, khách bấm nút ✕ ở góc menu để đóng lại. Bạn có thể đổi kiểu nút đóng và hiệu ứng trượt ra tại bài Mũi tên, nút đóng và hiệu ứng mở menu.
Xử lý khi menu không mở như ý
Đã bật Publish nhưng menu không mở
Nếu bạn mới chỉ bấm Turn on mà chưa chọn cách mở ở bước 3 thì menu sẽ chưa thể hiện ra. Hãy quay lại bước 3 để chọn ít nhất một cách mở. Nếu bạn đã chọn rồi mà bấm vào vẫn không thấy gì, hãy xem bài Bấm nút menu (☰) mà Mobile Menu không mở.
Không biết lấy CSS selector của nút ☰ ở đâu
Bạn không cần tự tìm trong mã nguồn. Hãy dùng công cụ Navi+ Live và bấm thẳng vào nút ☰ trên trang cửa hàng, Navi+ sẽ tự lấy địa chỉ nút đó cho bạn. Xem hướng dẫn tại bài Tìm chỗ đặt menu bằng Navi+ Live.
Bấm nút ☰ thì mở ra cả hai menu cùng lúc
Khi bấm nút ☰, cả menu cũ của theme lẫn menu Navi+ đều trượt ra vì menu của theme chưa được tắt. Bạn xem cách khắc phục tại bài Menu hiện hai lần hoặc menu theme vẫn còn.
Nền tảng khác
Các bước ở trên dành cho Shopify — đây là cách mặc định.
Trên Wix và các nền tảng khác, không có khối app Menu in Section. Cách mở bằng CSS selector vẫn dùng được. Tab Bar và Floating Button mở Mobile Menu dùng được ở mọi nền tảng. Trên Wix, app tự gắn vào site nên không có bước app embed.
Trên website khác (dash.naviplus.app) và WordPress, không có khối app Menu in Section, chỉ có cách nhập CSS selector. Tab Bar và Floating Button mở Mobile Menu dùng được ở mọi nơi. Thay cho app embed, website khác dán đoạn mã vào head, WordPress kích hoạt plugin Naviplus Menu Builder.