Bài này tra cứu nửa dưới của cửa sổ Floating button: hai khung Mobile và Desktop, mỗi khung có công tắc Display, lưới vị trí, ô Margin (px) và mục Scroll effects. Phần hình dáng nút (icon, chữ, màu, ảnh) nằm ở bài Nút mở Mobile Menu.
Nút nổi chỉ có ở Mobile Menu. Để vào đúng chỗ:
- Mở Mobile Menu, bấm bước Publish trên thanh bước bên trái. Tấm Publish trượt ra từ bên phải.
- Ở mục Where can shoppers open this menu?, bấm thẻ Floating button rồi gạt bật Show a floating button on this site.
- Bấm Customize floating button. Cửa sổ Floating button mở ra với hai khung Mobile và Desktop ở phần dưới.
Mọi thay đổi hiện ngay ở khung xem trước. Chỉnh xong, bạn bấm Done rồi lưu lại. Menu cần đang ở trạng thái ON thì nút mới xuất hiện trên cửa hàng.
Mỗi khung chỉ áp cho đúng loại màn hình của nó. Navi+ coi màn hình rộng từ 768 px trở xuống là “điện thoại” và rộng hơn là “máy tính”. Khi khách xoay màn hình hoặc kéo giãn cửa sổ qua mốc này, nút tự đổi sang vị trí và lề của khung còn lại.
Trong cả 10 ô dưới đây, gói cần có: không giới hạn, gói nào cũng dùng được. Các ô đều áp cho Mobile Menu, không phân theo cấp hay loại mục.
Hiện hay ẩn nút trên từng thiết bị
Display (Mobile)
Công tắc Display nằm ở đầu khung Mobile. Gạt tắt thì nút nổi không còn hiện trên điện thoại. Đây là cách nhanh nhất để chỉ dùng nút này cho máy tính.
- Mặc định cho menu mới: bật.
- Khi tắt: các ô vị trí, lề và hiệu ứng cuộn của khung Mobile thu gọn lại, nhưng giá trị bạn đã chọn vẫn được giữ. Bật lại là mọi thứ trở về như cũ. Hiệu ứng cuộn của điện thoại cũng không chạy nữa.
- Chỉ hiện khi: công tắc Show a floating button on this site đang bật.
Khách thấy gì: bật thì điện thoại có nút nổi, tắt thì không có. Khách vẫn mở được menu bằng các cách mở khác bạn đã chọn trong tấm Publish (icon ≡ cạnh logo, nút ☰ của theme…).
Display (Desktop)
Công tắc Display ở đầu khung Desktop, hoạt động y hệt ô của điện thoại nhưng cho máy tính.
- Mặc định cho menu mới: bật.
- Khi tắt: khung Desktop thu gọn, giữ nguyên cài đặt cũ, hiệu ứng cuộn của máy tính ngừng chạy.
- Chỉ hiện khi: công tắc Show a floating button on this site đang bật.
Khách thấy gì: nhiều cửa hàng muốn nút nổi chỉ có trên điện thoại vì máy tính đã có thanh menu ngang. Khi đó bạn tắt ô này và giữ ô Display của Mobile.
Nền tảng khác
Các bước ở trên dành cho Shopify — đây là cách mặc định.
Trên Wix, hai công tắc Display nằm trong cùng cửa sổ Floating button của Method 4, giống hệt Shopify.
Trên website khác, hai công tắc Display cũng nằm ở Method 4 với cùng cách dùng.
Vị trí của nút
Mỗi khung có một lưới các nút bấm, mỗi nút là một vị trí. Bấm vào vị trí nào thì ô đó sáng lên và nút nổi dời tới đó ngay trong khung xem trước.
| Nhóm | Vị trí (nhãn trong app) | Nút nằm ở đâu |
|---|---|---|
| Nằm ở đáy | Bottom-left, Bottom-center, Bottom-right | Nổi lên trên mép dưới, ở trái, giữa hoặc phải |
| Dính sát cạnh | Left edge, Right edge | Dính vào mép trái hoặc phải, nằm giữa chiều cao màn hình, chữ xoay dọc |
| Top edge, Bottom edge | Dính vào mép trên hoặc dưới, nằm giữa chiều ngang màn hình | |
| Nằm sát góc | Corner top-left, Corner top-right, Corner bottom-left, Corner bottom-right | Nút thành hình tam giác 60 px dính vào đúng góc màn hình |
| Chỉ có trên điện thoại | Top-left overlay | Đè lên đúng chỗ nút ☰ mặc định ở góc trên bên trái của theme |
Vị trí nút trên Mobile
Lưới vị trí nằm dưới công tắc Display của khung Mobile, không có nhãn riêng. Bạn chọn đúng 1 trong 12 vị trí ở bảng trên.
- Mặc định cho menu mới: Bottom-right (góc dưới bên phải).
- Chỉ hiện khi: công tắc Display của Mobile đang bật.
- Top-left overlay: vị trí này chỉ có ở điện thoại. Hợp khi theme có nút ☰ ở góc trên bên trái mà bạn muốn thay bằng nút của Navi+: nút nổi phủ đúng lên đó nên khách bấm vào ☰ là Mobile Menu mở ra. Nếu để trống ô Margin, nút nằm cách mép trên 8 px và mép trái 16 px.
Khách thấy gì khi đổi:
- Ở 3 vị trí Bottom-… và 2 vị trí Top edge/Bottom edge, nút có dạng viên thuốc bo tròn. Với Top edge/Bottom edge, nếu lề sát mép bằng 0 thì phía chạm mép được cắt phẳng để nút trông như một cái tab dính vào cạnh.
- Ở Left edge và Right edge, nút xoay thành tab dọc: icon ở trên, chữ chảy dọc xuống phía dưới. Nếu lề phía cạnh đó bằng 0, hai góc sát mép được cắt vuông.
- Ở 4 vị trí Corner, nút thành tam giác 60 px, icon và chữ nằm trong góc, chữ nghiêng 45 độ theo cạnh huyền. Ô Curve (px) không còn tác dụng ở các vị trí này.
- Với kiểu Image, ảnh được đặt đúng vị trí đã chọn nhưng không có nền hay viền.
Nền tảng khác
Các bước ở trên dành cho Shopify — đây là cách mặc định.
Trên Wix, lưới 12 vị trí giống hệt Shopify, mặc định cũng là Bottom-right.
Trên website khác, lưới vị trí giống hệt Shopify. Nếu theme của bạn có nút ☰ ở vị trí khác, hãy dùng ô Margin để căn lại nút.
Vị trí nút trên Desktop
Lưới vị trí nằm dưới công tắc Display của khung Desktop, giống lưới của điện thoại nhưng thiếu Top-left overlay, nên còn 11 vị trí.
- Mặc định cho menu mới: Bottom-right.
- Chỉ hiện khi: công tắc Display của Desktop đang bật.
Khách thấy gì khi đổi: hình dạng nút theo từng vị trí giống hệt phần điện thoại ở trên. Vì hai khung độc lập, bạn có thể đặt nút ở Bottom-right trên điện thoại và Right edge trên máy tính.
Khoảng cách tới mép màn hình
Margin (px) — Mobile
Ô Margin (px) của khung Mobile quyết định nút cách mép màn hình điện thoại bao nhiêu pixel.
- Mặc định cho menu mới: để trống, ô hiện chữ mờ
Inherit. Lúc này Navi+ tự dùng 16 px cho nút ở đáy và Top-left overlay (riêng cạnh trên của Top-left overlay là 8 px), còn các vị trí dính cạnh và góc dùng 0 px để nút dính sát mép. - Cách nhập: số pixel theo thứ tự Trên, Phải, Dưới, Trái, viết cách nhau bằng dấu cách, giống cách viết lề trong CSS. Nhập 1 số thì cả 4 cạnh dùng số đó, 2 số là trên-dưới rồi trái-phải, 3 số là trên, trái-phải, dưới. Mỗi số phải là 0 trở lên. Số sai hoặc số âm sẽ bị bỏ qua và dùng mặc định.
- Chỉ hiện khi: công tắc Display của Mobile đang bật.
Chỉ những cạnh liên quan tới vị trí đang chọn mới có tác dụng:
| Vị trí | Cạnh được dùng |
|---|---|
| Bottom-left, Corner bottom-left | Dưới, trái |
| Bottom-right, Corner bottom-right | Dưới, phải |
| Bottom-center, Bottom edge | Dưới |
| Top edge | Trên |
| Left edge | Trái |
| Right edge | Phải |
| Corner top-left, Top-left overlay | Trên, trái |
| Corner top-right | Trên, phải |
Khách thấy gì khi đổi: nút nhích ra xa hoặc lại gần mép màn hình đúng số pixel bạn nhập. Ví dụ nút ở Bottom-right với 80 sẽ nằm cao hơn và cách mép phải 80 px, nên tránh được khung chat hoặc Tab Bar nằm dưới. Với vị trí dính cạnh, chỉ cần lề lớn hơn 0 là nút tách khỏi mép và được bo đủ bốn góc như một nút nổi độc lập.
Margin (px) — Desktop
Ô Margin (px) của khung Desktop, cùng cách nhập và cùng bảng cạnh được dùng như ô của điện thoại, nhưng chỉ áp cho màn hình máy tính.
- Mặc định cho menu mới: để trống (
Inherit): 16 px cho nút ở đáy, 0 px cho vị trí dính cạnh và góc. - Chỉ hiện khi: công tắc Display của Desktop đang bật.
Khách thấy gì khi đổi: nút nhích ra xa hoặc lại gần mép cửa sổ trình duyệt. Hai ô Margin độc lập nhau, nên chỉnh máy tính không làm đổi điện thoại.
Hiệu ứng khi khách cuộn trang
Mục Scroll effects nằm cuối mỗi khung, có 2 ô gạt. Hai ô tác dụng ngược nhau nên bạn chỉ bật một trong hai cho mỗi thiết bị.
Cả 4 ô cùng chung cách chạy: nút mờ dần và trượt xuống khoảng 16 px trong 0,1 giây khi ẩn, rồi hiện lại cũng mượt như vậy. Khi nút đang ẩn, khách không bấm trúng nó được. Khách cần cuộn hơn khoảng 20 px thì nút mới đổi trạng thái, để nút không chớp liên tục.
Hide when scrolling down on Mobile screen
Nút tự ẩn khi khách cuộn xuống và hiện lại khi cuộn lên, chỉ trên điện thoại. Hợp khi bạn muốn nút không che nội dung trang sản phẩm dài.
- Mặc định cho menu mới: tắt.
- Chỉ hiện khi: công tắc Display của Mobile đang bật. Nếu Display tắt, ô này không có tác dụng.
Khách thấy gì khi bật: mới vào trang thì nút hiện. Cuộn xuống thì nút ẩn, cuộn lên thì hiện lại. Ở sát đầu trang nút luôn hiện, còn khi chạm đáy trang nút luôn ẩn để không che chân trang.
Only show after scrolling down on Mobile
Nút chỉ xuất hiện sau khi khách bắt đầu cuộn xuống, chỉ trên điện thoại. Hợp khi trang đầu có banner lớn và bạn chưa muốn hiện nút ngay.
- Mặc định cho menu mới: tắt.
- Chỉ hiện khi: công tắc Display của Mobile đang bật.
Khách thấy gì khi bật: mới vào trang thì nút ẩn. Cuộn xuống thì nút hiện, cuộn lên thì ẩn lại. Ở sát đầu trang nút luôn ẩn, còn khi chạm đáy trang nút luôn hiện.
Hide when scrolling down on desktop screen
Giống ô ẩn khi cuộn của điện thoại, nhưng cho máy tính.
- Mặc định cho menu mới: tắt.
- Chỉ hiện khi: công tắc Display của Desktop đang bật.
Khách thấy gì khi bật: trên máy tính, cuộn xuống thì nút ẩn, cuộn lên thì hiện lại; sát đầu trang luôn hiện, chạm đáy trang luôn ẩn.
Only show after scrolling down on Desktop
Giống ô chỉ hiện sau khi cuộn của điện thoại, nhưng cho máy tính.
- Mặc định cho menu mới: tắt.
- Chỉ hiện khi: công tắc Display của Desktop đang bật.
Khách thấy gì khi bật: trên máy tính, mới vào trang thì nút ẩn, cuộn xuống thì hiện, cuộn lên thì ẩn lại; sát đầu trang luôn ẩn, chạm đáy trang luôn hiện.
Hiệu ứng cuộn được gắn một lần khi trang tải xong, theo kích thước màn hình lúc đó. Nếu bạn vừa đổi ô này rồi thử bằng cách kéo cửa sổ trình duyệt, hãy tải lại trang để thấy đúng kết quả.
Nền tảng khác
Các bước ở trên dành cho Shopify — đây là cách mặc định.
Trên Wix, cả 4 ô Scroll effects nằm trong cùng cửa sổ Floating button (Method 4) và chạy giống Shopify.
Trên website khác, 4 ô Scroll effects cũng chạy giống Shopify, tính theo cuộn của cả trang.