Menu Navi+ trên theme Shopify Refresh — xem trước desktop Xem cửa hàng demo
Free · Shopify · họ dawn ·verify

Add a mega menu to Shopify's Refresh 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 (#Details-menu-drawer-container) 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 phù hợp như mong đợi
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-28
Nhà cung cấp
Shopify
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 #Details-menu-drawer-container Di động Navi+ liên kết tại đây để kích hoạt Slide Menu
Tiêu đề .section-header Di động + Máy tính để bàn Chèn Mega Menu bên dưới header của Refresh
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__heading-link 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 #Details-menu-drawer-container 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 Refresh

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

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 Refresh. 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 Refresh#Details-menu-drawer-container
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 Refresh, 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 Refresh Shopify theme
Navi+ Tab Bar — Refresh theme, mobile
4
Slide Menu

Thay thế ngăn kéo di động Refresh 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 Refresh 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 Refresh

Kích hoạt hamburger #Details-menu-drawer-container đã được xác nhận duy nhất trên bản demo trực tiếp Refresh, 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 #Details-menu-drawer-container — trình chọn hamburger của Refresh.
  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 Refresh Shopify theme
Refresh mobile drawer — replaced by a Navi+ Slide Menu
5
Grid Menu

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

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 Refresh để 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 Refresh

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

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

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 Refresh
  • 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 Refresh

FAB gắn kết hoàn toàn riêng — không cần bộ chọn CSS từ chủ đề Refresh. 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 Refresh Shopify theme
Floating Action Button — Refresh theme
7
Mega Menu · Mobile

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

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 Refresh

Thực đơn Lớn Di động là thực đơn Phần. Chèn nó trực tiếp dưới tiêu đề Refresh, 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 Refresh Shopify theme
Mega Menu mobile — Refresh theme
8
Mega Menu · Desktop Insert

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

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 đề Refresh 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 Refresh

Refresh 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 .section-header(D) và chọn Insert After — thanh mega xuất hiện trực tiếp dưới tiêu đề Refresh.
  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 Refresh Shopify theme
Mega Menu insert — Refresh theme desktop
9
Mega Menu · Desktop Replace

Thay thế thực đơn máy tính để bàn Refresh 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 đề Refresh 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 Refresh

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 đề Refresh.

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 Refresh.
  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 Refresh Shopify theme
Mega Menu replace — Refresh theme desktop
10
Icon before logo

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

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 Refresh 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 Refresh

Bộ chọn logo .header__heading-link được xác nhận trên Refresh, 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__heading-link(M) và chọn Insert Before — biểu tượng xuất hiện trước logo Refresh.
  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 Refresh Shopify theme
Logo trigger — Refresh theme

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

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 Refresh 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 Refresh 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 Refresh Shopify themeHamburger → bảng điều khiển đã mở — Navi+ on the Refresh 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 Refresh Shopify themeTìm kiếm → bảng điều khiển đã mở — Navi+ on the Refresh 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 Refresh Shopify themeGiỏ hàng → bảng điều khiển đã mở — Navi+ on the Refresh 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 Refresh Shopify theme
Biểu tượng trước logo
Biểu tượng trước logo — Navi+ on the Refresh 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 Refresh Shopify themeTìm kiếm → bảng điều khiển đã mở — Navi+ on the Refresh 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 Refresh Shopify themeGiỏ hàng → bảng điều khiển đã mở — Navi+ on the Refresh 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 Refresh Shopify theme
Thay thế thực đơn chính
Thay thế thực đơn chính — Navi+ on the Refresh Shopify theme

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

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

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 Refresh 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 Refresh — 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 Refresh?

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 .section-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 Refresh 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 Refresh #Details-menu-drawer-container. 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ủ đề Refresh để 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 Refresh.

Navi+ có hoạt động với chủ đề Shopify Refresh 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 Refresh 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

EnvyExpanseFlowImpulseLoftMotionCraftCraveDigitalEdgeFluxForce

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 .search-modal 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