Cài đặt Navi+

Bước 1 — Cài đặt

Shopify: Cài từ Shopify App Store. App tự động mở sau khi cài xong.

Nền tảng khác (WordPress, WooCommerce, Wix, Webflow, Squarespace, hoặc bất kỳ website nào):

  1. Tạo tài khoản miễn phí tại dash.naviplus.app
  2. Thêm domain website của bạn
  3. Sao chép embed snippet — bạn sẽ dùng ở Bước 2

Bước 2 — Hiểu cách menu của bạn được triển khai

Navi+ sử dụng 3 phương thức triển khai khác nhau tùy theo loại menu. Hiểu điều này trước sẽ giúp bạn setup nhanh hơn.

1. Floating menus — Tab Bar & FAB

Tab Bar và FAB là sticky menu — chúng nổi trên trang ở một vị trí cố định, không bao giờ cuộn theo trang.

📍
Vị trí
Cạnh trên, dưới, trái hoặc phải của màn hình — tùy chọn của bạn
🔼
Tự động ẩn khi scroll
Ẩn khi cuộn xuống, hiện lại khi cuộn lên
👇
Chỉ hiện khi scroll xuống
Mặc định ẩn, chỉ xuất hiện khi người dùng scroll xuống — tiết kiệm không gian hiển thị

Một use case phổ biến: gom các thành phần floating khác — WhatsApp, Crisp, Messenger, live chat widget — thành các menu item trong Navi+. Điều này giải phóng không gian màn hình và loại bỏ tình trạng nhiều icon floating chồng lên nhau.

2. Positioned menus — Mega Menu & Grid Menu

Mega Menu và Grid Menu cần được đặt vào một vị trí cụ thể trên trang. Có nhiều cách để thực hiện:

🎯
CSS Selector
Trỏ Navi+ đến bất kỳ phần tử nào trên trang. Chèn trước, chèn sau, hoặc thay thế hoàn toàn — đây là cách Mega Menu thay thế menu navigation hiện có của theme.
🧩
Shopify Section
Dùng App Block trong Theme Customizer để đặt menu vào bất kỳ section nào — không cần động vào code.
🖥️
Embed code
Dán một đoạn snippet ngắn trực tiếp vào HTML tại đúng vị trí menu cần hiển thị.

CSS Selector là cách để xác định bất kỳ điểm nào trên một trang web — đây là cơ chế trình duyệt dùng để nhắm vào các phần tử cụ thể. Navi+ dùng nó để biết chính xác nơi cần inject menu. Bạn không cần tự viết CSS; Navi+ có công cụ chọn trực quan giúp tìm selector cho bạn.

3. Triggered menus — Slide Menu

Slide Menu không tự động hiển thị. Nó ẩn cho đến khi có thứ gì đó kích hoạt nó:

☰
Phần tử có sẵn
Người dùng click vào thứ gì đó đã có trên trang — ví dụ icon hamburger của theme
⚡
Trigger tùy chỉnh
Bất kỳ phần tử nào trên trang — được chỉ định thông qua CSS Selector
🔗
Menu Navi+ khác
Một Tab Bar hoặc FAB item mở Slide Menu khi được click

Điều này khiến Slide Menu rất linh hoạt — nó có thể thay thế navigation hiện tại mà không cần thêm bất cứ thứ gì mới nhìn thấy được trên trang.

Bước 3 — Tạo menu đầu tiên

Sau khi cài xong, vào dashboard và tạo menu đầu tiên. → Menu đầu tiên của bạn (5 phút)