Navi+ chạy với theme nào

Navi+ chạy được trên mọi theme Shopify vì app không sửa vào file của theme. Giữa các theme chỉ khác nhau ở một điểm: tìm đúng chỗ đặt menu dễ hay khó.

Vì sao Navi+ chạy được trên mọi theme?

Menu của Navi+ do app tự vẽ, tải từ CDN của Navi+ rồi đặt nổi lên trên hoặc gắn vào trong trang. App không ghi vào file theme, không sửa mã và không đè lên tính năng nào của theme. Khi bạn tắt hoặc gỡ Navi+, theme quay về nguyên như cũ.

Với từng nhóm menu:

• Tab Bar và Floating Button nổi độc lập trên màn hình, không cần bám vào thành phần nào của theme nên bật lên là chạy ở mọi theme.
• Desktop Mega Menu, Mobile Mega Menu và Icon Menu nằm ngay trong trang nên cần biết chỗ đặt. Mobile Menu thì cần biết bấm vào nút nào để mở. Vị trí hoặc nút này được xác định bằng một CSS selector — tức là địa chỉ định danh của khu vực đó trên trang. Theme nào cũng có các khu vực này, chỉ khác cách đặt tên.

Xem chi tiết cách đặt từng loại tại Mỗi loại menu được đặt ở đâu trên cửa hàng.

Theme nào đã có sẵn chỗ đặt?

Navi+ đã lưu sẵn địa chỉ CSS selector của thanh header, menu chính và nút mở menu ☰ cho 331 theme Shopify. Khi bạn đặt menu lên trang, app tự nhận diện theme đang chạy rồi điền sẵn vào ô, bạn không cần tự gõ.

Dưới đây là thông số của một vài theme phổ biến để bạn tham khảo, không cần chép tay:

Theme	Header	Menu chính có thể thay thế
Dawn và các theme cùng họ (Craft, Sense, Refresh, Studio, Spotlight, Origin, Crave, Colorblock, Ride, Taste, Publisher, Trade)	.section-header	.header__inline-menu
Horizon	.header-section	header-menu
Impulse	.header-wrapper	.header-item--split-left ul.site-nav
Prestige	x-header	.header__primary-nav
Warehouse	#shopify-section-header	nav.nav-bar
Turbo	#header	header nav ul
Symmetry	.section-header	#proxy-nav

Để xem danh sách đầy đủ, bạn mở bảng Publish của menu trong app. Phần chọn theme sẽ hiện sẵn địa chỉ tương ứng với theme của bạn.

Khi nào chỗ đặt sẵn bị lệch?

Địa chỉ của 331 theme này được lấy từ cửa hàng mẫu của từng theme. Phần lớn đều khớp ngay, trừ một vài trường hợp sau:

• Địa chỉ trùng với nhiều phần tử trên trang nên Navi+ có thể chọn nhầm chỗ. Nếu bạn đang chọn kiểu thay thế menu của theme, Navi+ sẽ tự đổi sang chèn vào phía sau để không ẩn nhầm nội dung khác. Lúc này trên trang có thể hiện cả hai menu.
• Một số theme có bố cục đặc biệt chưa lấy đủ thông số, ví dụ theme có thanh menu dọc bên sườn, cửa hàng mẫu để trống menu, hoặc không dò được nút ☰.
• Một số theme không có thanh menu ngang trên máy tính mà chỉ có nút ☰. Với các theme này, bạn không dùng kiểu thay thế được mà chỉ chèn thêm menu mới hoặc dùng Mobile Menu.

Ngoài ra, nếu bạn đã từng sửa mã theme thì địa chỉ trên cửa hàng thực tế có thể khác với cửa hàng mẫu. Khi không thấy theme trong danh sách hoặc menu hiện lệch chỗ, bạn dùng Navi+ Live để bấm chọn trực tiếp phần tử trên trang, hoặc liên hệ hỗ trợ để chúng tôi tìm giúp.

Khi nào menu dễ đụng với theme hoặc app khác?

Bản thân theme không chặn Navi+, nhưng bạn có thể gặp ba tình huống sau:

• Nút ☰ mở ngăn kéo menu có sẵn của theme: Một số theme tự xử lý cú chạm vào nút ☰. Thay vì tạo thêm một nút thứ hai trên màn hình, bạn cài cho Navi+ mở ngay khi khách bấm vào nút ☰ đó. Xem cách làm tại Đưa Mobile Menu lên cửa hàng và chọn cách mở.
• Header cố định khi cuộn trang hoặc header trong suốt đè lên ảnh: Menu gắn trong header phải đi theo thanh header khi khách cuộn trang. Nếu thấy menu bị lệch chỗ, bạn xem cách chỉnh tại Menu hiện sai chỗ hoặc làm vỡ header.
• App khác cùng thay một phần tử: Hai app cùng giành một thanh header thường làm màn hình bị nháy hoặc hiện chồng hai menu. Mỗi vị trí bạn chỉ nên giữ một app điều hướng. Còn nếu menu chỉ đè lên nút chat hay thông báo ở một góc màn hình, bạn xem cách xử lý tại Menu đè lên widget chat, banner cookie hoặc header.

Bạn cũng có thể cho mục menu của Navi+ mở trực tiếp menu, giỏ hàng và ô tìm kiếm có sẵn của theme bằng các liên kết open:ThemeMenu, open:ThemeCart và open:ThemeSearch. Navi+ tự nhận biết theme đang chạy nên bạn không phải chọn lại theme.

Theme tạo bằng Canvas chưa bật được menu?

Canvas là công cụ mới của Shopify để thiết kế cửa hàng cùng Sidekick. Nếu theme tạo hoặc nhân bản trong Canvas chưa cho bạn bật app embed, hoặc Navi+ chưa nhận ra theme đó, các menu bạn đã tạo vẫn được giữ nguyên.

Để dùng ngay, bạn publish một theme thông thường như bản theme cũ hoặc một bản sao, rồi bật app embed như bình thường. Khi nào theme Canvas cho bật app embed, bạn chỉ cần bật lại là xong. Nếu chưa bật được app embed, bạn xem thêm tại Menu không hiện trên cửa hàng.

Khi bạn cập nhật theme

Mỗi lần cập nhật, theme sẽ viết lại phần mã của thanh header. Các menu nổi không bị ảnh hưởng, nhưng các menu gắn trong trang có thể bị mất chỗ bám. Lúc này, bạn bật lại app embed nếu bản theme mới chưa bật, rồi mở bảng Publish và chọn lại tên theme để lấy địa chỉ mới. Xem chi tiết tại Menu biến mất sau khi đổi hoặc cập nhật theme.

Mở bằng ứng dụng Google trên iPhone bị hở khoảng trắng?

Khi khách mở cửa hàng bên trong ứng dụng Google trên iPhone, đôi khi dưới đáy Tab Bar sẽ xuất hiện một dải trắng thừa. Đây là lỗi của riêng ứng dụng Google chứ không phải do Navi+, và cũng xảy ra với các app khác có thanh ghim dưới đáy hoặc nút nổi. Khoảng trắng này chỉ hiện lúc mới mở trang và biến mất ngay khi khách chạm tay hoặc cuộn nhẹ màn hình. Nếu mở bằng Safari hay Chrome thì không bị. Hiện tại Navi+ chưa xử lý triệt để được lỗi này từ phía ứng dụng Google.

Cần tìm giúp chỗ đặt cho theme của bạn?

Bạn chỉ cần gửi cho chúng tôi tên theme đang dùng và việc bạn muốn menu làm. Nếu theme chưa có sẵn trong danh sách, chúng tôi sẽ kiểm tra và lấy địa chỉ giúp bạn. Xem Cách liên hệ hỗ trợ.

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.