Quick answer: how to create a menu with the Navi+ app on Shopify
Để tạo menu bằng ứng dụng Navi+ trên Shopify, bạn cài đặt Navi+ từ Shopify App Store, bấm Add menu, chọn loại menu, bắt đầu từ mẫu dựng sẵn, bảng trắng hoặc AI, sau đó bật Store Connector trong App embeds và bấm xuất bản.
- Cài đặt Navi+ từ Shopify App Store và mở bảng điều khiển của app.
- Bấm Add menu và chọn kiểu thanh điều hướng bạn mong muốn.
- Bắt đầu từ một mẫu dựng sẵn, một trang trắng hoặc khung sườn AI.
- Thêm, sắp xếp và tùy chỉnh liên kết tới bộ sưu tập, sản phẩm hoặc trang.
- Bật Store Connector trong App embeds của theme, lưu lại và bấm Publish to website.
- Kiểm tra thanh điều hướng trực tiếp trên cả thiết bị di động lẫn máy tính.
Không cần chỉnh sửa mã nguồn theme. Navi+ hoạt động thông qua theme app embed của Shopify, nên bạn dựng và xem trước menu ngay trong ứng dụng thay vì sửa file theme.
Before you start: which Navi+ menu type do you need?
Chọn đúng định dạng điều hướng trước khi dựng giúp bạn tránh phải làm lại. Mỗi cửa hàng có quy mô danh mục khác nhau, vì vậy hãy chọn loại phù hợp với cách khách hàng của bạn duyệt cửa hàng.
Hình 1: Minh hoạ khái niệm (Concept illustration) — Before you start: which Navi+ menu type do you need?
| Menu type | What it does | Good first choice when… |
|---|---|---|
| Tab Bar | Thêm thanh điều hướng cố định sát đáy màn hình với icon và nhãn chữ | Lượng truy cập vào store chủ yếu từ di động và bạn muốn khách mở nhanh các trang mua sắm cốt lõi |
| Mobile Menu | Tạo menu dạng ngăn kéo (drawer) hoặc hamburger chứa toàn bộ danh mục sản phẩm | Bạn cần một mục lục di động toàn diện để sắp xếp các nhóm hàng lớn một cách gọn gàng |
| Desktop Mega Menu | Dựng bảng menu thả xuống nhiều cột với sản phẩm, bộ sưu tập, ảnh banner và icon | Khách duyệt bằng máy tính cần quét qua nhiều ngành hàng và chương trình khuyến mãi trong một tầm nhìn |
| Mobile Mega Menu | Tạo bố cục mega menu thiết kế cho màn hình điện thoại | Cửa hàng có cây danh mục sâu cần nhiều nhánh duyệt mà không làm rối màn hình hẹp |
| Icon Menu và Floating Button | Thêm các ô biểu tượng hoặc nút nổi trỏ tới sản phẩm, bộ sưu tập hoặc trang | Bạn muốn lối tắt nhanh tới trang hỗ trợ, giỏ hàng hoặc ưu đãi nổi bật mà không chiếm chỗ thanh header |
Cửa hàng có phần lớn khách truy cập bằng điện thoại có thể bắt đầu với Tab Bar hoặc Mobile Menu. Theo Nielsen Norman Group, điều hướng bị ẩn khó được phát hiện hơn điều hướng hiển thị sẵn. Một thanh Tab Bar dính đáy giữ các điểm đến chính luôn hiện ra thay vì giấu sau một ngăn kéo chưa mở.
Mặc dù Navi+ cho phép bạn bật cùng lúc nhiều loại menu để phục vụ các hành vi khác nhau, kinh nghiệm tốt nhất là nên hoàn thiện và kiểm thử xong một loại trước khi thêm loại tiếp theo. Để có cái nhìn toàn diện về cách lựa chọn mô hình điều hướng, bạn có thể tham khảo bài hướng dẫn chi tiết về cách chọn loại menu phù hợp.
Step 1: Install Navi+ from the Shopify App Store
Hãy truy cập trang ứng dụng Navi+ Tab Bar & Mega Menu trên Shopify App Store. Cài đặt từ chợ ứng dụng chính thức sẽ đưa bạn qua quy trình cài đặt tiêu chuẩn của Shopify.
Bấm nút Install để bắt đầu cài đặt. Shopify hiển thị màn hình cấp quyền tiêu chuẩn. Navi+ hiển thị menu của bạn thông qua theme app embed mà bạn sẽ bật ở Bước 5.
Phê duyệt quyền để hoàn tất thiết lập. Sau khi quá trình cài đặt kết thúc, ứng dụng sẽ tự động mở ngay trong trang quản trị Shopify của bạn. Trong những lần truy cập sau, bạn có thể mở công cụ bất cứ lúc nào bằng cách vào mục Apps ở thanh bên trái của Shopify admin.
Step 2: Click Add menu and choose a starting point (template, blank, or AI)
Tại bảng điều khiển của Navi+, hãy bấm vào nút Add menu nổi bật ở phía trên. Thao tác này sẽ đưa bạn tới màn hình Choose kind of menu với sáu thẻ tùy chọn: Tab Bar, Mobile Menu, Desktop Mega Menu, Mobile Mega Menu, Icon Menu, và Floating Button. Hãy nhấp chọn thẻ menu phù hợp với mục tiêu của cửa hàng.
Start from a template
Chọn Create from a template để duyệt qua các bố cục đã được thiết kế sẵn. Khi tìm thấy cấu trúc phù hợp với ngành hàng của mình, bạn bấm Use this template. Trình dựng sẽ tự động điền các liên kết mẫu, icon và kiểu dáng để bạn bắt đầu chỉnh sửa ngay.
Start blank
Lựa chọn Blank phù hợp khi bạn đã có sẵn sơ đồ danh mục rõ ràng trên giấy. Cách này mang lại sự tự do hoàn toàn và bạn không mất công xóa bỏ các liên kết mẫu có sẵn. Nếu bạn chưa vạch rõ cấu trúc danh mục, hãy tham khảo bài hướng dẫn phác thảo cấu trúc menu trước khi dựng trước khi thêm các mục liên kết.
Build the structure with AI
Nếu bạn muốn có một bộ khung nhanh chóng mà không cần gõ từng mục, hãy sử dụng tính năng AI tích hợp. Bạn chỉ cần mô tả bằng lời ngắn gọn về ngành hàng và phong cách của cửa hàng. AI sẽ tự động dựng một khung sườn menu mẫu đưa thẳng vào trình chỉnh sửa. Bạn hoàn toàn chủ động kiểm tra lại cấu trúc, gắn đường dẫn thực tế, chèn ảnh đại diện và chỉnh lại màu sắc.
Use your existing Shopify menu
Navi+ cũng có thể kết nối với menu điều hướng Shopify sẵn có để làm điểm khởi đầu. Khi menu đã nằm trong trình chỉnh sửa, hãy kiểm tra lại vị trí các tầng con trước khi xuất bản, và kiểm tra lại mỗi khi bạn đổi menu gốc trong Shopify.
Step 3: Add and arrange menu items
Việc thêm và sắp xếp các mục menu dùng giao diện kéo-thả. Bạn có thể thêm mục mới, kéo để đổi thứ tự và lồng mục vào dưới một mục cha.
Link to products, collections, and pages
Mỗi mục menu đều cần một đích đến hoạt động. Trong Navi+, mục có thể trỏ tới sản phẩm, bộ sưu tập và trang. Hãy sắp xếp danh mục hợp lý, giữ tên mục cấp 1 ngắn gọn, đặt các bộ sưu tập bán chạy lên đầu và đọc thêm hướng dẫn chi tiết về cách thiết lập liên kết menu trên Shopify.
Nest items up to three levels
Khi quản lý danh mục sản phẩm lớn, việc lồng cấp menu giúp tránh rối mắt. Với gói Business của Navi+, bạn có thể phân tầng menu sâu tối đa ba cấp. Để so sánh, menu gốc của Shopify cho phép một mục chính chứa tối đa hai cấp menu con thả xuống bên dưới theo tài liệu chính thức.
Step 4: Customize icons, images, colors, and layout
Sau khi cây menu đã xong, hãy tùy chỉnh giao diện cho hài hòa với thương hiệu. Với Tab Bar, hãy chọn biểu tượng rõ nghĩa và kiểm tra nhãn chữ dễ đọc trên điện thoại. Với Mega Menu, hãy thêm ảnh cho bộ sưu tập và chọn bố cục phù hợp với danh mục của bạn.
Hãy chỉnh màu chữ và màu nền cho khớp với theme Shopify đang dùng. Luôn kiểm tra độ tương phản của chữ và biểu tượng trên điện thoại thật để chắc chắn dễ đọc.
Trước khi đưa lên cửa hàng chính thức, hãy mở tab Publish và dùng mục Test this menu để xem trước menu. Để tìm hiểu thêm về cách tạo kiểu giao diện, bạn có thể đọc bài viết hướng dẫn cách đổi kiểu dáng của menu.
Step 5: Turn on Store Connector in App embeds, then publish
Hiển thị Navi+ trên cửa hàng không đòi hỏi bạn viết hay sửa mã theme. Thay vào đó, Navi+ chạy thông qua theme app embed của Shopify.
Hình 2: Minh hoạ khái niệm (Concept illustration) — Step 5: Turn on Store Connector in App embeds, then publish
Test on a duplicate theme first
Nếu cửa hàng của bạn đang có lượng khách truy cập và phát sinh đơn hàng đều đặn, nguyên tắc an toàn hàng đầu là thử nghiệm trên một bản sao lưu. Theo khuyến cáo từ tài liệu nhân bản theme của Shopify, tạo bản sao theme giúp bạn có một không gian thử nghiệm độc lập để rà soát thay đổi mà không làm gián đoạn trải nghiệm của khách hàng đang mua sắm.
Turn on Store Connector
Trong Shopify admin, bạn vào mục Online Store > Themes và bấm Customize (hoặc Edit theme) ở theme bạn muốn cài. Tại thanh công cụ bên trái của theme editor, bấm vào biểu tượng App embeds, tìm mục Store Connector của Navi+, gạt nút toggle sang trạng thái bật theo hướng dẫn app embed của Shopify, rồi bấm Save ở góc trên bên phải. Thao tác bật embed này chỉ cần thực hiện duy nhất một lần cho mỗi website.
Click Publish to website
Bạn quay trở lại bảng điều khiển của ứng dụng Navi+, mở menu vừa hoàn thiện và bấm vào nút Publish to website. Ứng dụng sẽ hiển thị các tùy chọn vị trí xuất hiện phù hợp với loại menu bạn đã tạo—chẳng hạn như Replace your main menu, Add below your header, hoặc Use your existing menu icon. Navi+ phân loại cách đưa menu lên store theo ba nhóm triển khai và sẽ tự động hướng dẫn bạn chọn đúng tùy chọn tương thích. Hãy xác nhận vị trí mong muốn và bật cần gạt xuất bản sang hoạt động.
Step 6: Preview on mobile and desktop and fix common problems
Sau khi xuất bản, hãy mở cửa hàng trực tiếp trên cả máy tính lẫn điện thoại thông minh thực tế. Màn hình cảm ứng thật sẽ phản ánh chính xác công thái học ngón tay cái và khoảng cách chạm mà các công cụ giả lập trên trình duyệt máy tính có thể bỏ sót.
| Symptom | Likely cause | Fix |
|---|---|---|
| Menu does not appear | Store Connector đang bật ở theme nháp khác, hoặc bạn chưa bấm Save | Mở theme editor của theme đang chạy thật, bật Store Connector trong App embeds và bấm Save |
| Two menus show at once | Menu mặc định của theme vẫn đang hiển thị song song với app | Trong cài đặt xuất bản của Navi+, chọn Replace your main menu, hoặc ẩn khối menu gốc trong theme header |
| Menu disappeared after changing theme | App embed không tự động kích hoạt sang theme mới khi bạn đổi giao diện | Mở theme editor của theme mới kích hoạt, bật lại toggle Store Connector trong App embeds và lưu lại |
Menu does not appear
Nếu menu không hiển thị sau khi đã bấm xuất bản, nguyên nhân phổ biến nhất là bạn đang bật toggle Store Connector trên một theme nháp chưa publish hoặc quên bấm nút Save trong theme editor. Hãy kiểm tra lại đúng theme đang chạy và lưu lại thay đổi.
Two menus show at once
Khi storefront xuất hiện cả menu gốc của theme lẫn menu mới từ ứng dụng, có nghĩa là khối điều hướng cũ vẫn đang chiếm giữ thanh header. Bạn hãy chuyển tùy chọn xuất bản trong app sang Replace your main menu hoặc ẩn khối menu mặc định trong phần Header của theme editor.
Menu disappeared after changing theme
Khi bạn xuất bản một theme Shopify mới, các app embed không tự động chuyển sang bộ code của theme đó. Bạn chỉ cần mở theme editor của theme mới, gạt bật lại Store Connector trong mục App embeds và bấm lưu. Để có danh sách kiểm tra đầy đủ, bạn có thể xem bài viết về danh sách kiểm tra khi menu của app không hiển thị.
How to turn off a Navi+ menu or go back to your theme menu
Quay lại điều hướng mặc định không cần sửa mã theme, vì Navi+ chạy thông qua app embed.
Nếu bạn muốn tạm dừng một menu cụ thể mà vẫn giữ nguyên ứng dụng, hãy vào bảng điều khiển Navi+. Mỗi menu đều có trạng thái On / Off. Khi bạn chuyển sang Off, menu đó ngừng hiển thị trên cửa hàng, nên menu mặc định của theme có thể hiển thị lại.
Nếu muốn tắt hoàn toàn mọi menu của Navi+ trên một theme, bạn chỉ cần vào Online Store > Themes > Customize, mở tab App embeds, gạt tắt mục Store Connector và bấm Save. Nếu trước đó bạn đã thử nghiệm trên theme nhân bản, việc quay lại thậm chí còn đơn giản hơn: bạn chỉ việc xóa bản theme thử nghiệm đó đi mà không hề ảnh hưởng tới storefront đang chạy.
Trade-offs: when you don’t need Navi+ yet
Mặc dù các ứng dụng menu chuyên dụng mang lại rất nhiều tính năng linh hoạt, không phải mọi cửa hàng Shopify đều bắt buộc phải cài thêm ứng dụng điều hướng ngay lập tức:
Thứ nhất, nếu cửa hàng của bạn có danh mục sản phẩm rất nhỏ và tập trung, hệ sinh thái sẵn có của Shopify—với khả năng tạo tối đa hai cấp con dưới mục chính—kết hợp cùng giao diện di động mặc định của theme thường đã là quá đủ. Việc cài thêm một ứng dụng bên ngoài cho vài liên kết đơn giản chỉ làm tăng thêm thao tác quản trị không cần thiết.
Thứ hai, việc sử dụng app embed đồng nghĩa với việc bạn cần chú ý thao tác mỗi khi đổi giao diện. Mỗi khi bạn đổi sang một theme mới hoặc cập nhật phiên bản theme, app embed sẽ không tự động kích hoạt mà bạn phải nhớ bật lại Store Connector.
Thứ ba, công cụ AI tích hợp chỉ có vai trò dựng khung sườn sơ bộ ban đầu chứ không thể tạo ra một menu hoàn chỉnh sẵn dùng. Bạn vẫn phải dành thời gian để tự kiểm tra đường link, gán đúng collection, chỉnh màu sắc tương phản và đưa hình ảnh thương hiệu vào.
Cuối cùng, việc lạm dụng quá nhiều loại menu cùng một lúc—vừa bật Tab Bar, vừa bật drawer menu và thêm cả nút nổi—sẽ dễ làm chật chội màn hình điện thoại và khiến khách mua bối rối nếu bạn chưa xây dựng cấu trúc danh mục rành mạch từ trước.
Where Navi+ fits
Sau khi menu đầu tiên đã chạy ổn định và trơn tru trên cửa hàng, bước phát triển tự nhiên tiếp theo thường là bổ sung thêm một loại menu thứ hai để phục vụ mục đích khác. Chẳng hạn, nhiều chủ shop kết hợp một thanh Tab Bar dính đáy chuyên cho các thao tác nhanh (như tìm kiếm, giỏ hàng, top bán chạy) song song với một Mobile Menu dạng ngăn kéo chứa trọn vẹn toàn bộ danh mục ngành hàng. Tương tự, một nút Floating Button nhỏ gọn có thể giúp khách kết nối nhanh với bộ phận hỗ trợ hoặc xem ưu đãi mà không chiếm chỗ trên header.
Mọi menu bổ sung đều được khởi tạo dễ dàng từ cùng nút Add menu trong bảng điều khiển. Ngoài ra, giải pháp điều hướng của Navi+ còn có thể triển khai trên các nền tảng website khác ngoài Shopify mà không đòi hỏi viết code. Để lên kế hoạch đồng bộ giao diện cho các thiết bị, bạn có thể tham khảo bài viết về cách xây dựng menu desktop và menu di động.
Khi menu đầu tiên đã chạy tốt, bước tiếp theo thường là thêm một menu thứ hai cho nhu cầu khác — ví dụ như Mobile Menu cho toàn bộ catalog bên cạnh thanh Tab Bar. Bạn có thể thêm ngay từ cùng nút Add menu đó. Nếu bạn chưa cài đặt ứng dụng, hãy bắt đầu bằng việc cài đặt Navi+ Tab Bar & Mega Menu trên Shopify App Store.
Action checklist
Hãy làm theo bảng danh sách từng bước này để thiết lập, xuất bản và kiểm tra thanh điều hướng cho cửa hàng của bạn:
- Lựa chọn loại menu phù hợp với mục tiêu ưu tiên của cửa hàng
- Bấm vào nút Add menu trong bảng điều khiển Navi+
- Chọn phương thức khởi tạo: mẫu có sẵn, bảng trống hoặc khung sườn AI
- Gắn liên kết sản phẩm, bộ sưu tập hoặc trang cho tất cả các mục
- Giới hạn độ sâu phân tầng trong phạm vi ba cấp danh mục
- Sử dụng công cụ Test this menu trong tab Publish để xem trước kiểu dáng
- Nhân bản theme đang dùng để thử nghiệm an toàn nếu cửa hàng đang có khách
- Bật toggle Store Connector trong App embeds và bấm Save
- Bấm Publish to website và chọn đúng vị trí hiển thị mong muốn
- Kiểm tra thực tế hoạt động của menu trên điện thoại thật và máy tính
Cài đặt Navi+ Tab Bar & Mega Menu trên Shopify App Store để xây dựng hệ thống điều hướng chuyên nghiệp không cần can thiệp code theme.
FAQ
Do I need to edit theme code to show a Navi+ menu?
Không. Bạn hoàn toàn không phải chỉnh sửa bất kỳ dòng mã Liquid hay template nào của theme. Bạn chỉ cần kích hoạt app embed Store Connector trong theme editor của Shopify rồi bật xuất bản menu trong app. Thao tác bật embed này chỉ cần thực hiện duy nhất một lần cho mỗi website.
Can I use my existing Shopify menu with Navi+?
Có. Navi+ có thể kết nối với các menu Shopify sẵn có của bạn. Sau khi kết nối, hãy rà soát từng cấp lồng nhau để chắc chắn danh mục và liên kết hiển thị đúng ý muốn.
Should I start from a template or with AI?
Bắt đầu từ mẫu có sẵn sẽ nhanh hơn nếu bạn đã ưng ý một phong cách bố cục nhất định. Trong khi đó, tính năng AI giúp dựng nhanh khung sườn từ mô tả văn bản, nhưng bạn vẫn cần tự tay gắn liên kết thực tế, thêm hình ảnh và phối màu phù hợp.
How many levels can a Navi+ menu have?
Hiện tại, với gói Business, bạn có thể tạo cấu trúc menu sâu tối đa ba cấp. Để so sánh, hệ thống menu mặc định của Shopify chỉ cho phép một mục chính chứa tối đa hai cấp con thả xuống bên dưới.
How do I turn a Navi+ menu off?
Bạn có thể tắt một menu bất kỳ lúc nào bằng cách gạt trạng thái của nó sang Off trong bảng điều khiển Navi+. Nếu muốn tắt toàn bộ các menu của Navi+ trên một theme, bạn chỉ cần gạt tắt mục Store Connector trong phần App embeds của theme editor và bấm Save.
Why is my Navi+ menu not showing?
Lý do phổ biến nhất là bạn đang bật Store Connector trên một bản theme nháp chứ không phải theme đang chạy thật, hoặc bạn quên chưa bấm nút Save. Nếu bạn vừa thay đổi theme chính của cửa hàng, bạn cần bật lại app embed trên theme mới đó.
Sources
- Shopify App Store: Navi+ Tab Bar & Mega Menu
- Navi+ Help: How to install Navi+
- Navi+ Help: Publishing on Shopify
- Navi+ Help: Menu Depth
- Navi+ Help: Create Menu Structure with AI
- Navi+ Help: Publish Overview
- Shopify Help Center: App embeds
- Shopify Help Center: Duplicating themes
- Shopify Help Center: Drop-down menus
- Shopify Help Center: Menus and links
- Nielsen Norman Group: Hamburger Menus and Hidden Navigation
- Product Hunt: Navi+ Menu Builder
Khám phá các chủ đề
Bài này dẫn tới các bài chuyên sâu hơn — đào sâu từng phần.