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 “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 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 (thường gặp nhất cho Menu Lưới)

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 Lưới 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

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

Ví dụ: Chọn lọc CSS header → menu Lưới 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ủ đề

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ế

Trên hầu hết các cửa hàng Shopify, không có phần tử Menu Lưới tích hợp để thay thế. Chèn Trước main là phương pháp được khuyến nghị.

Nếu chủ đề của bạn có một phần tử kiểu lưới mà bạn muốn thay thế, hãy sử dụng Chế độ Gỡ lỗi hoặc Công cụ phát triển trình duyệt để tìm chọn lọc của nó.

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ụ: main(D) — chỉ máy tính để bàn · main(M) — chỉ di động · main — 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 phương pháp 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 Menu Mega và Menu Lưới. Nó KHÔNG ÁP DỤNG cho Tabbar, FAB, hoặc Menu Trượt.