English Tiếng Việt Français Deutsch 中文 日本語 Italiano Português Español
Xem demo Bắt đầu

Xuất bản trên Shopify

Bước 2: (Shopify) Xuất bản menu trên trang web của bạn.

I.1. Bật Navi+ trên Ứng dụng Nhúng

Bước 1: Nhấp vào Cửa hàng trực tuyến, sau đó nhấp vào Chủ đề. Mẹo: Nhấp chuột phải vào Cửa hàng trực tuyến và chọn “Mở liên kết trong tab mới” để tiết kiệm thời gian.

Bước 2: Chọn chủ đề mà bạn muốn xuất bản menu.

Nhấp: Tùy chỉnh

  • Nếu trang web của bạn mới và chưa có người dùng, hãy thoải mái xuất bản menu mà không lo lắng—bạn có thể dễ dàng bật hoặc tắt bất cứ lúc nào mà không ảnh hưởng đến khách truy cập.
  • Nếu trang web của bạn đã có lưu lượng truy cập thường xuyên, hãy cẩn thận hơn. Thực tiễn tốt nhất là tạo một Chủ đề sao chép và thử nghiệm Navi+ trên phiên bản đó trước.

Bước 3: Đi đến Ứng dụng nhúng, tìm “Navi+ trên Tất cả các trang”, và bật nó lên.

Bước 4: Đừng quên nhấp vào “Lưu” để áp dụng các thay đổi.

Sau 4 bước này, Navi+ đã được cài đặt trên trang web của bạn và sẵn sàng hiển thị. Tuy nhiên, quá trình vẫn chưa hoàn tất. Quay lại tab ứng dụng Navi+ để thực sự bật Xuất bản Menu.

I.2. Hiểu biết về Chọn lọc CSS

Chọn lọc CSS là một cách để nhắm đến một phần tử HTML cụ thể trên trang web của bạn. Navi+ sử dụng nó để biết chính xác nơi đặt menu của bạn — cho dù chèn nó trước hay sau một phần tử, hoặc thay thế hoàn toàn một phần tử hiện có.

Để tìm Chọn lọc CSS chính xác cho trang web của bạn, bạn có thể sử dụng:

Cách tìm chọn lọc CSS bằng Công cụ Phát triển Trình duyệt

Bạn có thể trò chuyện với một người hỗ trợ Navi+ để nhận trợ giúp ngay lập tức thay vì tự làm. Tuy nhiên, nếu bạn muốn tự làm, hãy làm theo các ảnh chụp màn hình bên dưới.

I.3. Ba tùy chọn xuất bản

Bước 1: Nhấp vào nút Xuất bản lên trang web.

Bước 2: Bật công tắc “Xuất bản menu bằng phương pháp Chèn/Thay thế”.

Bước 3: Nhập Chọn lọc CSS của bạn và chọn một trong ba tùy chọn xuất bản bên dưới.

Tùy chọn 1: Chèn Trước

Chèn menu Navi+ ngay lập tức trước phần tử đã chọn.

Ví dụ: Chọn lọc CSS main → menu xuất hiện trên khu vực nội dung chính của trang.

Các chọn lọc CSS phổ biến cho các chủ đề Shopify (Dawn, Sense, Savor, Horizon):

  • main — hầu hết các chủ đề Shopify
  • #MainContent — chủ đề Shopify Dawn

Không có trong danh sách này? Trò chuyện với một người hỗ trợ Navi+, hoặc sử dụng Chế độ Gỡ lỗi hoặc Công cụ Phát triển Trình duyệt.

Tùy chọn 2: Chèn Sau (thường gặp cho Mega Menu trên máy tính để bàn)

Chèn menu Navi+ ngay lập tức sau phần tử đã chọn.

Ví dụ: Chọn lọc CSS header → menu xuất hiện ngay dưới tiêu đề.

Các chọn lọc CSS phổ biến cho các chủ đề Shopify (Dawn, Sense, Savor, Horizon):

  • header — hầu hết các chủ đề Shopify
  • .header-wrapper — một số chủ đề
  • .announcement-bar — đặt menu ngay dưới thanh thông báo

Không có trong danh sách này? Trò chuyện với một người hỗ trợ Navi+, hoặc sử dụng Chế độ Gỡ lỗi hoặc Công cụ Phát triển Trình duyệt.

Tùy chọn 3: Thay thế

Thay thế hoàn toàn phần tử đã chọn bằng menu Navi+. Phần tử gốc sẽ bị ẩn và Navi+ sẽ chiếm chỗ của nó.

Ví dụ: Chọn lọc CSS .header-menu → điều hướng mặc định của chủ đề được thay thế bằng Mega Menu Navi+ của bạn.

Các chọn lọc CSS phổ biến cho các chủ đề Shopify (Dawn, Sense, Savor, Horizon):

  • .header-menu — chủ đề Shopify Dawn
  • .header__menu — một số chủ đề

Chú ý: Một chớp mắt ngắn của menu gốc có thể xuất hiện trong khi Navi+ tải. Xem I.5 bên dưới để ngăn điều này.

Không có trong danh sách này? Trò chuyện với một người hỗ trợ Navi+, hoặc sử dụng Chế độ Gỡ lỗi hoặc Công cụ Phát triển Trình duyệt.

I.4. Nhắm mục tiêu theo thiết bị

Bạn có thể kiểm soát xem Chọn lọc CSS có áp dụng trên di động, máy tính để bàn, hoặc cả hai bằng cách thêm một hậu tố:

Hậu tố Áp dụng cho
(M) Chỉ di động
(D) Chỉ máy tính để bàn
(không có) Cả di động và máy tính để bàn

Ví dụ: header(D) — chỉ máy tính để bàn · header(M) — chỉ di động · header — cả hai nền tảng.

I.5. Quan trọng! Tối ưu hóa tốc độ Mega Menu và trải nghiệm người dùng (Chế độ Thay thế)

Khi bạn thay thế một menu bằng menu khác, Navi+ sẽ chờ cho đến khi menu cũ được hiển thị và sau đó ngay lập tức thay thế nó bằng menu mới. Mặc dù điều này xảy ra gần như ngay lập tức, vẫn có một khoảnh khắc ngắn mà menu cũ xuất hiện, điều này có thể gây nhầm lẫn cho người dùng.

Với bước này, bạn có thể hoàn toàn ẩn menu cũ và hiển thị hiệu ứng tải thay thế. Điều này làm cho trang web cảm thấy nhanh hơn và cải thiện trải nghiệm người dùng.

Navi+ cung cấp một giải pháp đơn giản để tối ưu hóa trải nghiệm người dùng và tốc độ như sau

Tại sao bạn cần làm điều này? Navi+ không phải đã nhanh rồi sao?

Navi+ rất nhanh. Nó được triển khai hoàn toàn trên một CDN hàng đầu với độ trễ rất thấp (khoảng 100ms) và có thể phục vụ hàng triệu khách hàng mà không bị chậm lại.

Tuy nhiên, Navi+ vẫn hoạt động trong hệ sinh thái Shopify. Shopify có các quy tắc tải riêng:

  1. Shopify ưu tiên tải tài nguyên của chính nó trước.
  2. Rồi Shopify tải nội dung chủ đề.
  3. Cuối cùng, Shopify tải nội dung ứng dụng, nhưng không theo bất kỳ thứ tự cụ thể nào.

Điều này có nghĩa là nếu bạn đang sử dụng nhiều ứng dụng, Navi+ có thể đôi khi được tải muộn hơn mong đợi. Đó là lý do tại sao nó có thể cảm thấy chậm hơn trong một số trường hợp.

Giải pháp của tôi là gì?

Hiện tại, Navi+ có ưu tiên cao khi tải trên các trang web Shopify. Tuy nhiên, vẫn có một độ trễ nhất định. Chúng tôi sẽ giải quyết những vấn đề này từng cái một ở đây:

Chú ý:

  • Thêm hậu tố (M) nếu bạn muốn nó chỉ áp dụng trên di động.
  • Thêm hậu tố (D) nếu bạn muốn nó chỉ áp dụng trên máy tính để bàn.
  • Không để hậu tố nếu bạn muốn nó áp dụng trên cả hai nền tảng.

​

II) PHƯƠNG PHÁP 2: THÊM MENU NÀY NHƯ MỘT PHẦN/BLÔC TRONG CHỦ ĐỀ SHOPIFY

Phương pháp này chèn menu bằng cách thêm một Blốc/Phần trong chủ đề Shopify của bạn. Đây là một cách tiếp cận truyền thống, vì vậy tôi sẽ không mô tả chi tiết. Với phương pháp này, bạn thậm chí không cần phải “Bật Navi+ trong Ứng dụng Nhúng” như yêu cầu trong Bước 1 của Phương pháp 1.

Sao chép ID Nhúng của menu này, sau đó chèn vào blốc có tên “Navi+ trên Phần” trong Các Phần Chủ đề. Bạn có thể thêm tiêu đề, thiết lập chiều rộng đầy đủ, và điều chỉnh khoảng cách cho phần này sau khi thêm nó.

Hướng dẫn thêm menu này như một phần/blốc trong chủ đề Shopify

Dưới đây là hướng dẫn chi tiết về việc chèn menu Navi+ như một phần/blốc trong chủ đề Shopify của bạn. Phương pháp này cho phép bạn thêm menu theo cách tiêu chuẩn, được Shopify hỗ trợ, mặc dù nó không linh hoạt như các phương pháp khác do Navi+ cung cấp.

Phương pháp này áp dụng cho Mega Menus và Grid Menus. Nó KHÔNG ÁP DỤNG cho Tabbar, FAB, hoặc Slide Menus.