Cài đặt Navi+

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

Shopify: Cài đặt từ Shopify App Store. Ứng dụng sẽ tự động mở sau khi cài đặt.

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

  1. Tạo một tài khoản miễn phí tại dash.naviplus.app
  2. Thêm tên miền trang web của bạn
  3. Sao chép đoạn mã nhúng của bạn — bạn sẽ sử dụng nó ở Bước 2

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

Navi+ sử dụng ba phương pháp triển khai khác nhau tùy thuộc vào loại menu. Hiểu điều này ngay từ đầu sẽ tiết kiệm thời gian trong quá trình thiết lập.

1. Menu nổi — Tab Bar & FAB

Tab Bar và FAB là menu dính nổi trên trang của bạn ở vị trí cố định. Chúng không bao giờ cuộn đi.

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

Một trường hợp sử dụng phổ biến: hợp nhất các yếu tố nổi khác — WhatsApp, Crisp, Messenger, các widget trò chuyện trực tiếp — vào các mục menu của Navi+. Điều này giải phóng không gian màn hình và loại bỏ sự lộn xộn của nhiều biểu tượng nổi chồng lên nhau.

2. Menu định vị — Mega Menu & Grid Menu

Mega Menu và Grid Menu cần được đặt ở một vị trí cụ thể trên trang của bạn. Có một số cách để làm điều này:

🎯
CSS Selector
Chỉ định Navi+ đến bất kỳ phần tử nào trên trang của bạn. Chèn trước, sau, hoặc thay thế hoàn toàn — đây là cách Mega Menu có thể hoàn toàn thay thế điều hướng hiện có của chủ đề của bạn.
🧩
Phần Shopify
Sử dụng một App Block bên trong Theme Customizer để thả menu vào bất kỳ phần nào của bố cục của bạn — không cần mã.
🖥️
Mã nhúng
Dán một đoạn mã ngắn trực tiếp vào HTML của trang của bạn tại vị trí chính xác mà menu nên xuất hiện.

CSS Selector là một cách để xác định bất kỳ điểm nào trên một trang web — đó là cách mà các trình duyệt nhắm đến các phần tử cụ thể. Navi+ sử dụng nó để biết chính xác nơi để chèn menu của bạn. Bạn không cần phải viết CSS cho riêng mình; Navi+ có một công cụ chọn hình ảnh tìm selector cho bạn.

3. Menu kích hoạt — Slide Menu

Slide Menu không xuất hiện một mình. Nó vẫn ẩn cho đến khi có điều gì đó kích hoạt nó:

Phần tử hiện có
Một người dùng nhấp vào một cái gì đó đã có trên trang của bạn — như biểu tượng hamburger của chủ đề của bạn
Kích hoạt tùy chỉnh
Bất kỳ phần tử nào trên trang của bạn — được chỉ định bởi CSS Selector của nó
🔗
Menu Navi+ khác
Một mục Tab Bar hoặc FAB mở Slide Menu khi được nhấp

Điều này làm cho Slide Menu linh hoạt — nó có thể thay thế điều hướng hiện có của bạn mà không thêm bất kỳ điều gì mới về mặt hình ảnh vào trang.


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

Sau khi cài đặt, hãy đến bảng điều khiển và tạo menu đầu tiên của bạn. → Menu đầu tiên của bạn (hướng dẫn nhanh 5 phút)