Add a mega menu to Shopify's Zest theme — Navi+ setup
Trên cửa hàng demo trực tiếp: Slide Menu kết nối vào hamburger hiện tại (.icon) và ẩn drawer gốc (#Drawer-MobileNav) — không có thay đổi hiển thị cho khách hàng; Mega Menu chèn gọn gàng bên dưới header — theme này không có vấn đề tràn ngang (headerInsertSafe = true). Bảng bộ chọn và các hướng dẫn thiết lập dưới đây dành riêng cho theme này.
1 Phân tích chủ đề
generic phù hợp như mong đợi2 Giải phẫu điều hướng — bản đồ bộ chọn
Các bộ chọn được xác nhận duy nhất (matchCount = 1) trên cửa hàng demo trực tiếp. Vai trò chỉ hiển thị nếu được tìm thấy.
| Vai trò | Bộ chọn CSS | Nền tảng | Được sử dụng cho |
|---|---|---|---|
| Các điểm gắn Navi+ | |||
| Kích hoạt hamburger | .icon |
Di động | Navi+ liên kết tại đây để kích hoạt Slide Menu |
| Tiêu đề | .header |
Di động + Máy tính để bàn | Chèn Mega Menu bên dưới header của Zest |
| Thực đơn chính | ul.f-site-nav__list |
Máy tính để bàn | Navi+ Mega Menu thay thế nội dung nav trên desktop |
| Logo | .f-site-nav__item--current > a:nth-child(1) |
Di động + Máy tính để bàn | Dự phòng — chèn biểu tượng kích hoạt trước logo khi không có hamburger |
| Bộ kích hoạt bảng điều khiển | |||
| Kích hoạt hamburger | .icon |
Di động | Nhấn để mở drawer di động gốc |
| Biểu tượng tìm kiếm | .site-header__search-toggle |
Di động + Máy tính để bàn | Nhấn để mở bảng điều khiển tìm kiếm / lớp phủ |
| Biểu tượng giỏ hàng | a[aria-label*='cart' i] |
Di động + Máy tính để bàn | Nhấn để mở drawer giỏ hàng / bảng điều khiển |
Thêm Navi+ Tab Bar vào chủ đề Shopify Zest
Tab Bar ghim một dải điều hướng cố định vào cuối màn hình trên di động — ngay nơi ngón tay cái đặt. Zest những người mua hàng của bạn tiếp cận thực đơn, tìm kiếm và giỏ hàng của bạn từ bất kỳ trang nào mà không cần cuộn lại tiêu đề.
- Điều hướng theo kiểu ứng dụng — cảm nhận tự nhiên cho web di động
- Truy cập giỏ hàng một lần để nâng tỷ lệ thanh toán trên di động
- Nằm dưới tiêu đề Zest — không bao giờ cạnh tranh với điều hướng riêng của chủ đề
Mỗi trường Link của tab chấp nhận URL bình thường, open:NaviMenu(EMBED_ID) để mở thực đơn Navi+ khác, hoặc hành động mở tích hợp kích hoạt các bảng của Zest. Navi+ giữ ngăn kéo, tìm kiếm và giỏ hàng của chủ đề — tab chỉ mở chúng.
.icon.site-header__search-togglea[aria-label*='cart' i]- Trong Navi+, tạo thực đơn mới và chọn Tab Bar.
- Thêm các tab của bạn — tên, biểu tượng, badge số lượng giỏ hàng và liên kết từng cái (ví dụ: Trang chủ, Cửa hàng, Tìm kiếm, Giỏ hàng, Thực đơn).
- Để mở ngăn kéo, tìm kiếm hoặc giỏ hàng gốc của Zest, hãy đặt liên kết tab thành hành động mở phù hợp. Để mở menu Slide hoặc Mega của Navi+ thay vào đó, hãy sử dụng
open:NaviMenu(EMBED_ID). - Mở Publish, bật chế độ sticky, và đặt bộ lọc thiết bị thành Mobile.
Thay thế ngăn kéo di động Zest bằng Thực đơn Trượt Navi+
Thực đơn Trượt thay thế ngăn kéo di động mặc định của Zest bằng bảng điều khiển phong phú hơn — biểu tượng, hình ảnh và nhóm tùy chỉnh — được mở bởi cùng nút hamburger mà những người mua hàng của bạn đã sử dụng.
- Điều hướng đa cấp không giới hạn với biểu tượng và hình ảnh
- Cùng nút, cùng vị trí — những người mua hàng không bao giờ nhận thấy sự thay đổi
- Lý tưởng cho các danh mục có nhiều bộ sưu tập để sắp xếp trên di động
Kích hoạt hamburger .icon đã được xác nhận duy nhất trên bản demo trực tiếp Zest, vì vậy Navi+ mở Thực đơn Trượt từ nút chính xác mà những người mua hàng đã nhấn.
- Trong Navi+, tạo thực đơn mới và chọn Slide Menu.
- Thêm các danh mục của bạn với biểu tượng, màu sắc, hình ảnh và bao nhiêu cấp độ khi bạn cần.
- Mở Publish, bật menu, sau đó đặt trigger thành
.icon— trình chọn hamburger của Zest. - Lưu. Thực đơn Trượt hiện mở từ nút đó. Thêm
(M)để giữ nó chỉ trên di động.
Thêm Thực đơn Lưới Navi+ vào chủ đề Zest
Thực đơn Lưới hiển thị các bộ sưu tập của bạn dưới dạng lưới hình ảnh — một trình khởi chạy theo kiểu ứng dụng cho phép những người mua hàng nhảy thẳng đến bất kỳ bộ sưu tập nào chỉ bằng một lần chạm.
- Trực quan, lấy hình ảnh làm trung tâm — những người mua hàng thấy bộ sưu tập trước khi đọc tên của nó
- Không cần bộ chọn Zest để gắn kết
- Tuyệt vời cho các cửa hàng có nhiều bộ sưu tập để duyệt nhanh
Thực đơn Lưới có thể được chèn ở một vị trí cố định trên bất kỳ trang Zest nào (chỉ nó vào một bộ chọn CSS), hoặc mở theo yêu cầu từ FAB hoặc tab Tab Bar — tuỳ chọn của bạn.
- Trong Navi+, tạo thực đơn mới và chọn Grid Menu.
- Thêm bộ sưu tập: hình ảnh thu nhỏ, tên hiển thị và liên kết, được sắp xếp theo cách bạn muốn chúng trên lưới.
- Trong Publish, bật phương pháp Insert/Replace, nhập CSS selector đích, và chọn Insert After hoặc Replace.
- Thích cửa sổ bật lên? Bỏ qua bộ chọn và mở nó từ FAB hoặc tab bằng
open:NaviMenu(EMBED_ID).
Thêm nút nổi Navi+ (FAB) vào chủ đề Zest
FAB (Nút Hành động Nổi) là nút nổi ở lại khi cuộn — một phím tắt nhanh đến bất kỳ trang hoặc hành động nào. Không có bộ chọn chủ đề, triển khai trong vài phút.
- Không bao giờ xung đột với bất kỳ phần nào của Zest
- Linh hoạt: liên kết đến giỏ hàng, trang liên hệ, khuyến mãi, bất kỳ URL nào
- Hoạt động trên cả máy tính để bàn và di động
FAB gắn kết hoàn toàn riêng — không cần bộ chọn CSS từ chủ đề Zest. Thiết lập và xuất bản mà không cần kiểm tra bất kỳ bộ chọn nào.
- Trong Navi+, tạo thực đơn mới và chọn FAB.
- Chọn biểu tượng, màu nền và kích thước — sử dụng biểu tượng tích hợp hoặc tải lên của riêng bạn.
- Chọn vị trí: dưới cùng bên phải (phổ biến nhất), dưới cùng bên trái hoặc bất kỳ góc cố định nào.
- Đặt hành động: liên kết đến bộ sưu tập, giỏ hàng, liên hệ hoặc trang khuyến mãi, hoặc mở thực đơn khác (Grid, Slide…) bằng
open:NaviMenu(EMBED_ID). - Mở Publish và bật chế độ sticky. FAB hoạt động trên tất cả các thiết bị.
Thêm Thực đơn Lớn Di động Navi+ vào chủ đề Zest
Trên di động, Thực đơn Lớn hiển thị dưới dạng bảng điều khiển đa cấp — cho phép những người mua hàng duyệt toàn bộ danh mục của bạn trên điện thoại với hệ thống phân cấp rõ ràng, hình ảnh và biểu ngữ.
- Thực đơn đa cấp với biểu tượng và hình ảnh trên màn hình nhỏ
- Mở nó dưới tiêu đề hoặc từ tab Tab Bar
- Tuyệt vời khi cửa hàng có nhiều danh mục để hiển thị trên di động
Thực đơn Lớn Di động là thực đơn Phần. Chèn nó trực tiếp dưới tiêu đề Zest, hoặc mở nó từ tab Tab Bar — cả hai cách đều hoạt động mà không cần ràng buộc với thực đơn của chủ đề.
- Trong Navi+, tạo thực đơn mới, chọn Mega Menu, và thiết kế các cột đa cấp (danh mục, hình ảnh nổi bật, biểu ngữ).
- Trong Publish, bật phương pháp Insert/Replace, nhập
header(M)và chọn Insert After — hạ xuống dưới header di động. - Thích mở nó từ một tab? Để nó không xuất bản ở đây và trỏ một tab "Menu" từ Tab Bar vào nó bằng
open:NaviMenu(EMBED_ID). - Giữ bộ lọc thiết bị ở Mobile.
Chèn Thực đơn Lớn Navi+ bên dưới tiêu đề Zest
Chèn Thực đơn Lớn bên dưới tiêu đề — một thanh thả xuống nhiều cột xuất hiện ngay dưới tiêu đề Zest khi di chuột, không thay đổi gì đối với Liquid của chủ đề.
- Thả xuống nhiều cột với hình ảnh và liên kết nổi bật
- Để lại thực đơn của chủ đề không thay đổi — cả hai thực đơn tồn tại cùng nhau
- Cách sạch nhất để gắn kết khi chủ đề hỗ trợ chèn
Zest là headerInsertSafe = true — Thực đơn Lớn chèn bên dưới tiêu đề không có tràn ngang, và thực đơn gốc vẫn còn.
- Trong Navi+, tạo thực đơn mới, chọn Mega Menu, và thiết kế các cột thả xuống (danh mục, hình ảnh nổi bật, sản phẩm, biểu ngữ).
- Trong Publish, bật phương pháp Insert/Replace.
- Nhập bộ chọn
.header(D)và chọn Insert After — thanh mega xuất hiện trực tiếp dưới tiêu đề Zest. - Hậu tố thiết bị
(D)giữ nó chỉ dành cho máy tính để bàn.
Thay thế thực đơn máy tính để bàn Zest bằng Thực đơn Lớn Navi+
Chế độ thay thế hoán đổi thực đơn gốc bên trong tiêu đề hoàn toàn — Navi+ kết xuất trực tiếp vào bộ chứa đó, giữ bố cục tiêu đề Zest nguyên vẹn.
- Giữ vị trí của thực đơn trong tiêu đề — không có thanh bổ sung nào được thêm
- Tốt nhất khi bạn không muốn hai hàng điều hướng
- Hoạt động trên bất kỳ chủ đề nào, thậm chí không có
headerInsertSafe
Bộ chọn thực đơn chính ul.f-site-nav__list đã được xác nhận — Navi+ kết xuất Thực đơn Lớn chính xác nơi thực đơn gốc nằm trong tiêu đề Zest.
- Trong Navi+, tạo thực đơn mới, chọn Mega Menu, và thiết kế các cột thả xuống.
- Trong Publish, bật phương pháp Insert/Replace.
- Nhập bộ chọn nav máy tính để bàn
ul.f-site-nav__list(D)và chọn Replace — Navi+ kết xuất thay cho thực đơn gốc Zest. - Sau khi chọn Replace, tối ưu hóa để tải không có lóe sáng — xem hướng dẫn xuất bản.
Chèn biểu tượng kích hoạt trước logo Zest
Thêm biểu tượng kích hoạt trước logo — một hamburger tùy chỉnh ngay bên cạnh logo Zest cho các chủ đề không có hamburger di động mặc định, hoặc như điểm vào thứ hai vào thực đơn Trượt / Lớn của bạn.
- Tạo điểm kích hoạt mới mà không cần chỉnh sửa Liquid
- Vị trí tự nhiên — ngay bên cạnh logo, quen thuộc với những người mua hàng
- Tuyệt vời cho các chủ đề lấy máy tính để bàn làm trung tâm không có hamburger di động
Bộ chọn logo .f-site-nav__item--current > a:nth-child(1) được xác nhận trên Zest, vì vậy Navi+ có thể chèn biểu tượng kích hoạt ngay trước nó.
- Mẫu nâng cao — cho các chủ đề không có hamburger di động, hoặc để thêm điểm vào thứ hai.
- Xây dựng thực đơn nhỏ một mục (thực đơn Mega/Trượt một mục) có mục mở thực đơn Trượt chính của bạn bằng
open:NaviMenu(EMBED_ID). - Trong Publish, bật phương pháp Insert/Replace, nhập
.f-site-nav__item--current > a:nth-child(1)(M)và chọn Insert Before — biểu tượng xuất hiện trước logo Zest. - Một CSS tùy chỉnh nhỏ sắp xếp nó; liên hệ với hỗ trợ nếu bạn cần giúp đỡ.
11 Cách thêm thực đơn Navi+ vào Zest
Mọi loại menu trên trang này đều tuân theo ba bước giống nhau. Bật ứng dụng một lần — sau đó mỗi menu mới chỉ cần thiết kế và xuất bản. Không cần chỉnh sửa Liquid.
- Bật Navi+ một lần. Trong admin Shopify, vào Online Store → Themes → Customize → App embeds và bật Navi+. Điều này tải ứng dụng trên storefront Zest của bạn và bao gồm mọi menu bạn xây dựng. Hướng dẫn cài đặt →
- Thiết kế thực đơn trong trình chỉnh sửa Navi+ — các mục, biểu tượng, hình ảnh, cột và màu sắc.
- Xuất bản nó. Mở bảng Publish của thực đơn. Các thực đơn nổi (Tab Bar, FAB) chỉ cần bật xuất bản; các thực đơn trượt và phần yêu cầu một bộ chọn CSS từ bảng trên.
Thêm (M) hoặc (D) vào bất kỳ bộ chọn nào để nhắm mục tiêu di động hoặc chỉ dành cho máy tính để bàn — ví dụ: header(D). Không chắc về một bộ chọn? Mở yourstore.com/#navidebug-on, di chuột qua một phần tử và nhấn Ctrl/Cmd + C để sao chép nó.
Kiểm tra tương tác trực tiếp
Playwright tự động nhấp qua cửa hàng demo Zest trực tiếp và chụp kết quả.
Các câu hỏi thường gặp — Navi+ trên chủ đề Shopify Zest
Làm cách nào để thêm thực đơn Navi+ vào chủ đề Shopify Zest?
How do I add a tab bar to the Zest Shopify theme?
a[aria-label*='cart' i]).Làm cách nào để thêm thực đơn lớn vào chủ đề Shopify Zest?
.header(D) với Insert After — không cần chỉnh sửa code theme.Làm cách nào để thay thế thực đơn di động Zest bằng thực đơn trượt ra?
.icon. Thực đơn Trượt sau đó mở từ cùng một nút mà những người mua hàng đã nhấn, thay thế ngăn kéo gốc.Tôi có cần chỉnh sửa mã chủ đề Zest để thêm thực đơn không?
Navi+ có hoạt động với chủ đề Shopify Zest không?
Các chủ đề họ generic khác
Thêm thực đơn Navi+ vào các chủ đề Shopify khác
Tham khảo bộ chọn
Các bộ chứa bảng điều khiển và bộ chọn bổ sung — được sử dụng để phát hiện trạng thái hoặc ẩn các phần tử gốc.
| Vai trò | Bộ chọn CSS | Nền tảng | Được sử dụng cho |
|---|---|---|---|
| Ngăn kéo trượt | #Drawer-MobileNav |
Di động | Drawer gốc — ẩn khi Navi+ Slide Menu hoạt động |
| Cửa sổ tìm kiếm | predictive-search |
Di động + Máy tính để bàn | Vùng chứa bảng điều khiển tìm kiếm — phát hiện trạng thái mở/đóng |
| Ngăn kéo giỏ hàng | cart-drawer |
Di động + Máy tính để bàn | Vùng chứa drawer giỏ hàng — phát hiện trạng thái mở/đóng |
| Thực đơn lớn | — | Máy tính để bàn | Không có mega menu gốc — Navi+ chèn một cái thay thế |