Desktop Mega Menu nằm ngay trong thanh header trên đầu trang, nên chỉ bấm Turn on thôi thì menu vẫn chưa hiện ra. Bạn cần chỉ thêm cho Navi+ biết phải đặt menu vào vị trí nào trong header. Bài này hướng dẫn bạn cách đặt menu trên Shopify.
Chuẩn bị trước khi đặt menu
- Bạn đã bật app embed Navi+ trên theme đang dùng.
- Bạn đã tạo xong Desktop Mega Menu và thêm sẵn vài mục menu.
- Bạn chỉ cần làm một trong hai cách bên dưới: chọn vị trí ngay trong cửa sổ Publish, hoặc kéo khối app Menu in Section vào trình chỉnh sửa theme.
Cách 1: Chọn vị trí trong cửa sổ Publish
Navi+ tự nhận diện theme bạn đang dùng và gợi ý sẵn các vị trí phù hợp trong header, nên thường bạn chỉ cần bấm chọn chứ không phải gõ mã.
-
Trong trang quản trị Shopify, vào Apps > Navi+, mở menu của bạn rồi bấm Publish. Nhìn dòng báo app embed ở đầu cửa sổ: nếu Navi+ chưa bật trên theme, bạn bấm nút Enable Navi+ in kèm tên theme để mở trình chỉnh sửa theme, bật Navi+ lên rồi bấm Save ở góc trên.
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 embedsNot enabled yet Enable Navi+ in Dawn
Not enabled yet — the menu cannot show until Navi+ is on in your theme. View guide
This is Shopify’s standard method - safe and removable anytime.1App embed phải bậtSTEP 2Choose a menu placementWhere this Mega Menu shows up on your store.Replace your main menuYour desktop navigation is swapped for this Mega Menu. Logo, search and cart stay.Add below your headerA full-width bar inserted right under the header. Your navigation stays.Somewhere elseBefore, after or in place of any element you choose (CSS Selector).Placement found by Navi+header navSTEP 3Optimize speed & experience SetupSTEP 4Test this menu Open TestMethod 2: Insert as an App block in your theme editor -
Bấm nút Turn on ở góc phải cửa sổ. Nhãn Status sẽ đổi từ OFF sang ON và app tự lưu. Nếu bạn chưa chọn chỗ đặt ở bước 3, app sẽ nhắc bạn chọn trước khi bật. Chỉ bật nút này thôi thì menu vẫn chưa hiện trên cửa hàng.
PublishMethod 1: Put the menu into a menu placementNo code needed — Navi+ already found where it fits on your theme.Turn 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 2Choose a menu placementWhere this Mega Menu shows up on your store.Replace your main menuYour desktop navigation is swapped for this Mega Menu. Logo, search and cart stay.Add below your headerA full-width bar inserted right under the header. Your navigation stays.Somewhere elseBefore, after or in place of any element you choose (CSS Selector).Placement found by Navi+header navSTEP 3Optimize speed & experience SetupSTEP 4Test this menu Open TestMethod 2: Insert as an App block in your theme editor - Ở mục Choose a menu placement, bấm chọn một thẻ vị trí:
- Replace your main menu: thay dải menu cũ của theme bằng Desktop Mega Menu. Logo, thanh tìm kiếm và giỏ hàng vẫn giữ nguyên chỗ cũ.
- Add below your header: chèn một thanh menu mới trải rộng hết chiều ngang ngay dưới header. Menu cũ của theme vẫn giữ nguyên.
- Somewhere else trong mục Advanced: thay thế, chèn lên trước hoặc đặt ra sau bất kỳ phần nào trên trang bằng CSS selector — tức địa chỉ của phần tử đó trên trang web.
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 Mega Menu shows up on your store.Replace your main menuYour desktop navigation is swapped for this Mega Menu. Logo, search and cart stay.3Thay menu chínhAdd below your headerA full-width bar inserted right under the header. Your navigation stays.4Dưới headerSomewhere elseBefore, after or in place of any element you choose (CSS Selector).5Chỗ khácPlacement found by Navi+header navSTEP 3Optimize speed & experience SetupSTEP 4Test this menu Open TestMethod 2: Insert as an App block in your theme editor -
Nếu bạn chọn Somewhere else, hãy dán địa chỉ vị trí vào ô CSS Selector. Bạn chưa biết lấy địa chỉ này ở đâu thì xem bài Tìm chỗ đặt menu bằng Navi+ Live.
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 Mega Menu shows up on your store.Insert afterReplaceInsert beforeReplace your main menuYour desktop navigation is swapped for this Mega Menu. Logo, search and cart stay.Add below your headerA full-width bar inserted right under the header. Your navigation stays.Somewhere elseBefore, after or in place of any element you choose (CSS Selector).CSS Selector (How?).site-header4STEP 3Optimize speed & experience SetupSTEP 4Test this menu Open TestMethod 2: Insert as an App block in your theme editor -
Nếu bạn đổi sang vị trí khác sau khi đã bật menu, hãy bấm Save để lưu lại. Cuối cùng, mở cửa hàng trên máy tính để xem menu đã hiện đúng chỗ chưa.
STOREHomeShopCollectionsAboutContactClothingT-shirtsHoodiesJacketsPantsShoesSneakersBootsSandalsSlippersAccessoriesBagsHatsSocksBeltsNew seasonDesktop Mega Menu thay cho dải menu cũ trong header
Nếu cửa sổ báo chưa tìm thấy chỗ đặt, bấm Find it in Live mode rồi bấm vào phần bạn muốn trên cửa hàng vừa mở ra. Chi tiết ở bài Tìm chỗ đặt menu bằng Navi+ Live.
Cách 2: Kéo app block vào theme
Cách này không cần dùng CSS selector, và bạn nhìn thấy ngay vị trí của menu trên trang trong lúc kéo thả.
-
Trong cửa sổ Publish, bấm vào dòng Method 2: Insert as an App block in your theme editor đang thu gọn để mở ra, rồi bấm vào Menu ID để chép mã menu.
-
Trong trang quản trị Shopify, vào Online Store > Themes > Customize. Ở phần header bên cột trái, bấm Add block rồi chọn Menu in Section trong nhóm Apps.
Home page Header Image bannerMenu in SectionNavi+ Menus3Menu in Section Featured collection Add block2Thêm khốiSTOREHomeShopCollectionsAboutContact -
Dán mã Menu ID vừa chép vào ô cài đặt của khối, rồi bấm Save ở góc trên.
Nếu theme của bạn không cho thêm app block vào đúng chỗ bạn muốn, hãy quay lại dùng Cách 1.
Thay thế khác gì với chèn thêm?
| Thay thế — Replace | Chèn trước hoặc sau — Insert | |
|---|---|---|
| Menu cũ của theme | Ẩn đi, menu Navi+ thế vào đúng chỗ đó | Vẫn còn nguyên, menu Navi+ hiện ngay bên cạnh |
| Phù hợp khi | Bạn chỉ muốn dùng một menu duy nhất | Bạn muốn gắn thêm thanh menu thứ hai, hoặc đang đặt thử để so sánh |
| Điểm cần tránh | Nếu chọn nhầm vùng bao cả header thì sẽ mất luôn logo và giỏ hàng | Khách sẽ thấy hai menu cùng lúc nếu bạn chưa ẩn menu của theme |
| Cài đặt thêm | Nên bật thêm ô giữ chỗ chống nháy ở mục bên dưới | Không cần |
Bạn nên chọn cách nào?
- Chỉ muốn một menu gọn gàng trên header: chọn Replace your main menu ở Cách 1.
- Đã ưng menu sẵn có của theme, chỉ muốn gắn thêm một thanh danh mục bên dưới: chọn Add below your header.
- Muốn đặt menu vào một vị trí riêng, căn đúng từng khung trên trang: chọn Somewhere else kèm CSS selector.
- Không muốn đụng tới CSS selector: kéo app block vào theme như Cách 2.
Bạn có thể bật cả hai cách cùng lúc, nhưng thông thường chỉ nên dùng một cách. Bật cả hai rất dễ làm menu hiện lặp lại hai lần trên trang.
Giữ header không bị nháy và tự đổi màu chữ
Khi bạn chọn cách thay thế menu cũ, menu của theme sẽ ẩn đi trước lúc Navi+ kịp vẽ xong menu mới, nên thanh header có thể bị nháy hoặc giật nhẹ lúc mới tải trang. Ngay trong cửa sổ Publish có mục tối ưu mang nhãn Replace only giúp đặt sẵn một khung giữ chỗ vào vị trí menu cũ để giữ trang đứng yên. Cách này chỉ áp dụng khi bạn chọn thay thế menu. Bạn xem hướng dẫn chi tiết tại bài Cài đặt giúp menu tải nhanh, không nháy.
Nếu thanh header của bạn trong suốt khi ở đầu trang rồi đổi sang nền trắng khi khách cuộn xuống, hãy giữ bật Auto text color. Công tắc này giúp chữ trên menu tự đổi màu theo nền header, tránh tình trạng chữ trắng chìm mất trên nền trắng, và cũng chỉ áp dụng cho cách thay thế menu.
Xử lý khi menu hiện chưa đúng
Đã bật Publish nhưng không thấy menu
Chỉ bấm nút Turn on thì menu vẫn chưa biết phải hiện ở đâu trên trang. Bạn cần chọn thêm một thẻ vị trí ở mục Choose a menu placement, hoặc kéo app block vào theme. Sau đó, hãy kiểm tra xem app embed đã bật chưa. Bạn có thể xem đầy đủ các nguyên nhân tại bài Menu không hiện trên cửa hàng.
Menu làm mất luôn cả thanh header
Nguyên nhân là bạn đã chọn nhầm khung bao cả thanh header thay vì chỉ chọn riêng dải menu. Hãy quay lại Cách 1 và chọn thẻ Replace your main menu. Nếu bạn đang tự điền CSS selector, hãy chọn lại phần tử nhỏ hơn nằm bên trong, chỉ bao quanh dải link điều hướng.
Menu cũ của theme vẫn không biến mất
Có thể bạn đang chọn chèn trước hoặc chèn sau chứ không phải thay thế, hoặc theme của bạn có tới hai dải menu. Hãy đổi sang kiểu Replace, hoặc xem cách xử lý tại bài Ẩn menu có sẵn của theme và Menu hiện hai lần.
Thanh header bị nháy khi tải trang
Bạn hãy bật thêm khung giữ chỗ lúc tải trang ngay trong cửa sổ Publish. Xem từng bước cài đặt tại bài Cài đặt giúp menu tải nhanh, không nháy.
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. 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ế hoặc chèn. Wix không có app block Menu in Section.
Website khác (kể cả WordPress) không có app block Menu in Section: chỉ đặt menu bằng CSS selector. Trong cửa sổ Publish, bật công tắc Publish this menu, dán CSS selector, rồi chọn chèn trước, chèn sau hoặc thay thế. Thêm hậu tố (D) sau selector (ví dụ header(D)) để chỉ áp dụng trên máy tính.