Menu đè lên widget chat, banner cookie hoặc header

Góc dưới màn hình điện thoại rất dễ bị chật khi có đủ thứ cùng hiện một chỗ: nút chat, nút cuộn lên đầu trang, thanh cookie và menu. Dưới đây là các cách sắp xếp lại để không cái nào đè lên cái nào.

Trước khi bắt đầu

• Mở shop bằng điện thoại thật và vào đúng trang đang bị đè giao diện.
• Xem trước tên app đang đụng với menu, chẳng hạn như Shopify Inbox, Tidio, WhatsApp hay app thanh cookie.

Xem cái nào đang đè lên cái nào

Bạn nhìn trên màn hình xem menu Navi+ đang bị khuất phía sau hay đang đè lên trên widget kia. Mỗi trường hợp sẽ xử lý một kiểu:

• Nếu menu Navi+ bị che khuất: dời vị trí menu hoặc nâng lớp hiển thị của menu lên trên.
• Nếu menu Navi+ đè lên phần quan trọng như bảng đồng ý cookie hoặc khung chat: dời vị trí menu, hạ lớp hiển thị xuống, hoặc gộp luôn nút đó vào trong Navi+.

Dời vị trí để không đụng nhau

Phần lớn trường hợp chỉ cần nhích một trong hai thứ đi một chút là hết đè nhau.

• Với Floating Button: vào bước Configure, mở thẻ Display on mobile cho điện thoại hoặc Display on desktop cho máy tính. Tại đây, bạn đổi góc hiển thị sang trái, giữa hoặc phải, rồi chỉnh Bottom spacing để đẩy nút lên cao hơn so với mép dưới.
• Với Tab Bar: thanh này trải ngang hết màn hình nên không dời sang góc khác được. Bạn hãy vào cài đặt của widget kia để đẩy nó cao hơn mép dưới, hoặc vào Configure > Scroll effects rồi bật Hide when scrolling down on Mobile screen để Tab Bar tự ẩn khi khách cuộn trang xuống.
• Với Mobile Mega Menu và Icon Menu: hai loại này nằm chèn giữa nội dung trang. Nếu menu bị thanh header cố định đè lên khi cuộn, bạn có thể tắt chế độ cố định của header trong theme, hoặc đổi vị trí chèn menu sang Insert after thay vì Insert before.

Để căn chỉnh chi tiết khoảng cách lề cho menu, bạn xem thêm bài Vị trí và khoảng cách lề của menu.

Đổi thứ tự lớp hiển thị bằng Z-index

Khi hai phần tử nằm cùng một chỗ, trình duyệt dựa vào con số z-index để biết cái nào nằm trên. Số lớn hơn sẽ nằm đè lên số nhỏ hơn.

Mỗi menu đều có ô Z-index ở bước Configure và hiện ngay ngoài danh sách menu. Giá trị mặc định là 50, bạn có thể nhập số từ 0 đến 2147483647.

Cách chọn số phù hợp:

• Khi menu Navi+ bị widget khác che: nhập số lớn hơn số của widget đó. Mỗi theme và mỗi app tự đặt một số riêng, và các widget chat thường đặt số rất lớn.
• Khi menu Navi+ đè lên chỗ khách cần bấm như thanh cookie hay khung thanh toán: hãy giảm số của Navi+ xuống thay vì nâng số của các phần kia lên.
• Với ngăn kéo của Mobile Menu và khung xổ xuống của Desktop Mega Menu: nên đặt số thật cao vì khi mở ra, menu cần phủ lên trên toàn bộ trang.
• Với Tab Bar và Floating Button: nên giữ số vừa phải. Hai menu này luôn nằm cố định trên màn hình, nếu đặt số quá cao sẽ đè lên cả ngăn kéo giỏ hàng khi khách mở giỏ.
• Với Icon Menu: loại menu này nằm sẵn trong dòng nội dung trang nên chỉnh z-index sẽ không có tác dụng.

Nếu muốn tự xem số z-index của widget kia trên máy tính, bạn bấm chuột phải vào widget đó trên trang web rồi chọn Inspect để tìm dòng z-index. Nếu không quen thao tác này, bạn cứ nhắn cho đội hỗ trợ ở cuối bài.

Gộp các nút chat vào một Floating Button

Thay vì để nhiều nút nổi rời rạc ở góc màn hình, bạn có thể tạo một Floating Button để gom hết Shopify Inbox, WhatsApp, gọi điện, SMS, Messenger và email vào chung một nút. Làm xong, bạn tắt các nút nổi riêng lẻ kia đi là màn hình gọn ngay.

Với một số app chat, khách bấm vào mục menu trong Floating Button là mở thẳng được khung chat:

• Với Shopify Inbox: bạn điền open:Inbox vào ô đường dẫn của mục menu. Khi khách bấm vào, khung chat của Shopify Inbox sẽ mở ra, đồng thời Navi+ tự ẩn luôn nút nổi mặc định của Inbox để không bị trùng.
• Với Tidio: bạn có thể thêm một đoạn JavaScript ngắn vào khung JavaScript riêng của menu ở bước Configure để gọi khung chat Tidio mở ra từ mục menu Navi+. Còn nếu bạn vẫn muốn giữ nút Tidio nằm riêng, hãy đẩy nó cao lên khỏi Tab Bar bằng cách thêm dòng CSS riêng như #tidio-chat-root { margin-bottom: 50px !important; }.

Cách kết nối cụ thể sẽ tùy vào cách từng app chat cài lên shop. Nếu chưa rõ cách làm cho app chat đang dùng, bạn chỉ cần nhắn tên app đó cho chúng tôi.

Tab Bar che mất nội dung cuối trang

Mặc định, Navi+ tự chừa thêm một khoảng trống ở cuối trang bằng đúng chiều cao của Tab Bar để không che mất phần chân trang. Tuy nhiên có hai trường hợp ngoại lệ:

• Bạn đang bật chế độ tự ẩn Tab Bar khi cuộn trang. Vì thanh không hiện cố định mọi lúc nên Navi+ sẽ không giữ khoảng trống ở cuối trang.
• Có một app khác cũng đặt thanh cố định ở cạnh dưới màn hình, chẳng hạn như thanh mua hàng nhanh Add to cart. Khi đó Navi+ chỉ giữ cho Tab Bar nằm trên chứ không tự đẩy thanh của app kia lên được. Nếu app đó có chỗ chỉnh khoảng cách lề dưới, bạn hãy tăng số đó lên.

Có vệt trắng bên dưới Tab Bar khi mở bằng ứng dụng Google trên iPhone

Khi khách mở shop từ ứng dụng Google trên iPhone, đôi khi sẽ thấy một dải trắng hở ra ngay dưới Tab Bar. Đây là lỗi hiển thị riêng của ứng dụng Google trên iOS với mọi thanh cố định hoặc nút nổi ở đáy màn hình, không phải lỗi từ Navi+.

Navi+ đã xử lý để hạn chế tối đa tình trạng này: dải trắng nếu có chỉ thoáng qua một lần rồi tự 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 hoặc Chrome thì hoàn toàn không gặp. Bạn không cần chỉnh lại cài đặt nào trong menu.

Vẫn chưa hết đè nhau?

Bạn hãy gửi ảnh chụp màn hình, đường dẫn shop và tên app đang bị đụng giao diện cho đội hỗ trợ theo hướng dẫn tại bài Cách liên hệ hỗ trợ. Hầu hết trường hợp chỉ cần chỉnh lại số z-index hoặc thêm vài dòng CSS riêng trong menu là xong.

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.