Hướng dẫn nền tảng · Shopify

Navi+ AI Menu Builder trên Shopify — Hướng dẫn đầy đủ

Bộ công cụ điều hướng toàn diện cho store Shopify. Bottom tab bar, mega menu, slide menu, floating action button và grid — tất cả trong một app. Không cần code, không chỉnh theme, lên sóng trong chưa đầy 5 phút.

Cài trên Shopify — miễn phí Xem các bước cài đặt
Shopify Điều hướng mobile Mega Menu
Navi+ Team · 13 tháng 5, 2026 · 8 phút đọc

Nếu bạn đang vận hành một store Shopify, chắc bạn đã biết menu âm thầm quyết định bao nhiêu doanh thu. Khách vào trang chủ, liếc qua thanh điều hướng, và trong vài giây quyết định: hoặc bắt đầu lướt xem — hoặc thoát ra. Vậy mà đa số store Shopify vẫn chạy đúng cái menu mặc định đi kèm theme: một danh sách link phẳng thiết kế cho desktop, ráp lên mobile, giống y hệt hàng nghìn store khác.

Navi+ AI Menu Builder là bộ công cụ điều hướng toàn diện được xây dựng riêng cho storefront Shopify. Thay vì một kiểu menu duy nhất, bạn có cả một hệ thống: bottom tab bar cho mobile, mega menu cho desktop, slide menu khi cần chiều sâu, FAB cho khuyến mãi, và grid menu cho danh mục nhiều sản phẩm. Tất cả quản lý từ một dashboard duy nhất. Không cần code, không chỉnh theme, không cần developer.

Hướng dẫn này đi qua mọi thứ Navi+ làm được trên Shopify — nó thay thế những gì, cài đặt ra sao, và vì sao hơn năm nghìn merchant Shopify hiện đang dùng nó.

4.9 ★
Đánh giá trên Shopify App Store
5.000+
Store Shopify đang dùng Navi+
< 5 phút
Từ cài đến menu lên sóng

Vì sao menu mặc định của Shopify đang ăn mất doanh số của bạn

Menu tích hợp sẵn của Shopify được thiết kế từ thời mà phần lớn traffic ecommerce đến từ desktop. Đến nay, khoảng 70% traffic Shopify đến từ mobile — nhưng pattern menu mặc định về cơ bản vẫn chưa thay đổi:

  • Không có bottom navigation. Mọi app mobile bạn dùng — Amazon, ASOS, eBay, Instagram — đều neo các tác vụ chính vào một thanh cố định ở dưới cùng. Shopify thì vẫn dán điều hướng lên trên cùng, nơi ngón cái không thể với tới thoải mái trên màn hình 6.7 inch.
  • Chỉ có hamburger trên mobile. Khách bấm, menu mở ra, lướt một danh sách dài, rồi bấm tiếp. Ba bốn lần bấm trước khi xem được gì. Mỗi lần bấm là một cơ hội để khách thoát.
  • Style bị khóa trong theme. Muốn nút bấm to hơn, icon tùy chỉnh, hay bố cục nhiều cột? Bạn phải sửa Liquid. Muốn A/B test một pattern mới? Càng khó hơn.
  • Không có chỗ cho khuyến mãi. Flash sale bắt đầu mà menu không thể hiển thị. Một danh mục cần nhấn mạnh thị giác mà menu không thể chứa hình. Khoảnh khắc bán hàng tuột mất khỏi điều hướng hoàn toàn.

Đây không phải mấy lời phàn nàn về thẩm mỹ. Đây là những lỗ hổng chuyển đổi đang ăn mất doanh thu thực mỗi session.

Hệ thống menu Navi+ trên Shopify

Navi+ thay thế menu mặc định bằng một hệ thống điều hướng đầy đủ. Mỗi thành phần hoạt động độc lập — và chúng cũng phối hợp được với nhau.

Tab Bar — bottom navigation cho mobile

Một thanh cố định ở cuối màn hình với tối đa năm điểm đến: Trang chủ, Danh mục, Tìm kiếm, Giỏ hàng, Tài khoản — hoặc bất cứ thứ gì bạn muốn. Icon tùy chỉnh, highlight tab đang active, badge số lượng giỏ hàng, và một thư viện icon tích hợp sẵn với hơn 4.000 Google Material Symbols. Đây là thành phần mang lại bước nhảy lớn nhất cho hầu hết store Shopify khi rời bỏ theme mặc định.

Mega Menu — dropdown cho desktop

Dropdown nhiều cột, giàu hình ảnh cho catalog lớn. Thêm tiêu đề, link phụ, banner khuyến mãi, block sản phẩm nổi bật và CTA. Thay thế link "Shop" phẳng bằng một cái nhìn tổng quan về danh mục, preview trước nội dung bên trong — khách thấy được nhiều hơn, bấm sâu hơn, đến trang sản phẩm nhanh hơn.

Slide / Hamburger Menu

Khi mobile cần chiều sâu — danh mục nhiều cấp, bộ chọn ngôn ngữ, link tài khoản — một panel trượt vào sạch sẽ sẽ xử lý ngon mà không cần lồng menu trong menu. Mở từ trái hoặc phải, toàn màn hình hoặc một phần, với transition mượt mà.

FAB — Floating Action Button

Một nút nổi neo ở góc màn hình. Hữu dụng cho khuyến mãi ("Flash Sale →"), tác vụ ưu tiên cao ("Đặt qua WhatsApp"), hoặc làm nút mở menu nhanh. Tùy chỉnh được màu sắc, icon, label và hành động đích.

Grid Menu

Menu dạng ô vuông cho store nhiều danh mục. Hình dung một màn hình duy nhất với 9 hoặc 12 ô danh mục lớn thay vì danh sách dài phải lướt. Pattern phổ biến trong ngành đồ ăn, thời trang, điện tử — bất cứ đâu catalog mang tính trực quan.

Thay thế Drawer và các thành phần mặc định

Trên gói Business trở lên, Navi+ có thể thay thế Search drawer, Cart drawer và menu mặc định của theme bằng phiên bản tùy chỉnh — vẫn nút trigger cũ, nhưng UI hoàn toàn khác. Bạn cũng có thể thay icon cart/menu/search và badge số lượng giỏ hàng trực tiếp.

Mobile và desktop, độc lập

Một trong những phần bị đánh giá thấp nhất của Navi+: mỗi menu đều có cấu hình riêng cho mobile và desktop. Hiển thị Tab Bar trên mobile và Mega Menu trên desktop — hoàn toàn độc lập — mà không cần viết media query nào.

Xây cho storefront Shopify, không phải ráp tạm bợ

Navi+ không phải một widget chung chung tình cờ nhúng được vào Shopify. Nó được xây dựng quanh cách theme Shopify thực sự hoạt động:

  • Không phụ thuộc theme. Hoạt động trên Dawn, Refresh, Sense, Studio, Origin, Crave, Symmetry, Impulse, Prestige, Empire, Motion, Stiletto và cả theme tùy chỉnh. Menu nằm bên ngoài markup Liquid của theme — nên cập nhật theme, đổi theme hay làm lại giao diện theo mùa cũng không động đến menu của bạn.
  • Không chỉnh theme. Cài qua Shopify App Store, bật App Embed block trong Online Store 2.0, và Navi+ tự inject vào. Gỡ cài chỉ là một cú toggle.
  • HTML5 + CSS3 thuần, không phụ thuộc JS. Không xung đột với script của theme, không hỏng hành vi sau cập nhật theme, không kỵ với app khác.
  • Mobile-first mặc định. Mọi template đều có sẵn khoảng cách, kích thước font và vùng chạm tối ưu cho mobile — rồi mới scale lên desktop, chứ không phải ngược lại.
  • Editor nằm ngoài Shopify admin. Dashboard đầy đủ chạy trên một ứng dụng riêng tại dash.naviplus.app — nhanh, không bị Shopify admin gánh nặng, và truy cập được từ bất kỳ thiết bị nào.

Hiệu năng và độ tin cậy

Một cái menu hiện diện trên mọi trang của mọi store thì bắt buộc phải nhanh. Navi+ được xây dựng cho điều đó:

  • CDN toàn cầu. Edge server trên sáu lục địa. Trên gói Elite, dual-CDN với failover Cloudflare + BunnyCDN.
  • SLA 99.99% trên Elite, 99.00% trên Business và Starter.
  • Thân thiện với Core Web Vitals. Không script chặn render, không layout shift, không công việc JS chạy trên main thread.
  • Nhẹ. Runtime chỉ vài KB gzip mỗi menu, lazy-load sau lần paint đầu tiên.

Cài đặt trên Shopify — từng bước

  1. Mở Shopify App Store, tìm "Navi+ AI Menu Builder", và bấm Add app.
  2. Duyệt cài đặt trong Shopify admin của bạn. Chưa mất phí gì — Starter miễn phí vĩnh viễn.
  3. Từ trang app, bấm Open dashboard để mở dash.naviplus.app.
  4. Chọn một template, chọn loại menu (Tab Bar, Mega Menu, Slide, FAB, Grid), tùy chỉnh icon và link, rồi bấm Publish.
  5. Storefront của bạn cập nhật tức thì — không cần reload theme, không cần deploy, không cần xóa cache.

Đa số store đi từ cài đặt đến menu lên sóng trong chưa đầy năm phút.

Giá trên Shopify

Cùng các gói như mọi nơi khác — cùng tính năng, cùng giá.

Gói Giá Phù hợp cho
Starter Miễn phí vĩnh viễn Một menu, store nhỏ, dùng thử Navi+
Business $6.25 / tháng Store đang tăng trưởng, nhiều menu, đa ngôn ngữ, tải ảnh, analytics
Elite $10 / tháng Catalog lớn, menu không giới hạn, hỗ trợ SEO đầy đủ, CDN cao cấp, hỗ trợ tận tay

Cả hai gói trả phí đều có dùng thử miễn phí 7 ngày — không cần thẻ tín dụng, truy cập đầy đủ tính năng.

Merchant Shopify nhận được gì

  • Đánh giá 4.9 trên Shopify App Store
  • Hơn 5.000 store đang chạy Navi+ tới thời điểm hiện tại
  • Một lần cài thường thay thế được 2–3 app riêng lẻ: một app bottom-bar, một app mega-menu, đôi khi cả một app floating-button hoặc chat-bubble

Chuyện "thay thế nhiều app bằng một" là một phần lý do Navi+ thường rẻ hơn tổng tiền của các app mà nó gom lại — và là vì sao việc chuyển từ "chồng app nhỏ" sang "một bộ menu thống nhất" là một trong những lộ trình nâng cấp phổ biến nhất mà chúng tôi gặp.

Câu hỏi thường gặp

Có làm chậm store của tôi không?

Không. Navi+ được xây mobile-first, không có thư viện JavaScript ngoài, lazy-load sau lần paint đầu, và phục vụ từ CDN toàn cầu. Nó không thêm script chặn render và được thiết kế để không động đến Core Web Vitals.

Tôi có cần biết code không?

Không. Toàn bộ dashboard là kéo-thả, với template làm điểm khởi đầu. Có thể dùng CSS, HTML và JavaScript tùy chỉnh nếu muốn đi sâu, nhưng đa số store chẳng bao giờ động đến.

Có hoạt động với theme của tôi không?

Có. Navi+ nằm bên ngoài theme. Nó hoạt động trên mọi theme Shopify chính thức và cả trên theme tùy chỉnh. Cập nhật theme và đổi theme đều không động tới nó.

Có hỗ trợ đa ngôn ngữ không?

Có — trên Business và Elite. Hoạt động cùng Shopify Markets, Translate & Adapt, hoặc bất kỳ app dịch nào. Mọi thành phần menu đều có label và link theo từng locale.

Có xung đột với app khác của tôi không?

Không. HTML / CSS thuần, không có JS toàn cục, không jQuery, không thư viện bên thứ ba. Chúng tôi test cùng những app Shopify được cài nhiều nhất trước mỗi bản phát hành.

Hỗ trợ ra sao?

Email support trên Starter, hỗ trợ 24/7 trên Business, và hỗ trợ tận tay (di trú menu, cấu hình bố cục, chỉnh UI trực tiếp) trên Elite.

Bắt đầu trên Shopify

Cài đặt miễn phí — không cần thẻ tín dụng. Lên sóng trong vài phút. Cùng cấu trúc gói như mọi nền tảng khác.

Cài trên Shopify — miễn phí

Đọc tiếp

Bắt đầu với Navi+ AI Menu Builder

Chọn nền tảng của bạn — miễn phí cài đặt, hoạt động trong vài phút.