Xuất bản trên Shopify

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

2.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.

2.2. Chọn cài đặt hiển thị và xuất bản menu.

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 (chỉ hiển thị khi được mở bởi người dùng)”.

Bước 3: Chọn phương pháp hiển thị

Phương pháp 1: Mở menu này từ một mục menu Navi+ khác bằng cách sử dụng cú pháp open:NaviMenu

Phương pháp này cho phép bạn mở một menu trượt khi người dùng nhấp hoặc chạm vào một mục menu từ một menu Navi+ khác (ví dụ: trên một tab bar, một FAB ở góc dưới của màn hình, hoặc một mega menu). Mục đích chính của phương pháp này:

Mục đích 1: Cải thiện khả năng hiển thị và trải nghiệm người dùng bằng cách hiển thị toàn bộ sơ đồ trang web trong menu trượt trong khi vẫn giữ cho nó dễ truy cập.

Menu trượt là lý tưởng để hiển thị toàn bộ sơ đồ trang web của bạn nhờ vào không gian lớn và bố cục linh hoạt, làm cho nó hoàn hảo để hiển thị toàn bộ danh mục sản phẩm, liên kết đến các trang chính, blog, công cụ hỗ trợ, v.v. Tuy nhiên, menu trượt thường ít hiển thị hơn theo mặc định. Để cải thiện khả năng phát hiện, bạn có thể sử dụng một menu Navi+ khác (chẳng hạn như tab bar) để trình bày các liên kết quan trọng và dễ nhận biết nhất của bạn, và đặt một mục menu nổi bật kích hoạt menu trượt. Điều này đảm bảo khả năng hiển thị và sự tương tác tốt hơn cho menu trượt.

Mục đích 2: Độ sâu menu không giới hạn với cấu trúc menu lớn, linh hoạt (Chỉ Navi+)

Thay vì hiển thị một popup với không gian hạn chế khi một mục menu được nhấp, bạn có thể mở một menu trượt khác với ba cấp độ và nhiều cách để trình bày thông tin. Điều này có thể được lặp lại cho các mục menu khác—hoặc thậm chí cho cùng một menu trượt—cho phép bạn tạo độ sâu gần như không giới hạn cho các menu Navi+ của bạn.

Phương pháp 2: Khi một phần tử UI (được xác định bởi một bộ chọn CSS như #id_of_element hoặc .class_name) được nhấp hoặc chạm vào, menu này sẽ được hiển thị.

Đây có thể nói là phương pháp tốt nhất và thường được sử dụng nhất với Menu Trượt.\ Trong hướng dẫn này, chúng tôi sẽ tập trung vào việc thay thế menu hamburger mặc định của trang web trên di động.\ Bạn cũng có thể áp dụng phương pháp này một cách sáng tạo bằng cách tìm và sử dụng các bộ chọn CSS khác để kích hoạt menu.

Cách thay thế menu hamburger mặc định của trang web bạn bằng Menu Trượt Navi+ (Hướng dẫn phổ biến)?

Trên hầu hết các trang web Shopify, menu hamburger mặc định được tạo ra từ phiên bản máy tính để bàn thông qua thiết kế đáp ứng. Do đó, nó thường rất đơn giản, có độ sâu nông và thiếu hỗ trợ cho biểu tượng, hình ảnh hoặc bố cục nâng cao. Thay thế nó bằng Menu Trượt Navi+ là một lựa chọn phổ biến và thực tế để tận dụng các tính năng nâng cao của Navi+.

Để làm điều này, chỉ cần xác định bộ chọn CSS của biểu tượng menu hamburger trên trang web của bạn và nhập nó vào ô văn bản. Chúng tôi đã tìm thấy các bộ chọn CSS cho một số chủ đề phổ biến nhất cho bạn, được liệt kê dưới đây.

  1. Các bộ chọn CSS cho một số chủ đề miễn phí phổ biến.. từ Shopify như Dawn, Sense, Savor, Horizon..
#Details-menu-drawer-container
  1. Không có trong danh sách này, đừng lo lắng
- Bạn có thể trò chuyện với một người hỗ trợ Navi+ để được giúp đỡ ngay lập tức—điều này chỉ mất vài phút để tìm bộ chọn CSS.

- Hoặc, bạn có thể theo dõi hướng dẫn tự giúp trong các chủ đề tiếp theo (Ngay sau chủ đề này).
Cách tìm bộ chọn CSS trên trang web của bạn?

Bạn có thể trò chuyện với một người hỗ trợ Navi+ để được giúp đỡ ngay lập tức thay vì tự làm.\ Tuy nhiên, (1) điều này sẽ giúp bạn hiểu ý tưởng cốt lõi, và (2) nếu bạn muốn tự làm, hãy làm theo hướng dẫn dưới đây.

2.3. Quan trọng! Tối ưu hóa tốc độ menu trượt, thêm hiệu ứng tải và ngăn chặn menu trùng lặp

Đây không phải là điều bạn cần phải sửa ngay lập tức, nhưng về lâu dài, nó rất quan trọng cho trải nghiệm menu trượt được tạo ra bởi Navi+. Trước khi Navi+ hoàn toàn thay thế menu trượt cũ, menu gốc của chủ đề vẫn còn hoạt động. Trong một khoảnh khắc ngắn—khoảng nửa giây—nếu một người dùng tải menu và nhanh chóng nhấp vào nút hamburger (một trường hợp hiếm, nhưng vẫn có thể xảy ra), menu chủ đề cũ có thể xuất hiện và gây ra sự cố hiển thị.

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? Không phải Navi+ đã 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 bước một ở đây:

Menu Trượt: Thêm hiệu ứng tải và khóa bộ chọn kích hoạt

Rất đơn giản: chỉ cần nhập bộ chọn CSS mà bạn sử dụng cho Menu Trượt vào phần nhúng của ứng dụng Navi+ (xem hình dưới).

Ghi 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.