Ngăn kéo menu trượt ra từ cạnh màn hình khi khách bấm nút ☰: chứa toàn bộ danh mục, tối đa 3 cấp, có header, ô tìm kiếm và phần ghim.
Trước khi làm: đã cài Navi+ và bật Store Connector trong theme.
1Chọn loại menu
Trong Navi+ bấm Add menu rồi chọn thẻ Mobile Menu.
2Hai cách bắt đầu
Trình hướng dẫn từng bước
Bấm Create from your website > Build it step by step. Chọn mẫu giao diện (mẫu quyết định dáng ngăn kéo và phần header), chọn danh sách link lấy từ cửa hàng như menu Shopify, collection, trang, rồi chọn kiểu hiển thị. Màn cuối hỏi How does this menu open?.
Tự dựng
Bấm Create from a template > Browse templates rồi chọn thẻ Blank để có menu trống. Bạn thêm từng mục bằng Add item, link lấy từ danh sách collection, sản phẩm và trang của cửa hàng.
Cần cả máy tính lẫn điện thoại? Dựng Desktop Mega trước, rồi nhúng vào đây ở bước 4.
3Chỉnh tay tiếp
Dù dùng trình hướng dẫn hay tự dựng, bạn vẫn chỉnh tay ở Build Menu: thêm mục, kéo thả đổi thứ tự, bấm một mục để đổi tên, link, ảnh. Sang Design để đổi màu và cỡ chữ.
Giới hạn: tối đa 3 cấp (danh mục, danh mục con, link bên trong). Mục có con hiện dấu ›, khách bấm thì cấp sau trượt vào. Hướng trượt đổi ở Configure > Slide-in direction (trái, phải, trên, dưới, toàn màn hình, cửa sổ nổi, thanh bên). Xem Cài đặt ngăn kéo.
4Mẫu item tiêu biểu
Bấm + ITEM để mở popup Add item, rồi chọn mẫu. Ngoài các mẫu thường như Links & icons hay Banner, ngăn kéo có vài mẫu riêng chỉ chèn được ở cấp 1.
Embed Mega menu: dùng lại cây Desktop Mega
Một mục này kéo cả Desktop Mega Menu vào ngăn kéo: cột, nhóm và mục con thu gọn thành danh sách dọc, giữ nguyên cấp. Bạn sửa ở Mega, điện thoại tự đổi theo, hai bên không bao giờ lệch nhau. Mục nhúng đặt ở cấp 1.
Thêm: + ITEM > Special > Embed Mega menu, hoặc trong Mega mở Configure > Smart responsive rồi bấm Copy embed item và dán vào cấp 1 của Mobile Menu. Mục chỉ hợp máy tính thì bật Exclude when embedded ở Visibility của mục đó. Mobile Menu vẫn thêm được mục của riêng nó quanh mục nhúng, như ô tìm kiếm hay nút WhatsApp. Case study: Mega, Mobile Menu và Tab Bar dùng chung một cây
Top header: header dựng sẵn
Ở Basics: logo, tên shop, ô tìm kiếm, lối tắt, tài khoản và mạng xã hội trong một khối ở đầu ngăn kéo. Mỗi ngăn kéo chỉ nên có một, đặt trên cùng.
Sticky line: ghim đầu và chân
Ở Special: thêm dòng Pin header và Pin footer để các mục phía trên và phía dưới đứng yên, chỉ phần giữa cuộn. Hợp để ghim ô tìm kiếm ở đầu và nút đăng nhập ở chân.
Shopify menu: nhúng nguyên menu Shopify
Ở Special: một mục lấy cả menu bạn đang quản lý trong Shopify (Online Store > Navigation). Sửa bên Shopify, bấm Sync now để cập nhật. Chỉ có ở Mobile Menu, đặt ở cấp 1.
Tabs: nhiều bảng trong ngăn kéo
Ở Basics: chia ngăn kéo thành thanh tab ngang (Women, Men, Kids), mỗi tab chứa danh mục riêng. Khách chuyển tab bằng cách bấm, không tải lại trang.
5Publish: chọn nút mở menu
Mở Publish, chọn nút để khách bấm mở rồi bấm Turn on. Mobile Menu không tự hiện trên trang: chưa có nút mở thì bật rồi vẫn không thấy gì. Navi+ đã tự tìm sẵn nút ☰ trên theme của bạn.
Mở từ nút ☰ của theme
Use your existing menu icon: khách bấm nút ☰ quen thuộc trên header, ngăn kéo của Navi+ trượt ra thay cho ngăn kéo cũ của theme. Khuyên dùng khi theme đã có nút ☰. Chưa có nút phù hợp thì chọn Add a ≡ button to your header hoặc Floating button.
Mở từ một mục của menu khác
Đặt link của mục thành open:NaviMenu(…) (mã nằm ở cuối cửa sổ Publish, bấm để chép). Cách quen nhất: tab Menu trên Tab Bar mở thẳng ngăn kéo này, nằm đúng tầm ngón cái. Không cần theme, luôn dùng được.
Hướng trượt và dáng ngăn kéo
Mặc định menu trượt từ cạnh trái. Bạn đổi sang phải, trên, dưới, toàn màn hình, cửa sổ nổi hoặc thanh bên cố định ở Configure > Slide-in direction; vài mẫu đã cố định dáng nên ẩn mục này.
Xem cài đặt ngăn kéoNề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, Add menu mở thẳng bộ chọn mẫu thay cho trình hướng dẫn ở trên; bật menu bằng công tắc Publish this menu rồi Save, không có nút Turn on. Wix không có khối app “Menu in Section”, nút ☰ của site cần CSS selector của nút đó; mở bằng tab Tab Bar hoặc nút nổi thì không cần. Mục Shopify menu chỉ có trên Shopify.
Trên WordPress và website khác, Add menu mở thẳng bộ chọn mẫu thay cho trình hướng dẫn ở trên; bật menu bằng công tắc Publish this menu rồi Save, không có nút Turn on. Không có khối “Menu in Section”, nút ☰ của theme cần CSS selector của đúng nút đó (cách tìm: Tìm chỗ đặt menu bằng Navi+ Live); mở bằng tab Tab Bar hoặc nút nổi thì không cần. Mục Shopify menu chỉ có trên Shopify.