Mobile Mega Menu và Icon Menu nằm xen vào nội dung trang chứ không nổi lên trên màn hình như Tab Bar. Vì vậy chỉ bấm Turn on thì menu chưa hiện ra — bạn cần chỉ cho Navi+ chỗ đặt menu trên trang.
Cách đặt giống hệt Desktop Mega Menu. Nếu bạn muốn xem kỹ hơn về thay thế, chèn trước/sau và CSS selector, hãy đọc bài đó.
Trước khi bắt đầu
- Đã bật app embed Navi+ trên theme đang chạy.
- Đã tạo xong Mobile Mega Menu hoặc Icon Menu.
- Mở menu trong Navi+, bấm Publish, rồi bấm Turn on ở góc trên cửa sổ để đổi từ Status: OFF sang Status: ON. Nút này tự lưu ngay, không cần bấm Save.
Cách 1: Kéo app block vào theme
Cách này không cần dùng CSS selector. Bạn kéo menu thả vào đúng chỗ mình muốn ngay trong trình chỉnh sửa theme và thấy kết quả ngay lúc kéo.
-
Trong cửa sổ Publish, mở mục Method 2: Insert as an App block in your theme editor rồi bấm vào Menu ID để sao chép.
-
Trong trang quản trị Shopify, vào Online Store > Themes > Customize. Mở trang bạn muốn đặt menu như trang chủ, bấm Add section hoặc Add block, rồi chọn Menu in Section trong mục Apps.
Home page Header Image bannerMenu in SectionNavi+ Menus3Menu in Section Featured collection Add block2ThêmSTOREHomeShopCollectionsAboutContact -
Dán Menu ID vào ô cài đặt của khối, kéo khối tới vị trí bạn muốn, rồi bấm Save ở góc trên.
9:41•••yourshop.comSTOREIcon Menu nằm giữa banner và sản phẩm
App block chỉ thả được vào những chỗ theme cho phép thêm khối. Nếu vị trí bạn muốn không cho thêm khối, hãy dùng Cách 2.
Cách 2: Đặt bằng CSS selector
Cách này giúp bạn đặt menu chính xác vào bất kỳ phần nào trên trang: chọn một thành phần có sẵn rồi chèn menu lên trước, xuống sau, hoặc thay thế nó.
-
Trong cửa sổ Publish, nhìn xuống phần Choose a menu placement. Để đặt menu ngay dưới header, bạn chọn thẻ Add below your header.
PublishMethod 1: Put the menu into a menu placementNo code needed — Navi+ already found where it fits on your theme.Turn onSTEP 1Enable Navi+ in Theme → App embeds Store Connector is on in Dawn. Review
This is Shopify’s standard method - safe and removable anytime.STEP 2Choose a menu placementWhere this Mobile Mega Menu shows up on your store.Replace your main menuYour mobile navigation is swapped for this Mobile Mega Menu. Logo, search and cart stay.Add below your headerA full-width bar inserted right under the header on mobile. Your navigation stays.1Somewhere elseBefore, after or in place of any element you choose (CSS Selector).Placement found by Navi+.site-headerSTEP 3Optimize speed & experience SetupSTEP 4Test this menu Open TestMethod 2: Insert as an App block in your theme editor -
Nếu muốn đặt ở chỗ khác, bạn chọn thẻ Somewhere else, chọn kiểu thay thế, chèn trước hoặc chèn sau, rồi dán địa chỉ thành phần trên trang vào ô CSS Selector.
PublishMethod 1: Put the menu into a menu placementNo code needed — Navi+ already found where it fits on your theme.Turn onSTEP 1Enable Navi+ in Theme → App embeds Store Connector is on in Dawn. Review
This is Shopify’s standard method - safe and removable anytime.STEP 2Choose a menu placementWhere this Icon Menu shows up on your store.Insert afterReplaceInsert beforeReplace your main menuYour desktop navigation is swapped for this Icon Menu. Logo, search and cart stay.Add below your headerIcon tiles right under the header, above your page content. Your navigation stays.Somewhere elseBefore, after or in place of any element you choose (CSS Selector).CSS Selector (How?).hero-banner2STEP 3Optimize speed & experience SetupSTEP 4Test this menu Open TestMethod 2: Insert as an App block in your theme editor -
Bấm Save, rồi mở cửa hàng trên điện thoại để kiểm tra.
Bạn chưa biết lấy địa chỉ điền vào ô CSS Selector ở đâu? Xem bài Tìm chỗ đặt menu bằng Navi+ Live. Nếu trên trang có nhiều phần khớp với cùng một selector, Navi+ sẽ đặt menu vào phần đầu tiên.
Lưu ý riêng cho Mobile Mega Menu
- Chỉ hiện trên điện thoại: khi bạn chọn Add below your header, Navi+ tự thêm đuôi
(M)vào selector để thanh menu không hiện dưới header trên máy tính. Với bản máy tính, bạn dùng Desktop Mega Menu. - Giữ thanh menu ở đầu trang khi cuộn: nếu header của theme không tự ghim khi khách cuộn trang, bạn bật Keep the menu at the top of the page when scrolling up. Công tắc này nằm trong mục app block của cửa sổ Publish.
Dùng nhiều Icon Menu cho từng trang
Mỗi Icon Menu chỉ nên dùng cho một trang. Muốn trang chủ hiện một lưới icon, trang bộ sưu tập hiện một lưới khác, bạn hãy tạo từng Icon Menu riêng rồi cài đặt quy tắc hiển thị cho từng cái, đừng cố nhét chung một lưới vào mọi trang. Xem cách làm ở bài Chọn trang, thiết bị và khách hàng thấy menu.
Bạn cũng có thể xếp hai Icon Menu nằm liền nhau: trong cửa sổ Publish, chọn Below another Icon Menu, rồi chọn tên Icon Menu đã bật trước đó. Cách này không cần điền CSS selector.
Xử lý khi gặp lỗi
Menu không hiện
Chỉ bấm Turn on thì menu chưa có vị trí trên trang. Bạn làm tiếp Cách 1 hoặc Cách 2, kiểm tra xem app embed đã bật chưa, rồi xem thêm Menu không hiện trên cửa hàng.
Menu hiện sai chỗ
Thử chọn thẻ khác trong mục Choose a menu placement, hoặc chuyển sang dùng app block và kéo khối tới đúng chỗ bạn muốn. Xem thêm Menu hiện sai chỗ hoặc làm vỡ header.
Menu hiện ở trang không mong muốn
Bạn giới hạn lại trang hiển thị theo nhóm trang hoặc từ khoá trong đường dẫn. Xem hướng dẫn tại Chọn trang, thiết bị và khách hàng thấy menu.
Menu hiện hai lần
Thường do bạn bật cả app block lẫn CSS selector cùng lúc. Bạn chỉ cần tắt một trong hai cách. Xem thêm Menu hiện hai lần.
Nền tảng khác
Các bước ở trên dành cho Shopify — đây là cách mặc định.
Navi+ chạy như app của Wix, không có app block Menu in Section. Cửa sổ Publish có sẵn bảng selector cố định của Wix (Wix navigation selector map) để bạn chép vào ô CSS Selector, rồi chọn thay thế, chèn trước hoặc chèn sau.
Website khác (kể cả WordPress) không có app block Menu in Section: chỉ đặt menu bằng CSS selector. Bật Publish menu by Insert/Replace method, dán CSS selector rồi chọn chèn trước, chèn sau hoặc thay thế. Thêm hậu tố (M) cho điện thoại hoặc (D) cho máy tính. Trên WordPress, bạn cũng có thể dán shortcode [naviwp embed_id="..."] vào trang, widget hoặc trình dựng trang.