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) PHƯƠNG PHÁP 1: CHÈN (TRƯỚC HOẶC SAU) MENU NÀY TẠI MỘT VỊ TRÍ CỤ THỂ TRÊN TRANG WEB CỦA BẠN, HOẶC THAY THẾ MỘT MENU HIỆN CÓ, SỬ DỤNG MỘT CHỌN LỌC CSS. (RECOMMENDED)
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. 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 bằng phương pháp Chèn/Thay thế”.
Bước 3: Chọn Chọn lọc CSS chính xác và phương pháp thay thế/chèn
Trong hướng dẫn này, chúng tôi sẽ tập trung vào 2 cách: chèn menu này dưới tiêu đề hoặc thay thế Mega Menu mặc định. Bạn cũng có thể sử dụng phương pháp này một cách sáng tạo bằng cách tìm và áp dụng các bộ chọn CSS khác để kích hoạt menu.
Cách chèn menu này dưới tiêu đề của trang web?
Để làm điều này, chỉ cần xác định bộ chọn CSS của tiêu đề 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.
- Các bộ chọn CSS cho một số chủ đề miễn phí phổ biến.. từ Shopify như Dawn, Sense, Savor, Horizon..
header
- 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 trợ 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ự trợ giúp trong các chủ đề tiếp theo (Ngay sau chủ đề này).
Cách thay thế Mega Menu mặc định?
Để làm điều này, chỉ cần xác định bộ chọn CSS của tiêu đề 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.
- Các bộ chọn CSS cho một số chủ đề miễn phí phổ biến.. từ Shopify như Dawn, Sense, Savor, Horizon..
.header-menu
- 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 trợ 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ự trợ 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 trợ giúp ngay lập tức thay vì tự làm điều đó.\ 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.
I.3. 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 một 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? 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:
- Shopify ưu tiên tải tài nguyên của chính nó trước.
- Rồi Shopify tải nội dung chủ đề.
- 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:
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.
II) PHƯƠNG PHÁP 2: THÊM MENU NÀY NHƯ MỘT PHẦN/BLOCK TRONG CHỦ ĐỀ SHOPIFY
Phương pháp này chèn menu bằng cách thêm một Block/Section 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 block có tên “Navi+ trên Section” 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/block 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/block 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.
