Cài đặt giúp menu tải nhanh, không nháy

Đa số cửa hàng không cần chỉnh các cài đặt trong bài này. Bạn chỉ cần xem khi thấy header bị nháy hoặc giật lúc mới mở trang — thường gặp khi dùng menu Navi+ thay vào chỗ menu gốc của theme, hoặc mở Mobile Menu bằng nút ☰ có sẵn trên theme.

Vì sao header bị nháy lúc mở trang?

Khi khách mở trang, theme sẽ hiện menu gốc trước. Ngay sau đó, Navi+ tải xong mới lấy menu của bạn đè vào chỗ menu gốc đó.

Mạng nhanh thì mắt thường không kịp thấy. Nhưng nếu mạng chậm, khách sẽ thấy menu cũ của theme thoáng qua rồi header giật nhẹ khi menu Navi+ thế vào.

Theme vẽ headermenu cũ của theme còn hiện

Trang hiện rakhách đã nhìn thấy

Navi+ tải xongchậm hơn trang

Menu mới thế vàoheader có thể giật

Hiện tượng này chỉ xảy ra trong 2 trường hợp:

• Bạn dùng Mega Menu thay vào chỗ menu của theme — chủ yếu là Desktop Mega Menu, hoặc khi bạn đặt Mobile Mega Menu và Icon Menu theo kiểu Replace ở mục Somewhere else.
• Bạn cho mở Mobile Menu bằng nút ☰ của theme qua CSS selector (đoạn mã chỉ định vị trí nút đó trên trang).

Các loại menu không đụng tới giao diện gốc của theme như Tab Bar, Floating Button, hay Mobile Menu mở từ một mục menu Navi+ khác sẽ không bao giờ bị nháy.

Hiệu ứng tải (tuỳ chọn)

Hiệu ứng tải là một khung xám (skeleton) hiện tạm trong lúc menu Navi+ chưa sẵn sàng, để khách không thấy khoảng trống hay menu cũ nháy lên. Từ 05/11/2026 menu được in sẵn nên gần như tức thì, vì vậy bạn hầu như không cần bật.

Nó chỉ có tác dụng với Mobile Menu mở bằng nút ☰ của theme và Mega Menu kiểu Replace. Trong cửa sổ Publish có dòng Add a loading effect (optional), bấm X để ẩn nếu không dùng.

Cách bật

Vào Theme editor › App embeds › Store Connector, mở nhóm Loading effect (optional), dán CSS selector vào ô tương ứng rồi bấm Save: Mobile Menu CSS Selector cho Mobile Menu, CSS Selector for Mega Menu Replacement cho Mega Menu.

Horizon Active Home pageSave

App embedsOther appAnother appStore ConnectorNavi+ MenusLoading effect (optional)Menus now load almost instantly, so this is rarely needed. Learn moreMobile Menu CSS Selector CSS Selector for Mega Menu Replacement Find apps built for themes on the Shopify App Store.

STOREHomeShopCollectionsAboutContact

Selector là chính đoạn bạn đã dán lúc đưa menu lên web. Nhiều selector thì ngăn bằng dấu phẩy; thêm (M) sau selector nếu chỉ dùng cho điện thoại, (D) nếu chỉ dùng cho máy tính. Để trống cả hai ô thì menu vẫn chạy bình thường. Cài đặt nằm theo từng theme, đổi theme thì dán lại.

Trên cửa hàng trông thế nào

Mobile Menu. Khách bấm ☰ lúc trang còn đang tải: một ngăn kéo skeleton trượt ra ngay (nền trắng, các dòng xám nhấp nháy), rồi menu thật thế vào.

Mega Menu Replace. Thanh menu của theme được thay bằng một hàng viên xám có ánh sáng chạy qua, giữ đúng chỗ, rồi Navi+ Mega Menu thế vào, header không bị giật.

yourshop.com

STORE

yourshop.com

STOREHomeShopCollectionsAboutContact

Nâng cao: chỉnh ngăn kéo skeleton của Mobile Menu bằng chữ

Trong ô Mobile Menu CSS Selector, gõ thông số vào ngoặc đơn, ngăn cách bằng dấu |:

.nut-menu (Device:M | Color:#1a1a1a | Direction:left | Width:85%)

• Device: M (điện thoại) hoặc D (máy tính).
• Color: màu nền ngăn kéo, dạng #rrggbb.
• Direction: hướng trượt left hoặc right.
• Width: độ rộng, ví dụ 85% hoặc 320px.

Thông số nào gõ sai sẽ bị bỏ qua và lấy mặc định. Ô CSS Selector for Mega Menu Replacement chỉ nhận (M) và (D).

Tải ngầm tự động

Mặc định, Navi+ đã tự lo sẵn 2 việc này, không có ô nào để bạn bật hay tắt:

• Tải song song với trang web: đoạn mã khởi động của Navi+ chạy độc lập, không bắt trang web phải dừng lại chờ.
• Ảnh trong menu con không bị tải sớm: ảnh chỉ được tải về khi khách rê chuột tới menu đó, nên trang mở lên vẫn nhẹ.

Khi nào nên bật CDN phụ?

Navi+ luôn lưu tệp menu trên 2 mạng máy chủ (CDN) độc lập. Nếu mạng chính gặp sự cố khi tải tệp khởi động, app sẽ tự chuyển sang tải từ mạng dự phòng.

Trong phần cài đặt app embed có mục Use a Secondary CDN (BunnyCDN) dùng để chuyển hẳn mạng dự phòng lên làm nguồn tải chính. Bạn chỉ nên bật mục này khi:

• Đội hỗ trợ Navi+ hướng dẫn bạn bật, hoặc
• Khách hàng của bạn ở khu vực bị chặn hoặc chập chờn khi kết nối vào mạng chính, làm menu không hiện ra.

Cài đặt này không có tác dụng làm menu tải nhanh hơn. Với hầu hết cửa hàng, bạn cứ để tắt như mặc định. Nếu đội hỗ trợ nhờ bạn bật để kiểm tra lỗi, hãy giữ nguyên đến khi họ báo đã xử lý xong.

Cách đo tốc độ trang cho chuẩn

Điểm tốc độ web thường nhảy thất thường giữa các lần bấm đo, kể cả khi bạn không sửa gì trên trang. Nếu muốn biết chính xác Navi+ ảnh hưởng bao nhiêu tới tốc độ tải trang, bạn làm như sau:

1. Nhân bản theme hiện tại và tắt app embed của Navi+ ở bản sao đó.
2. Đem cả hai bản theme đi đo tốc độ 3 lần liên tiếp trong cùng một lúc.
3. Lấy kết quả nằm giữa của mỗi bản ra để so với nhau.

Đừng lấy điểm vừa đo hôm nay đi so với điểm của tuần trước, vì trong thời gian đó cửa hàng đã có nhiều thay đổi khác. Để hiểu rõ hơn cách Navi+ vận hành trên trang, bạn xem bài Navi+ có làm chậm cửa hàng không?.

Xử lý lỗi thường gặp

Header bị giật khi mới mở trang

Từ 05/11/2026 việc này hiếm gặp vì menu đã in sẵn vào trang. Nếu vẫn thấy, bạn bật hiệu ứng tải ở mục phía trên, nhớ dán selector vào đúng ô vì Mobile Menu và Mega Menu dùng hai ô tách biệt.

Menu hiện ra hơi trễ ở lần đầu vào web

Khi khách vào web lần đầu, trình duyệt phải tải mới các tệp của menu về máy. Từ những lần mở trang tiếp theo, trình duyệt lấy lại tệp đã lưu sẵn nên menu sẽ hiện ngay. Nếu lần nào mở trang menu cũng hiện chậm, bạn kiểm tra lại xem các mục menu cấp 1 có đang gắn ảnh quá nặng không. Dù Navi+ đã tự thu nhỏ và nén ảnh khi tải lên, bạn vẫn nên dùng ảnh gốc nhẹ ngay từ đầu.

Nền tảng khác

Shopify Wix Website khác

Các bước ở trên dành cho Shopify — đây là cách mặc định.