Xử lý nút nổi đè lên Tab Bar

1. Để Navi+ tự xử lý

Khi nào dùng: App của bạn nằm trong danh sách Navi+ đã biết (Tidio, Gorgias, PushOwl). Không cần cài gì.

1. Bật Tab Bar trên điện thoại như bình thường (bước Configure → Display on mobile).
2. Mở cửa hàng trên điện thoại. Nếu bong bóng chat hoặc chuông đang nằm trên Tab Bar, Navi+ tự nhấc nó lên cách thanh khoảng 12px.
3. Khi menu hoặc popup Navi+ đang mở, Navi+ ẩn widget đó và hiện lại khi menu đóng.
4. Nếu Tab Bar tự ẩn khi cuộn, widget về chỗ cũ cùng lúc.
5. App của bạn không có trong danh sách đó? Dùng một trong các cách dưới.

2. Đưa app vào Tab Bar

Khi nào dùng: Hợp nhất với chat, WhatsApp, Messenger và form đăng ký. Mục trong Tab Bar mở app, nên nút nổi của app không cần nữa.

1. Mở Tab Bar (bước Build Menu), bấm Item trong danh sách Menu items để mở popup Add item. Chọn loại (Links & icons, hoặc Page & app actions cho bước 3), rồi đặt tên mục (ví dụ “Chat”) và chọn icon.
2. Ở ô Link của mục, mở Library rồi chọn Open other applications. Chọn Open Chatbox (FAB) cho Shopify Inbox hoặc form Klaviyo, hoặc dán link như https://wa.me/ cho WhatsApp.
3. App khác có nút nổi riêng? Ở nhóm Page & app actions chọn Simulate action rồi dùng open:clickTo(selector) với selector của nút nổi đó. Thêm Down hoặc Up để cuộn trước, ví dụ open:clickTo(selector, Down).
4. Ẩn nút nổi gốc của app (xem các cách tiếp theo) để chỉ còn mục trong Tab Bar.
5. Lưu lại và thử trên điện thoại.

3. Dời hoặc ẩn nút trong cài đặt của chính app

Khi nào dùng: Cách đơn giản nhất khi app có mục vị trí, khoảng cách đáy hoặc tuỳ chọn mobile. Đổi một cài đặt là nút hết đè Tab Bar.

1. Mở trang quản trị của app từ Shopify admin → Apps.
2. Tìm mục Appearance, Widget, Launcher hoặc Position.
3. Dời nút sang bên đối diện, hoặc tăng khoảng cách đáy (offset) bằng chiều cao Tab Bar cộng khoảng 12px. Hãy đo thanh trên điện thoại; thường 60 đến 80px.
4. Hoặc tắt nút trên mobile nếu app cho phép, rồi mở app từ một mục trong Tab Bar.
5. Lưu trong app rồi tải lại cửa hàng trên điện thoại. Các bước riêng của từng app nằm ở phần app bên dưới.

4. Nâng nút lên trên Tab Bar bằng CSS

Khi nào dùng: App không có cài đặt vị trí, hoặc bạn không vào được cài đặt. Cách này chỉ nâng nút lên trên điện thoại.

1. Tìm CSS selector của nút nổi (chuột phải vào nút trong Chrome → Inspect). Nhiều app bên dưới đã có sẵn selector đã đo.
2. Mở Tab Bar, vào bước Configure rồi cuộn tới Global CSS. Dùng Global CSS, không dùng Custom CSS for this menu: CSS của menu chỉ tác động lên chính menu nên không dời được nút của app khác.
3. Dán CSS bên dưới và thay selector. Đổi 80px thành chiều cao Tab Bar cộng khoảng 12px.
4. Lưu và tải lại trên điện thoại. Nút chưa dời thì thêm !important hoặc dùng selector của phần bọc ngoài.

Dán vào Global CSS (bước Configure). Chỉ áp dụng trên điện thoại.

/* Lift a floating button above the Tab Bar on phones. Paste into Global CSS. */
@media (max-width: 768px) {
  [FLOATING ELEMENT SELECTOR] { bottom: 80px !important; }
}

5. Ẩn nút trên điện thoại bằng CSS

Khi nào dùng: Bạn đã đưa app vào Tab Bar (cách 2) và muốn nút gốc của nó biến mất trên điện thoại.

1. Mở bước Configure và cuộn tới Global CSS.
2. Dán CSS bên dưới và thay selector bằng nút nổi của app.
3. Nếu mục Tab Bar dùng open:clickTo thì dùng opacity:0 kèm pointer-events:none thay vì display:none, vì clickTo vẫn cần nút tồn tại.
4. Đừng ẩn banner cookie hoặc nút hỗ trợ tiếp cận kiểu này. Hãy dời chúng.

Dán vào Global CSS (bước Configure). Chỉ áp dụng trên điện thoại.

/* Hide a floating button on phones. Paste into Global CSS. */
@media (max-width: 768px) {
  [FLOATING ELEMENT SELECTOR] { display: none !important; }
}

6. Ẩn Tab Bar ở trang đã có thanh riêng ở đáy

Khi nào dùng: Trang sản phẩm có thanh Add to cart dính đáy, hoặc trang có thanh giỏ hàng. Hai thanh ở đáy tranh chỗ nhau.

1. Mở Tab Bar, vào bước Configure rồi cuộn tới Visibility Rules.
2. Trong Visibility Rules, mở luật theo trang (chỉ hiện ở một số loại trang, hoặc khớp từ khoá trong địa chỉ trang).
3. Bỏ chọn Products, hoặc chọn các trang cần hiện Tab Bar. Bỏ chọn hết thì hiện ở mọi trang.
4. Lưu rồi mở một trang sản phẩm trên điện thoại để kiểm tra.
5. Visibility Rules nằm trong các gói trả phí. Xem bài Ai thấy menu để biết đủ các tuỳ chọn.

7. Cho Tab Bar tự ẩn khi cuộn xuống

Khi nào dùng: Nút chỉ vướng lúc khách đang đọc trang. Thanh trượt đi và widget có lại chỗ.

1. Mở Tab Bar, vào bước Configure và tìm Display on mobile.
2. Bật Hide when scrolling down on Mobile screen.
3. Lưu rồi cuộn một trang trên điện thoại. Thanh ẩn khi cuộn xuống và hiện lại khi cuộn lên.
4. Khi bật tuỳ chọn này, Navi+ không chừa khoảng trống ở cuối trang vì thanh không luôn hiện.

8. Chừa chỗ bằng margin ngoài của Tab Bar

Khi nào dùng: Bạn muốn Tab Bar kiểu nổi, chừa khoảng cách ở đáy và hai bên để nút nhỏ nằm cạnh.

1. Mở Tab Bar, vào bước Design rồi tab Main menu.
2. Ở Container spacing, tìm Inner/outer spacing và chỉnh Margin (khoảng cách ngoài của cả menu). Đừng dùng Each item spacing → Margin (px): đó là của từng mục.

3. Dùng cú pháp Mobile

   Desktop để đặt riêng từng màn, ví dụ 8

   24 là 8px trên mobile và 24px trên desktop.

4. Kiểm tra trên điện thoại. Cách này dời Tab Bar, không dời nút của app kia.

9. Nhờ Navi+ xử lý giúp

Khi nào dùng: Bạn đã thử các cách trên mà nút vẫn đè Tab Bar, hoặc không muốn đụng tới code.

1. Mở khung chat trong app Navi+, hoặc gửi email cho đội hỗ trợ.
2. Gửi link cửa hàng và tên app đang đè Tab Bar. Kèm ảnh chụp từ điện thoại càng tốt.
3. Khách dùng Navi+ Care có thể nhờ đội ngũ dựng giúp mục Tab Bar hoặc đoạn CSS.

Shopify InboxHay đè Tab Bar

Nút trông thế nào: Nút "Chat" dạng viên thuốc, cỡ 87×47px, ở góc phải-dưới, cách đáy 20px. Đúng vùng của Tab Bar. Bấm vào mở khung chat cỡ 382×675px.

Hướng dẫn của hãng: Shopify Help Center: Inbox chat settings

Đưa vào Tab Bar

1. Trong menu Tab Bar, bấm Add item, đặt tên “Chat” và chọn icon chat.
2. Ở ô Link, mở Library → Open other applications rồi chọn Open Chatbox (FAB), hoặc gõ open:Inbox.
3. Lưu lại. Navi+ tự ẩn bong bóng Inbox và mở khung chat khi khách bấm mục này.
4. Muốn giữ bong bóng thì dùng open:InboxWithoutReplace.

Dời hoặc ẩn trong app

• Trong Shopify admin, vào Online Store rồi bấm Edit theme cạnh theme của bạn.
• Chọn App embeds, rồi Online store chat.
• Ở mục Widget, đặt Style là Button. Chọn Icon và Label.
• Đặt Horizontal Position và Vertical Position (nâng Vertical Position lên trên Tab Bar) rồi bấm Save.
• Trang của Shopify không nói về ẩn nút trên mobile. Dùng mục Tab Bar với open:Inbox, Navi+ tự ẩn bong bóng giúp bạn.

Dành cho lập trình viên

Đã chạy thử thật. Same approach Navi+ uses: click the activator button through the nested shadow roots (tested on 2 live stores, 2026-11-13). Hiding only the bubble needs a style inside the shadow root, so use the open:Inbox Tab Bar item instead. Shopify may rename classes, so Navi+ keeps the selectors in one place.

Nguồn: 1 2

TidioHay đè Tab Bar

Nút trông thế nào: Bong bóng chat tròn khoảng 60px ở góc phải-dưới, có lời mời nhỏ hiện cạnh nó. Hiện cả trên điện thoại.

Hướng dẫn của hãng: Tidio: widget position and visibility

Navi+ tự xử lý

Navi+ tự đẩy bong bóng Tidio lên trên Tab Bar trên điện thoại. Bạn không cần làm gì.

Dời hoặc ẩn trong app

• Vào Settings > Live Chat > Appearance và mở mục Visibility and position.
• Chọn tab Desktop hoặc Mobile (đặt riêng từng bên) rồi chọn trái hoặc phải ở phần vị trí widget.
• Muốn ẩn trên mobile: ở tab Mobile tắt công tắc Display.
• Khoảng cách đáy không có ô trong admin. Bài Widget Position của Tidio đưa đoạn script thêm trước thẻ đóng </body>, dùng #tidio { bottom: 50px !important; } trong media query max-width. Navi+ đã tự nhấc Tidio lên trên Tab Bar.

Ẩn nút bằng CSS

Dán vào Global CSS (bước Configure). Chỉ áp dụng trên điện thoại.

@media (max-width: 768px) {
  #tidio-chat { display: none !important; }
}

Dành cho lập trình viên

Theo tài liệu của app, chưa chạy thử. From Tidio’s docs, not run by us. Call after the tidioChat-ready event. hide() hides the whole widget, so call show() before open().

Nguồn: 1 2 3

GorgiasCó thể đè

Nút trông thế nào: Nút chat cỡ 70×64px ở góc phải-dưới, cách đáy khoảng 90px trên điện thoại 390×844. Trên mobile khung chat mở toàn màn hình.

Hướng dẫn của hãng: Gorgias: Chat visibility

Navi+ tự xử lý

Navi+ tự đẩy nút chat Gorgias lên trên Tab Bar trên điện thoại. Bạn không cần làm gì.

Dời hoặc ẩn trong app

• Ẩn trên mobile: bấm biểu tượng Settings ở góc trái-dưới của helpdesk, mở Channels, chọn Chat rồi chọn chat integration của bạn.
• Mở tab Preferences, cuộn tới “Where chat appears”, tắt “Show on mobile” và bấm Save ở góc phải-trên.
• Dời nút: mở cùng chat integration, vào tab Appearance và cuộn tới “Launcher position”.
• Dùng ô Position (mặc định Bottom right, hoặc Bottom left, Top right, Top left). Muốn chỉnh mịn thì gõ số pixel ở “Move horizontally” và “Move vertically”, xem bản xem trước rồi Save.

Ẩn nút bằng CSS

Dán vào Global CSS (bước Configure). Chỉ áp dụng trên điện thoại.

@media (max-width: 768px) {
  iframe#chat-button { display: none !important; }
}

Dành cho lập trình viên

Đã chạy thử thật. open() verified on glossier.com, tarte.com and jeffreestarcosmetics.com. hideOnMobile() exists in the API but we did not run it. hideChat() did NOT hide the launcher in our test; the CSS above does, and open() still works afterwards.

Nguồn: 1 2 3

ZendeskHay đè Tab Bar

Nút trông thế nào: Bong bóng chat ở góc phải-dưới. Hiện cả trên điện thoại.

Hướng dẫn của hãng: Zendesk: Advanced customization of the Web Widget (Classic)

Dời hoặc ẩn trong app

• Trong đoạn snippet Web Widget (Classic), đặt position là top-left, top-right, bottom-left hoặc bottom-right.
• Thêm offset (ví dụ offset: { horizontal: ‘0px’, vertical: ‘80px’ }) để dời khỏi góc đó. Trang của Zendesk nói cách này dùng được cho desktop hoặc mobile.
• Trang này dành cho widget Classic. Widget messaging dùng cài đặt khác; trang tìm được không nói về ẩn trên mobile.

Dành cho lập trình viên

Theo tài liệu của app, chưa chạy thử. From Zendesk’s docs (Messaging widget), not run by us. hide() hides the whole widget; call show() before open(). The older Classic widget uses zE(‘webWidget’, …) instead.

Nguồn: 1 2 3

IntercomHay đè Tab Bar

Nút trông thế nào: Nút tròn khoảng 48 đến 60px ở góc phải-dưới. Hiện cả trên điện thoại.

Hướng dẫn của hãng: Intercom: Messenger customization (developer docs)

Dời hoặc ẩn trong app

• Intercom đặt vị trí nút bằng code. Trong object cài đặt Intercom (window.intercomSettings hoặc Intercom(‘boot’, {…})) đặt alignment là ‘left’ hoặc ‘right’, và dùng vertical_padding để nâng nút lên trên Tab Bar.
• Trang của Intercom không nói rõ các tuỳ chọn này có áp dụng trên điện thoại không, nên hãy thử trên điện thoại. Nhờ lập trình viên, hoặc dùng cách CSS bên dưới.

Ẩn nút bằng CSS

Dán vào Global CSS (bước Configure). Chỉ áp dụng trên điện thoại.

@media (max-width: 768px) {
  .intercom-launcher { display: none !important; }
}

Dành cho lập trình viên

Theo tài liệu của app, chưa chạy thử. From Intercom’s docs. We could detect Intercom on gymshark.com and ritual.com, but the launcher does not show to anonymous visitors there, so open/hide were not run. hide_default_launcher: true overrides every launcher display setting in the Intercom admin.

Nguồn: 1 2 3

CrispHay đè Tab Bar

Nút trông thế nào: Bong bóng chat ở góc phải-dưới, hiện trên điện thoại.

Hướng dẫn của hãng: Crisp: How to hide the chat on mobile

Dời hoặc ẩn trong app

• Muốn ẩn trên mobile: Settings > Chatbox Settings > Chatbox Behavior, bật “Hide chatbox on mobile devices” (tự lưu).
• Muốn dời sang trái: Settings > Chatbox Settings > Chatbox Appearance, bật “Reverse the position of the chatbox (Show on the left)”.
• Khi đã bật “Hide chatbox on mobile devices”, SDK JavaScript của Crisp không ép hiện lại chatbox trên mobile được.

Dành cho lập trình viên

Theo tài liệu của app, chưa chạy thử. From Crisp’s docs, not run by us. Use chat:show to bring it back.

Nguồn: 1 2 3

Tawk.toHay đè Tab Bar

Nút trông thế nào: Bong bóng chat mặc định ở góc phải-dưới, hiện trên điện thoại.

Hướng dẫn của hãng: tawk.to: Changing the widget position

Dời hoặc ẩn trong app

• Đăng nhập dashboard tawk.to và chọn property.
• Bấm Administration, rồi Chat Widget ở menu con bên trái.
• Ở Widget Appearance bấm Advanced. Tìm “Desktop and Mobile Widget Position”, chọn vị trí (mặc định Bottom Right) rồi Save.
• Muốn chỉ ẩn trên mobile: Administration > Chat Widget > Availability Restriction > Platform Restriction > Configure. Bật Platform Restriction, chọn “HIDE widget only from visitors on the following platforms”, tick Mobile, bỏ tick Desktop rồi Save.

Dành cho lập trình viên

Theo tài liệu của app, chưa chạy thử. From Tawk.to’s JS API docs, not run by us. Call after onLoad; hideWidget() too early throws a viewHandler error. showWidget() brings it back.

Nguồn: 1 2 3

RichpanelCó thể đè

Nút trông thế nào: Nút chat ở gần đáy. Ở một cửa hàng đã đo, nút chưa hiện trên mobile cho tới khi widget tải xong.

Hướng dẫn của hãng: Richpanel: Configuring widget position and visibility

Dời hoặc ẩn trong app

• Trong cài đặt widget, tìm “Widget Icon Position” và chọn trái hoặc phải.
• Đặt khoảng cách tới cạnh và đáy trang bằng pixel (trang docs không ghi tên các ô này). Tăng khoảng cách đáy để nằm trên Tab Bar.
• Ở “Visibility Settings”, bật “Hide Widget on Mobile Website” để ẩn trên mobile.

Dành cho lập trình viên

Đã chạy thử thật. Changing the URL hash opens the chat; tested on ridgewallet.com (iframe opened full screen). Richpanel has no API to hide the launcher.

Nguồn: 1 2

Help Scout BeaconCó thể đè

Nút trông thế nào: Nút Beacon tròn ở góc phải-dưới, hiện trên điện thoại.

Hướng dẫn của hãng: Help Scout: Advanced Beacon customization

Dời hoặc ẩn trong app

• Beacon được đặt bằng code. Thêm Beacon(‘config’, { hideFABOnMobile: true }) để ẩn Beacon trên điện thoại.
• Dùng Beacon(‘config’, { hideFABLabelOnMobile: true }) để chỉ ẩn nhãn chữ trên điện thoại.
• Tài liệu Beacon 1.0 cũ còn ghi position: ‘left’ (mặc định ‘right’). Nhờ lập trình viên thêm đoạn code.

Dành cho lập trình viên

Theo tài liệu của app, chưa chạy thử. From Help Scout’s Beacon docs, not run by us. Beacon(‘destroy’) removes it entirely.

Nguồn: 1 2

HubSpot ChatHay đè Tab Bar

Nút trông thế nào: Bong bóng chat ở góc phải-dưới.

Hướng dẫn của hãng: HubSpot: Connect and customize a chat channel

Dời hoặc ẩn trong app

• Bấm biểu tượng settings ở thanh điều hướng trên cùng.
• Ở thanh bên trái vào Inbox & Help Desk > Inboxes (dùng danh sách “Current view” nếu có nhiều inbox).
• Rê chuột lên kênh chat, bấm Edit, rồi bấm “Web chat” ở thanh bên trái.
• Ở “Chat widget placement” chọn Left hoặc Right. Có thể bật “Chat widget movement” để khách tự kéo widget.
• Trang của HubSpot không có cài đặt chỉ ẩn widget trên mobile.

Dành cho lập trình viên

Theo tài liệu của app, chưa chạy thử. From HubSpot’s developer docs; we did not run it in this survey. Wait for HubSpotConversations to load first.

Nguồn: 1

FreshchatHay đè Tab Bar

Nút trông thế nào: Bong bóng chat ở góc phải-dưới.

Hướng dẫn của hãng: Freshworks: Change the position of the Freshchat widget

Dời hoặc ẩn trong app

• Vào Admin Settings > Channels > Web Chat và chọn widget.
• Mở Appearance và cuộn tới mục “Position and behavior”.
• Đặt “Widget Position” là Bottom-left hoặc Bottom-right rồi lưu. Trang của Freshchat không có khoảng cách đáy và không có công tắc riêng cho mobile.

Dành cho lập trình viên

Theo tài liệu của app, chưa chạy thử. From Freshworks’ docs as we know them; not run by us. fcWidget.show() brings it back.

Nguồn: 1

LiveChatHay đè Tab Bar

Nút trông thế nào: Bong bóng chat ở góc phải-dưới.

Hướng dẫn của hãng: LiveChat: Chat widget visibility

Dời hoặc ẩn trong app

• Mở Settings > Chat Window > Customization và bấm Position để chọn vị trí widget, rồi Save changes.
• Muốn ẩn trên mobile: Settings > Chat Window > Customization > “Mobile Chat widget”, chọn “Custom for mobile devices”, cuộn xuống, tắt “Show chat widget on mobile” rồi Save changes.

Dành cho lập trình viên

Theo tài liệu của app, chưa chạy thử. From LiveChat’s JavaScript API docs, not run by us.

Nguồn: 1 2

GladlyCó thể đè

Nút trông thế nào: Nút ở góc phải-dưới. Lúc quét, nút bị ẩn trên mobile.

Hướng dẫn của hãng: Gladly: Create and configure Chat

Dời hoặc ẩn trong app

• Vào Style > Placement và chọn trái hoặc phải cho chỗ Chat xuất hiện.
• Dùng Z-Index trong cùng mục Placement để đặt thứ tự lớp của biểu tượng Chat thu nhỏ.
• Trang của Gladly không có khoảng cách đáy và không có công tắc ẩn trên mobile.

Nguồn: 1

Nút WhatsAppHay đè Tab Bar

Nút trông thế nào: Nút WhatsApp nổi, thường là hình tròn xanh ở một góc dưới.

Đưa vào Tab Bar

1. Trong menu Tab Bar, bấm Add item, đặt tên “WhatsApp” và chọn icon WhatsApp.
2. Ở ô Link, gõ https://wa.me/<số điện thoại>. Dùng số đầy đủ có mã quốc gia, chỉ gồm chữ số (không dấu + hay khoảng trắng).
3. Tắt nút WhatsApp nổi trong app đang thêm nó (Elfsight, Dondy, Musbu và các app tương tự).
4. Lưu lại rồi bấm thử mục này trên điện thoại để chắc là mở được WhatsApp.

Dời hoặc ẩn trong app

• Mở app đang thêm nút WhatsApp (ví dụ Elfsight, Dondy, Musbu).
• Tắt nút nổi, hoặc đổi vị trí hoặc ẩn trên điện thoại.

Nguồn: 1

ChatyHay đè Tab Bar

Nút trông thế nào: Nút nổi các kênh liên hệ ở góc phải-dưới hoặc trái-dưới, hiện trên điện thoại. Bên nào tuỳ cài đặt.

Đưa vào Tab Bar

1. Thêm một mục Tab Bar với đường dẫn https://wa.me/<số điện thoại> (số đầy đủ có mã quốc gia, chỉ chữ số).
2. Trong Chaty, tắt widget nổi hoặc ẩn nó trên điện thoại.

Dời hoặc ẩn trong app

• Trong Chaty, mở cài đặt widget và đổi vị trí, hoặc ẩn trên điện thoại.

Nguồn: 1

Facebook Messenger (customer chat)Có thể đè

Nút trông thế nào: Nút Messenger nổi ở đáy. Meta đang bỏ plugin cũ này.

Đưa vào Tab Bar

1. Thêm một mục Tab Bar tên “Messenger” với đường dẫn https://m.me/<tên trang> (username trang Facebook của bạn).
2. Meta đã khai tử plugin chat Messenger. Nếu bong bóng không còn trên cửa hàng thì bạn chỉ cần mục Tab Bar này.

Ẩn nút bằng CSS

Dán vào Global CSS (bước Configure). Chỉ áp dụng trên điện thoại.

@media (max-width: 768px) {
  .fb_dialog { display: none !important; }
}

Klaviyo (teaser / popup)Có thể đè

Nút trông thế nào: Thanh teaser cỡ 354×50px ở sát mép đáy màn hình (đo được không có khoảng hở bên dưới).

Hướng dẫn của hãng: Klaviyo: How to optimize popup and flyout forms for mobile

Đưa vào Tab Bar

1. Trong menu Tab Bar, bấm Add item và đặt tên “Sign up” (hoặc “Offers”).
2. Ở ô Link, mở Library → Open other applications → Open Klaviyo form, hoặc gõ open:Klaviyo. Nó mở form mà Klaviyo đang chạy trên trang.
3. Muốn mở đúng một form popup/flyout thì gõ open:Klaviyo(FORM_ID). Trong Klaviyo, form đó phải đặt Display timing là custom trigger.
4. Lưu lại. Teaser nổi của Klaviyo tự ẩn khi menu có mục này.

Dời hoặc ẩn trong app

• Trong Klaviyo, mở form rồi bấm Edit styles để mở bảng Styles.
• Chọn “Mobile flyout position” và đặt “Dock to bottom” hoặc “Dock to top”. Chọn top nếu đáy đang có Tab Bar.
• Với teaser, đặt tuỳ chọn hiển thị là “Show after form is closed” hoặc “Show before displaying form and after form is closed”.
• Trang của Klaviyo không mô tả vị trí teaser hay công tắc ẩn riêng teaser trên mobile. Dùng mục Tab Bar (open:Klaviyo) để thay nó.

Ẩn nút bằng CSS

Dán vào Global CSS (bước Configure). Chỉ áp dụng trên điện thoại.

@media (max-width: 768px) {
  [class*='kl-teaser'] { display: none !important; }
}

Dành cho lập trình viên

Theo tài liệu của app, chưa chạy thử. From Klaviyo’s docs; the form must be a popup or flyout with a custom trigger. We found Klaviyo on 30 of 80 stores but no public form ID, so it was not run. The teaser belongs to the form: turn it off in Klaviyo.

Nguồn: 1 2

PrivyCó thể đè

Nút trông thế nào: Popup hoặc thẻ nhỏ mở form, tuỳ chiến dịch.

Hướng dẫn của hãng: Privy: Manage display tabs

Dời hoặc ẩn trong app

• Trong trình soạn Privy, bấm Tab trong bảng Display Steps. Nếu display chưa có tab thì bấm Add Tab.
• Dùng các nút điều khiển ở bên phải màn hình để chọn thiết bị nào hiện tab (tắt cho mobile) và đặt vị trí tab.
• Trang docs đã cũ và không liệt kê đúng các lựa chọn, nên hãy đối chiếu nhãn trong trình soạn của bạn.

Nguồn: 1 2

AttentiveCó thể đè

Nút trông thế nào: Popup đăng ký toàn màn hình, kèm thẻ teaser nhỏ ở cạnh hoặc đáy màn hình.

Dời hoặc ẩn trong app

• Trong Attentive, mở cài đặt hiển thị của popup đăng ký và kiểm vị trí teaser cùng tần suất.

OmnisendCó thể đè

Nút trông thế nào: Popup đăng ký hoặc teaser nhỏ, tuỳ form bạn cài.

Hướng dẫn của hãng: Omnisend: Add a teaser to your signup forms

Dời hoặc ẩn trong app

• Vào Forms và mở popup form của bạn.
• Ở menu dưới bấm biểu tượng + rồi chọn Teaser.
• Trong bảng cài đặt, mở tab Style.
• Ở Style Settings, tìm Position và chọn chỗ teaser nổi (ví dụ center-left thay vì bottom-left).
• Bấm Update live form (hoặc Enable form nếu form chưa chạy) ở góc phải-trên.

Nguồn: 1 2

Popup "vừa có người mua"Hay đè Tab Bar

Nút trông thế nào: Thẻ thông báo nhỏ ở gần đáy màn hình.

Dời hoặc ẩn trong app

• Trong app đang hiện popup (Fomo, Sales Pop và tương tự), đặt vị trí ở phía trên, hoặc tắt trên điện thoại.

Thanh freeship / thông báo ở đáyHay đè Tab Bar

Nút trông thế nào: Thanh rộng hết màn hình ở đáy hoặc đầu trang, ví dụ thông báo miễn phí giao hàng.

Dời hoặc ẩn trong app

• Trong cài đặt app hoặc theme, dời thanh lên đầu trang.

PushOwl (chuông thông báo)Có thể đè

Nút trông thế nào: Chuông nhỏ ở gần góc dưới màn hình, cố định đè lên trang.

Navi+ tự xử lý

Navi+ tự đẩy chuông PushOwl lên trên Tab Bar trên điện thoại. Bạn không cần làm gì.

Smile (Rewards)Hay đè Tab Bar

Nút trông thế nào: Nút tròn hoặc viên thuốc ở một góc dưới, trái hoặc phải. Có thể bật hoặc tắt riêng cho mobile.

Hướng dẫn của hãng: Smile.io: Change launcher placement

Dời hoặc ẩn trong app

• Trong Smile Admin vào On-site content và chọn Launcher.
• Chọn bên trái hoặc phải của trang.
• Mở menu Spacing để đặt khoảng cách cạnh và đáy của nút. Tăng khoảng cách đáy để nằm trên Tab Bar.
• Chọn tab Desktop hoặc Mobile để đặt từng thiết bị rồi bấm Save.
• Muốn ẩn trên mobile: On-site content > Launcher > thẻ Device visibility, chọn Desktop rồi Save (bài “Show or hide the loyalty launcher” của Smile).

Dành cho lập trình viên

Đã chạy thử thật. openPanel() verified on poshbaby.com (full-screen panel opens). No JS call to hide the launcher: use the Launcher visibility setting.

Nguồn: 1 2 3

Rivo (Rewards)Có thể đè

Nút trông thế nào: Widget điểm thưởng nổi ở một góc dưới.

Hướng dẫn của hãng: Rivo: Customizing the widget button and screen position

Dời hoặc ẩn trong app

• Vào On-Site Displays > Floating Widget > Widget Button.
• Chọn bên của màn hình, trái hoặc phải.
• Đặt side padding (cách mép) và bottom padding (cách đáy). Tăng bottom padding để nút nằm trên Tab Bar.
• Mobile và desktop tách riêng: chọn mobile ở đầu trang để đổi vị trí trên mobile. Bấm Save.
• Muốn ẩn trên mobile: vào On-Site Displays > Floating Widget > Visibility Settings, bật “Hide widget launcher button on mobile” và bấm Save.

Dành cho lập trình viên

Theo tài liệu của app, chưa chạy thử. RivoJS.openWidget() and closeWidget() exist (seen on puravidabracelets.com), but the widget did not render on mobile there, so we have not seen it open. No API found to hide the launcher.

Nguồn: 1 2

LoyaltyLionCó thể đè

Nút trông thế nào: Nút ở một góc dưới mở bảng điểm thưởng. Ở một cửa hàng đã đo, nút không hiện trên mobile.

Hướng dẫn của hãng: LoyaltyLion: Loyalty pop-up and widget

Dời hoặc ẩn trong app

• Trong LoyaltyLion mở Display > Store components.
• Ở thẻ “Loyalty widget” bấm Customize rồi mở tab “Global”.
• Ở “Position on your site” chọn Left hoặc Right (bài khuyên chọn bên đối diện widget chat), rồi Save Changes.
• Muốn ẩn, cũng ở tab Global, mục Visibility bỏ tick “Show UI” rồi Save Changes. Trang docs không nhắc công tắc riêng cho mobile.

Dành cho lập trình viên

Theo tài liệu của app, chưa chạy thử. From LoyaltyLion’s docs: any element with the data-lion-account-link attribute opens the loyalty panel when clicked. Not run by us (the launcher was not visible on onnit.com during the survey).

Nguồn: 1 2

Yotpo Loyalty (Swell)Có thể đè

Nút trông thế nào: Nút hoặc thẻ ở một góc dưới. Yotpo có mặt ở 14 trong 80 cửa hàng đã quét nên rất phổ biến.

Trong Yotpo Loyalty, tuỳ chỉnh launcher để không che Tab Bar.

Nguồn: 1

Joy LoyaltyCó thể đè

Nút trông thế nào: Nút ở một góc dưới.

Trong cài đặt Joy, dời launcher lên trên hoặc ẩn trên điện thoại.

Dành cho lập trình viên

Theo tài liệu của app, chưa chạy thử. From Joy’s developer docs, not run by us. Joy can also open from a deep link: add #joy-open to the URL.

Nguồn: 1 2

Seal / Sway (Rewards)Hay đè Tab Bar

Nút trông thế nào: Nút viên thuốc cỡ 120×50px ở góc trái-dưới, cách đáy 16px.

Đưa vào Tab Bar

1. Trong menu Tab Bar, bấm Add item và đặt tên “Rewards”.
2. Ở ô Link, gõ open:clickTo(#seal-loyalty-main-button) cho Seal, hoặc open:clickTo(#sway-launcher-btn) cho Sway. Navi+ sẽ bấm giúp nút của app.
3. Ẩn nút nổi bằng CSS bên dưới (nó vẫn nằm trong trang nên lệnh bấm còn hoạt động). Đừng gỡ nút trong app.
4. Lưu lại và thử trên điện thoại.

Dời hoặc ẩn trong app

• Trong cài đặt app, dời nút lên trên hoặc ẩn trên điện thoại.

Ẩn nút bằng CSS

Dán vào Global CSS (bước Configure). Chỉ áp dụng trên điện thoại.

@media (max-width: 768px) {
  #seal-loyalty-main-button, #sway-launcher-btn { opacity: 0 !important; pointer-events: none !important; }
}

Stamped (Rewards launcher)Ít khi đè

Nút trông thế nào: Widget trong trang hoặc thẻ nổi, tuỳ cấu hình.

Hướng dẫn của hãng: Stamped: Loyalty & Rewards launcher

Dời hoặc ẩn trong app

• Loyalty 2.0: vào Display > Launcher > Settings/Branding và tìm Placement. Loyalty Classic: vào Settings > Widgets > Launcher và tìm Placement.
• Đặt Position là Left hoặc Right (mặc định Left).
• Đặt Visibility: All devices (mặc định), Desktop only (ẩn trên mobile) hoặc Hide on all devices.
• Đặt “Launcher position bottom offset” bằng px (mặc định 30px). Tăng lên để nằm trên Tab Bar. “Launcher position left offset” dời nút khỏi cạnh.

Nguồn: 1

Thanh "Add to cart" của theme (trang sản phẩm)Hay đè Tab Bar

Nút trông thế nào: Thanh rộng hết màn hình ở đáy trang sản phẩm có nút Add to cart. Nhiều theme và app có sẵn thanh này.

Dời hoặc ẩn trong app

• Trong Theme editor, mở trang sản phẩm và tắt thanh Add to cart dính (tên cài đặt tuỳ theme).
• Hoặc giữ thanh đó và ẩn Tab Bar ở trang sản phẩm bằng Display rules.

accessiBeCó thể đè

Nút trông thế nào: Biểu tượng tiếp cận tròn nhỏ ở một góc dưới. Có thể ẩn trên mobile trong cài đặt.

Hướng dẫn của hãng: accessiBe: change the location of the accessibility button (Hướng dẫn của hãng (chưa mở thử được, trang chặn công cụ kiểm tra))

Dời hoặc ẩn trong app

• Nên giữ nút này vì nó là công cụ hỗ trợ tiếp cận.
• Trong accessiBe, tăng khoảng cách đáy trên điện thoại để nút nằm trên Tab Bar.

Dành cho lập trình viên

Theo tài liệu của app, chưa chạy thử. From accessiBe’s docs, not run by us. A data-acsb-custom-trigger=”true” attribute on your own element opens the menu. hideMobile / hideTrigger belong to the init config, which the app writes; prefer moving the button over hiding it.

Nguồn: 1 2 3

UserWayCó thể đè

Nút trông thế nào: Nút tiếp cận tròn nhỏ ở góc dưới trái hoặc phải. Đo phần bọc ngoài cách mép trái khoảng 13px, cách đỉnh 831px trên màn 844px.

Hướng dẫn của hãng: UserWay: Change the widget icon position in the dashboard

Dời hoặc ẩn trong app

• Đăng nhập manage.userway.org.
• Ở menu trái bấm My Sites, chọn site của bạn và mở tab Customize.
• Ở tab “Button Location Desktop” chọn vị trí, rồi chuyển sang “Button Location Mobile” và chọn vị trí cho điện thoại.
• Có thể bật “Enable exact button positioning” và đặt offset ngang và dọc (mỗi giá trị 5 đến 500 px), rồi Save. Tăng offset dọc để nút nằm trên Tab Bar.

Dành cho lập trình viên

Theo tài liệu của app, chưa chạy thử. Both functions exist (seen on ritual.com). Partly verified: widgetOpen() changed the DOM but we did not see the panel; the icon was already hidden there, so the hide effect is unconfirmed.

Nguồn: 1 2

UsableNet (A42)Hay đè Tab Bar

Nút trông thế nào: Nút tròn khoảng 48px ở góc phải-dưới, sát mép đáy (từ 776 đến 824px trên màn 844px).

Dời hoặc ẩn trong app

• Nên giữ nút này vì nó là công cụ hỗ trợ tiếp cận.
• Thêm đoạn này vào Global CSS, chỉnh 80px cho khớp chiều cao Tab Bar: @media (max-width: 768px) { #usntA42Toggle { bottom: 80px !important; } }

OneTrustHay đè Tab Bar

Nút trông thế nào: Banner cookie rộng hết màn hình ở đáy, cao khoảng 287 đến 290px trên điện thoại 390px. Một nút nhỏ mở lại phần tuỳ chọn.

Dời hoặc ẩn trong app

• Banner tự biến mất khi khách chọn xong nên chỉ che trong thời gian ngắn. Đừng ẩn bằng CSS vì đây là thông báo pháp lý.
• Muốn gọn hơn, sửa template banner trong OneTrust và chọn kiểu nổi ở góc (floating).

Dành cho lập trình viên

Theo tài liệu của app, chưa chạy thử. Well-known public API; not run by us. The banner measured about 390 x 290 px at the bottom on gymshark.com and kyliecosmetics.com.

CookiebotHay đè Tab Bar

Nút trông thế nào: Hộp thoại ở giữa hoặc ở đáy màn hình.

Hướng dẫn của hãng: Cookiebot: The Cookiebot CMP widget (Hướng dẫn của hãng (chưa mở thử được, trang chặn công cụ kiểm tra))

Dời hoặc ẩn trong app

• Banner tự biến mất khi khách chọn xong. Đừng ẩn bằng CSS vì đây là thông báo pháp lý.
• Muốn gọn hơn, đổi kiểu hoặc vị trí banner trong Cookiebot.

Dành cho lập trình viên

Đã chạy thử thật. renew() verified on taylorstitch.com (dialog opened, 374 x 474 px). Use it to let visitors reopen their consent choices.

Nguồn: 1

Pandectes GDPRHay đè Tab Bar

Nút trông thế nào: Banner cookie rộng hết màn hình ở đáy, kèm nút nổi nhỏ để đổi lựa chọn sau.

Hướng dẫn của hãng: Pandectes: enable and customize the consent widget

Dời hoặc ẩn trong app

• Trong Shopify admin vào Apps và mở Pandectes GDPR Compliance.
• Mở Cookie banner, rồi tab Layout.
• Ở Consent dialogs, bật công tắc Consent widget.
• Trong thẻ Consent widget, chọn Position rồi Save. Pandectes không có công tắc chỉ ẩn widget trên mobile.

Dành cho lập trình viên

Theo tài liệu của app, chưa chạy thử. Pandectes reopens the banner from any menu link that points to #reopenBanner (from their docs, not run by us). The banner measured about 390 x 184 px at the bottom on colourpop.com.

Nguồn: 1 2

Banner quyền riêng tư của ShopifyHay đè Tab Bar

Nút trông thế nào: Banner ở đáy màn hình, có sẵn của Shopify.

Dời hoặc ẩn trong app

• Banner tự biến mất khi khách chọn xong. Đừng ẩn bằng CSS vì đây là thông báo pháp lý.
• Muốn đổi, vào Shopify admin → Settings → Customer privacy.

Dành cho lập trình viên

Theo tài liệu của app, chưa chạy thử. From Shopify’s Customer Privacy docs (written for Hydrogen); not tested on Liquid themes.

Nguồn: 1

Thanh đáy có sẵn của themeHay đè Tab Bar

Nút trông thế nào: Thanh hoặc dock rộng hết màn hình ở sát đáy. 4 trong 80 cửa hàng đã quét có thanh này.

Dời hoặc ẩn trong app

• Trong Theme editor, tìm thanh đáy hoặc thanh mobile có sẵn của theme và tắt nó (tên tuỳ theme). Tab Bar sẽ thay chỗ nó.
• Gặp ở 4/80 cửa hàng khảo sát, ví dụ thanh dock mobile hoặc thanh tóm tắt giỏ hàng cố định.

Nút "Back to top"Có thể đè

Nút trông thế nào: Nút mũi tên tròn nhỏ ở gần góc dưới của trang.

Dời hoặc ẩn trong app

• Tắt nút này trong cài đặt theme, hoặc nâng nó lên bằng đoạn CSS ở phần dành cho lập trình viên.

Judge.me (Floating Reviews Tab)Ít khi đè

Nút trông thế nào: Thẻ dọc ở cạnh trái hoặc phải màn hình (không phải đáy). Có thể bật cho mobile.

Hướng dẫn của hãng: Judge.me: Floating Reviews Tab

Dời hoặc ẩn trong app

• Ẩn trên mobile: trong app Judge.me Reviews vào Settings > Widgets > Floating Reviews Tab.
• Ở Display properties, tick “Hide widget on mobile and tablet devices” rồi bấm Save.
• Đổi vị trí: trong Shopify admin vào Online Store > Themes, bấm Edit theme và mở biểu tượng App embeds (biểu tượng thứ ba ở menu trái).
• Mở app embed “Floating tab”, đặt Position là Left, Right hoặc Bottom rồi bấm Save. Chọn Left hoặc Right để thẻ tránh xa Tab Bar.

Ẩn nút bằng CSS

Dán vào Global CSS (bước Configure). Chỉ áp dụng trên điện thoại.

@media (max-width: 768px) {
  .jdgm-revs-tab-btn { display: none !important; }
}

Nguồn: 1

Floating Button của Navi+Có thể đè

Nút trông thế nào: Floating Button của Navi+, do bạn đặt trong app.

Dời hoặc ẩn trong app

• Mở menu Floating Button và tăng khoảng cách đáy để nó nằm trên Tab Bar.