Menu Navi+ trên theme Shopify Force — xem trước desktop Xem cửa hàng demo
Paid · Unknown · họ dawn ·warn

Add a mega menu to Shopify's Force 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 (.header__icon--menu) và ẩn drawer gốc (.menu-drawer) — 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.

Thêm vào theme này với Navi+
Tab Bar Mega Menu Slide Menu FAB Grid Menu
Cài đặt Navi+ trên Shopify ← Tất cả các theme

1 Phân tích chủ đề

Bộ điều hợp được phát hiện
dawn không phù hợp
Chèn tiêu đề an toàn
Có — không có vấn đề tràn ngang
Gắn kết được đề xuất
insert
Kiểm tra cuối cùng
2026-06-18
Nhà cung cấp
Unknown
Họ
dawn

2 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 CSSNền tảngĐược sử dụng cho
Các điểm gắn Navi+
Kích hoạt hamburger .header__icon--menu Di động Navi+ liên kết tại đây để kích hoạt Slide Menu
Tiêu đề .shopify-section-group-header-group Di động + Máy tính để bàn Chèn Mega Menu bên dưới header của Force
Thực đơn chính .header__inline-menu Máy tính để bàn Navi+ Mega Menu thay thế nội dung nav trên desktop
Logo .header--left-logo-second 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 .header__icon--menu Di động Nhấn để mở drawer di động gốc
Biểu tượng tìm kiếm .header__icon--search 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 #cart-icon-bubble Di động + Máy tính để bàn Nhấn để mở drawer giỏ hàng / bảng điều khiển
3
Tab Bar

Thêm Navi+ Tab Bar vào chủ đề Shopify Force

Tại sao sử dụng

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. Force 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 đề Force — không bao giờ cạnh tranh với điều hướng riêng của chủ đề
Trên theme Force

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 Force. Navi+ giữ ngăn kéo, tìm kiếm và giỏ hàng của chủ đề — tab chỉ mở chúng.

Tab thực đơn → mở ngăn kéo di động Force.header__icon--menu
Tab tìm kiếm → mở bảng tìm kiếm.header__icon--search
Tab giỏ hàng → mở giỏ hàng#cart-icon-bubble
Cách thiết lập
  1. Trong Navi+, tạo thực đơn mới và chọn Tab Bar.
  2. 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).
  3. Để mở ngăn kéo, tìm kiếm hoặc giỏ hàng gốc của Force, 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).
  4. Mở Publish, bật chế độ sticky, và đặt bộ lọc thiết bị thành Mobile.
Navi+ Tab Bar on the Force Shopify theme
Navi+ Tab Bar — Force theme, mobile
4
Slide Menu

Thay thế ngăn kéo di động Force bằng Thực đơn Trượt Navi+

Tại sao sử dụng

Thực đơn Trượt thay thế ngăn kéo di động mặc định của Force 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
Trên theme Force

Kích hoạt hamburger .header__icon--menu đã được xác nhận duy nhất trên bản demo trực tiếp Force, 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.

Cách thiết lập
  1. Trong Navi+, tạo thực đơn mới và chọn Slide Menu.
  2. 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.
  3. Mở Publish, bật menu, sau đó đặt trigger thành .header__icon--menu — trình chọn hamburger của Force.
  4. Lưu. Thực đơn Trượt hiện mở từ nút đó. Thêm (M) để giữ nó chỉ trên di động.
Navi+ Slide Menu on the Force Shopify theme
Force mobile drawer — replaced by a Navi+ Slide Menu
5
Grid Menu

Thêm Thực đơn Lưới Navi+ vào chủ đề Force

Tại sao sử dụng

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 Force để 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
Trên theme Force

Thực đơn Lưới có thể được chèn ở một vị trí cố định trên bất kỳ trang Force 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.

Cách thiết lập
  1. Trong Navi+, tạo thực đơn mới và chọn Grid Menu.
  2. 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.
  3. Trong Publish, bật phương pháp Insert/Replace, nhập CSS selector đích, và chọn Insert After hoặc Replace.
  4. 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).
Navi+ Grid Menu on the Force Shopify theme
Grid Menu — Force theme
6
FAB

Thêm nút nổi Navi+ (FAB) vào chủ đề Force

Tại sao sử dụng

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 Force
  • 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
Trên theme Force

FAB gắn kết hoàn toàn riêng — không cần bộ chọn CSS từ chủ đề Force. 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.

Cách thiết lập
  1. Trong Navi+, tạo thực đơn mới và chọn FAB.
  2. 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.
  3. 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.
  4. Đặ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).
  5. Mở Publish và bật chế độ sticky. FAB hoạt động trên tất cả các thiết bị.
Navi+ FAB on the Force Shopify theme
Floating Action Button — Force theme
7
Mega Menu · Mobile

Thêm Thực đơn Lớn Di động Navi+ vào chủ đề Force

Tại sao sử dụng

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
Trên theme Force

Thực đơn Lớn Di động là thực đơn Phần. Chèn nó trực tiếp dưới tiêu đề Force, 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ủ đề.

Cách thiết lập
  1. 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ữ).
  2. 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.
  3. 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).
  4. Giữ bộ lọc thiết bị ở Mobile.
Navi+ mobile Mega Menu on the Force Shopify theme
Mega Menu mobile — Force theme
8
Mega Menu · Desktop Insert

Chèn Thực đơn Lớn Navi+ bên dưới tiêu đề Force

Tại sao sử dụng

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 đề Force 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
Trên theme Force

Force 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.

Cách thiết lập
  1. 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ữ).
  2. Trong Publish, bật phương pháp Insert/Replace.
  3. Nhập bộ chọn .shopify-section-group-header-group(D) và chọn Insert After — thanh mega xuất hiện trực tiếp dưới tiêu đề Force.
  4. Hậu tố thiết bị (D) giữ nó chỉ dành cho máy tính để bàn.
Navi+ Mega Menu inserted below the header on the Force Shopify theme
Mega Menu insert — Force theme desktop
9
Mega Menu · Desktop Replace

Thay thế thực đơn máy tính để bàn Force bằng Thực đơn Lớn Navi+

Tại sao sử dụng

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 đề Force 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
Trên theme Force

Bộ chọn thực đơn chính .header__inline-menu đã đượ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 đề Force.

Cách thiết lập
  1. Trong Navi+, tạo thực đơn mới, chọn Mega Menu, và thiết kế các cột thả xuống.
  2. Trong Publish, bật phương pháp Insert/Replace.
  3. Nhập bộ chọn nav máy tính để bàn .header__inline-menu(D) và chọn Replace — Navi+ kết xuất thay cho thực đơn gốc Force.
  4. 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.
Navi+ Mega Menu replacing the desktop menu on the Force Shopify theme
Mega Menu replace — Force theme desktop
10
Icon before logo

Chèn biểu tượng kích hoạt trước logo Force

Tại sao sử dụng

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 Force 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
Trên theme Force

Bộ chọn logo .header--left-logo-second được xác nhận trên Force, vì vậy Navi+ có thể chèn biểu tượng kích hoạt ngay trước nó.

Cách thiết lập
  1. 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.
  2. 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).
  3. Trong Publish, bật phương pháp Insert/Replace, nhập .header--left-logo-second(M) và chọn Insert Before — biểu tượng xuất hiện trước logo Force.
  4. 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 đỡ.
Navi+ trigger icon before the logo on the Force Shopify theme
Logo trigger — Force theme

11 Cách thêm thực đơn Navi+ vào Force

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.

  1. 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 Force của bạn và bao gồm mọi menu bạn xây dựng. Hướng dẫn cài đặt →
  2. 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.
  3. 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 Force trực tiếp và chụp kết quả.

Di động
Hamburger → bảng điều khiển đã mở
Hamburger → bảng điều khiển đã mở — Navi+ on the Force Shopify themeHamburger → bảng điều khiển đã mở — Navi+ on the Force Shopify theme
Tìm kiếm → bảng điều khiển đã mở
Tìm kiếm → bảng điều khiển đã mở — Navi+ on the Force Shopify themeTìm kiếm → bảng điều khiển đã mở — Navi+ on the Force Shopify theme
Giỏ hàng → bảng điều khiển đã mở
Giỏ hàng → bảng điều khiển đã mở — Navi+ on the Force Shopify themeGiỏ hàng → bảng điều khiển đã mở — Navi+ on the Force Shopify theme
Thực đơn được chèn bên dưới tiêu đề
Thực đơn được chèn bên dưới tiêu đề — Navi+ on the Force Shopify theme
Biểu tượng trước logo
Biểu tượng trước logo — Navi+ on the Force Shopify theme
Máy tính để bàn
Tìm kiếm → bảng điều khiển đã mở
Tìm kiếm → bảng điều khiển đã mở — Navi+ on the Force Shopify themeTìm kiếm → bảng điều khiển đã mở — Navi+ on the Force Shopify theme
Giỏ hàng → bảng điều khiển đã mở
Giỏ hàng → bảng điều khiển đã mở — Navi+ on the Force Shopify themeGiỏ hàng → bảng điều khiển đã mở — Navi+ on the Force Shopify theme
Thực đơn được chèn bên dưới tiêu đề
Thực đơn được chèn bên dưới tiêu đề — Navi+ on the Force Shopify theme
Thay thế thực đơn chính
Thay thế thực đơn chính — Navi+ on the Force Shopify theme

Các câu hỏi thường gặp — Navi+ trên chủ đề Shopify Force

Làm cách nào để thêm thực đơn Navi+ vào chủ đề Shopify Force?

Cài đặt Navi+ từ Shopify App Store, sau đó bật nó một lần trong Theme Editor → App embeds. Thiết kế menu trong Navi+ và mở Publish — các menu sticky chỉ cần bật công tắc, các menu slide và section cần một CSS selector. Không cần chỉnh sửa Liquid.

How do I add a tab bar to the Force Shopify theme?

Tạo Tab Bar trong Navi+, thêm các tab của bạn (trang chủ, cửa hàng, tìm kiếm, giỏ hàng, thực đơn), sau đó xuất bản nó ở chế độ dính cho di động. Tab cũng có thể mở các bảng riêng của Force — ví dụ như giỏ hàng (#cart-icon-bubble).

Làm cách nào để thêm thực đơn lớn vào chủ đề Shopify Force?

Tạo một Mega Menu trong Navi+, sau đó trong Publish bật phương pháp Insert/Replace. Chèn dưới header bằng selector .shopify-section-group-header-group(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 Force bằng thực đơn trượt ra?

Tạo Slide Menu trong Navi+ và đặt kích hoạt của nó thành bộ chọn hamburger Force .header__icon--menu. 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ủ đề Force để thêm thực đơn không?

Không. Navi+ tải qua Shopify App embeds, vì vậy bạn không bao giờ chạm vào Liquid của chủ đề. Bạn có thể tắt nó bất kỳ lúc nào mà không ảnh hưởng đến Force.

Navi+ có hoạt động với chủ đề Shopify Force không?

Có. Mỗi loại thực đơn trên trang này — Tab Bar, Mega Menu, Slide Menu, FAB và Grid — đã được kiểm tra trên cửa hàng demo trực tiếp Force và hoạt động trên cả di động và máy tính để bàn.

Các chủ đề họ dawn khác

DawnAgileAscentAthensBerlinCelloChargeColorblock

Thêm thực đơn Navi+ vào các chủ đề Shopify khác

EnvyExpanseFlowImpulseLoftMotionCraftCraveDigitalEdgeFluxHoney

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 CSSNền tảngĐược sử dụng cho
Ngăn kéo trượt .menu-drawer 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ế
← Quay lại tất cả các theme Shopify