Fix floating buttons covering the Tab Bar

1. Let Navi+ handle it

When to use it: Your app is on the short list Navi+ already knows (Tidio, Gorgias, PushOwl). Nothing to set up.

1. Show the Tab Bar on mobile as usual (Configure step → Display on mobile).
2. Open your store on a phone. If the chat bubble or bell sits on the Tab Bar, Navi+ lifts it about 12px above the bar by itself.
3. While a Navi+ menu or popup is open, Navi+ hides that widget and shows it again when the menu closes.
4. If the Tab Bar hides on scroll, the widget goes back to its normal place at the same time.
5. Your app is not on that list? Use one of the ways below.

2. Put the app into the Tab Bar

When to use it: Best for chat, WhatsApp, Messenger and sign-up forms. The tab opens the app, so its floating button is no longer needed.

1. Open your Tab Bar (Build Menu step) and click Item under Menu items to open the Add item popup. Pick a type (Links & icons, or Page & app actions for step 3), then name the item (for example “Chat”) and pick an icon.
2. In the item’s Link, open the Library and choose Open other applications. Pick Open Chatbox (FAB) for Shopify Inbox or the Klaviyo form, or paste a link such as https://wa.me/ for WhatsApp.
3. Other app with its own button? Under Page & app actions choose Simulate action and use open:clickTo(selector) with the selector of the app’s floating button. Add Down or Up to scroll first, for example open:clickTo(selector, Down).
4. Hide the app’s own floating button (see the next ways) so only the tab remains.
5. Save and test on a phone.

3. Move or hide the button in the app's own settings

When to use it: The simplest fix when the app has a position, offset or mobile option. You change one setting and the button stops covering the Tab Bar.

1. Open the app’s admin from Shopify admin → Apps.
2. Look for Appearance, Widget, Launcher or Position settings.
3. Move the button to the opposite side, or raise its bottom space (offset) by the height of your Tab Bar plus about 12px. Measure the bar on a phone; it is usually 60 to 80px.
4. Or turn the button off on mobile, if the app allows it, and open the app from a Tab Bar item instead.
5. Save in the app, then reload your store on a phone. Each app’s own steps are listed under the app below.

4. Lift the button above the Tab Bar with CSS

When to use it: The app has no position setting, or you cannot reach it. This moves the button up on phones only.

1. Find the CSS selector of the floating button (right-click it in Chrome → Inspect). Many apps are listed below with the selector already measured.
2. Open your Tab Bar, go to the Configure step and scroll to Global CSS. Use Global CSS, not Custom CSS for this menu: the menu CSS only reaches the menu itself, so it cannot move another app’s button.
3. Paste the CSS below and replace the selector. Change 80px to your Tab Bar height plus about 12px.
4. Save and reload on a phone. If the button does not move, add !important or use the selector of its outer wrapper.

Paste into Global CSS (Configure step). It only applies on phones.

/* 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. Hide the button on phones with CSS

When to use it: You moved the app into the Tab Bar (way 2) and want its own button gone on phones.

1. Open the Configure step and scroll to Global CSS.
2. Paste the CSS below and replace the selector with the app’s floating button.
3. Use opacity:0 with pointer-events:none instead of display:none if a Tab Bar item uses open:clickTo, because clickTo still needs the button to exist.
4. Do not hide cookie banners or accessibility buttons this way. Move them instead.

Paste into Global CSS (Configure step). It only applies on phones.

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

6. Hide the Tab Bar on pages that have their own bottom bar

When to use it: A product page with a sticky Add to cart bar, or a page with a cart bar. Two bars at the bottom fight for the same space.

1. Open the Tab Bar, go to the Configure step and scroll to Visibility Rules.
2. In Visibility Rules, open the page rule (Show only on specific page types, or match a keyword in the current page URL).
3. Leave Products unchecked, or pick the pages where the Tab Bar should show. Leaving all unchecked shows it on every page.
4. Save and open a product page on a phone to check.
5. Visibility Rules are part of the paid plans. See Who sees the menu for the full list of options.

7. Hide the Tab Bar while scrolling down

When to use it: The button is only in the way while the shopper reads. The bar slides away and the widget has the space back.

1. Open the Tab Bar, go to the Configure step and find Display on mobile.
2. Turn on Hide when scrolling down on Mobile screen.
3. Save and scroll a page on a phone. The bar hides when scrolling down and returns when scrolling up.
4. Navi+ does not reserve space at the bottom of the page when this option is on, because the bar is not always visible.

8. Give the Tab Bar room with the outer margin

When to use it: You want a floating Tab Bar that leaves a visible gap at the bottom so a small button can sit beside it.

1. Open the Tab Bar and go to the Design step, then the Main menu tab.
2. Under Container spacing, find Inner/outer spacing and change Margin (the outer spacing of the whole menu). Do not use Each item spacing → Margin (px): that one is for single items.

3. Use the Mobile

   Desktop syntax for separate values, for example 8

   24 means 8px on mobile and 24px on desktop.

4. Check the result on a phone. This moves the Tab Bar, not the other app’s button.

9. Ask Navi+ to fix it

When to use it: You tried the ways above and the button still covers the Tab Bar, or you do not want to touch code.

1. Open the chat in the Navi+ app, or email the support team.
2. Send your store link and the name of the app that covers the Tab Bar. A screenshot from a phone helps.
3. Navi+ Care customers can also ask the team to set up the Tab Bar item or the CSS for them.

Shopify InboxOften covers the Tab Bar

What the button looks like: A "Chat" pill, about 87×47px, in the bottom-right corner, 20px from the bottom edge. That is exactly where the Tab Bar sits. It opens a chat window about 382×675px.

The app's own guide: Shopify Help Center: Inbox chat settings

Put it in the Tab Bar

1. In the Tab Bar menu, choose Add item and name it “Chat”. Pick a chat icon.
2. In Link, open Library → Open other applications and pick Open Chatbox (FAB), or type open:Inbox.
3. Save. Navi+ hides the Inbox bubble and opens the chat when the item is tapped.
4. Want the bubble to stay? Use open:InboxWithoutReplace instead.

Move or hide it in the app

• In Shopify admin, go to Online Store and click Edit theme next to your theme.
• Select App embeds, then Online store chat.
• In the Widget section, make sure Style is Button. Pick an Icon and Label.
• Set Horizontal Position and Vertical Position (raise Vertical Position above the Tab Bar), then click Save.
• Shopify’s page does not describe hiding the button on mobile. Use the Tab Bar item with open:Inbox, which hides the bubble for you.

For developers

Run for real. 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.

Sources: 1 2

TidioOften covers the Tab Bar

What the button looks like: A round chat bubble of about 60px in the bottom-right corner, with a small teaser message that can pop up next to it. Shown on phones.

The app's own guide: Tidio: widget position and visibility

Navi+ handles it

Navi+ lifts the Tidio bubble above the Tab Bar on phones by itself. Nothing to do.

Move or hide it in the app

• Go to Settings > Live Chat > Appearance and open the Visibility and position section.
• Pick the Desktop or Mobile tab (they are set separately) and choose left or right under the widget position.
• To hide on mobile: on the Mobile tab turn off the Display toggle.
• A bottom offset has no field in the admin. Tidio’s Widget Position article gives a script to add before the closing </body> tag, using #tidio { bottom: 50px !important; } inside a max-width media query. Navi+ already lifts Tidio above the Tab Bar by itself.

Hide the button with CSS

Paste into Global CSS (Configure step). It only applies on phones.

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

For developers

From the app's docs, not run by us. From Tidio’s docs, not run by us. Call after the tidioChat-ready event. hide() hides the whole widget, so call show() before open().

Sources: 1 2 3

GorgiasMay cover it

What the button looks like: A chat button of 70×64px in the bottom-right corner, about 90px above the bottom on a 390×844 phone. On mobile the chat opens full screen.

The app's own guide: Gorgias: Chat visibility

Navi+ handles it

Navi+ lifts the Gorgias chat button above the Tab Bar on phones by itself. Nothing to do.

Move or hide it in the app

• Hide on mobile: click the Settings icon at the bottom-left of the helpdesk, open Channels, choose Chat, then pick your chat integration.
• Open the Preferences tab, scroll to “Where chat appears”, turn off “Show on mobile” and click Save in the top-right.
• Move the launcher: open the same chat integration, go to the Appearance tab and scroll to “Launcher position”.
• Use the Position dropdown (Bottom right is the default, or Bottom left, Top right, Top left). For fine tuning, type pixel values in “Move horizontally” and “Move vertically” and check the preview, then Save.

Hide the button with CSS

Paste into Global CSS (Configure step). It only applies on phones.

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

For developers

Run for real. 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.

Sources: 1 2 3

ZendeskOften covers the Tab Bar

What the button looks like: A chat bubble in the bottom-right corner. It also shows on phones.

The app's own guide: Zendesk: Advanced customization of the Web Widget (Classic)

Move or hide it in the app

• In the Web Widget (Classic) snippet, set position to top-left, top-right, bottom-left or bottom-right.
• Add offset (for example offset: { horizontal: ‘0px’, vertical: ‘80px’ }) to move it from that corner. Zendesk’s page says this works for desktop or mobile.
• This page is for the Classic widget. The messaging widget uses other settings; the page found does not cover hiding it on mobile.

For developers

From the app's docs, not run by us. 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.

Sources: 1 2 3

IntercomOften covers the Tab Bar

What the button looks like: A round launcher of about 48 to 60px in the bottom-right corner. It shows on phones.

The app's own guide: Intercom: Messenger customization (developer docs)

Move or hide it in the app

• Intercom sets the launcher position in code. In your Intercom settings object (window.intercomSettings or Intercom(‘boot’, {…})) set alignment to ‘left’ or ‘right’, and vertical_padding to raise the launcher above the Tab Bar.
• Intercom’s page does not say whether these options apply to phones, so test on a phone. Ask your developer, or use the CSS way below.

Hide the button with CSS

Paste into Global CSS (Configure step). It only applies on phones.

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

For developers

From the app's docs, not run by us. 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.

Sources: 1 2 3

CrispOften covers the Tab Bar

What the button looks like: A chat bubble in the bottom-right corner, shown on phones.

The app's own guide: Crisp: How to hide the chat on mobile

Move or hide it in the app

• To hide on mobile: Settings > Chatbox Settings > Chatbox Behavior, turn on “Hide chatbox on mobile devices” (it saves automatically).
• To move it to the left: Settings > Chatbox Settings > Chatbox Appearance, turn on “Reverse the position of the chatbox (Show on the left)”.
• Once “Hide chatbox on mobile devices” is on, Crisp’s JavaScript SDK cannot force-show the chatbox on mobile.

For developers

From the app's docs, not run by us. From Crisp’s docs, not run by us. Use chat:show to bring it back.

Sources: 1 2 3

Tawk.toOften covers the Tab Bar

What the button looks like: A chat bubble in the bottom-right corner by default, shown on phones.

The app's own guide: tawk.to: Changing the widget position

Move or hide it in the app

• Sign in to the tawk.to dashboard and select the property.
• Click Administration, then Chat Widget in the left submenu.
• Under Widget Appearance click Advanced. Find “Desktop and Mobile Widget Position”, choose a position (Bottom Right is the default) and Save.
• To hide on mobile only: Administration > Chat Widget > Availability Restriction > Platform Restriction > Configure. Turn on Platform Restriction, choose “HIDE widget only from visitors on the following platforms”, tick Mobile, leave Desktop unticked, then Save.

For developers

From the app's docs, not run by us. 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.

Sources: 1 2 3

RichpanelMay cover it

What the button looks like: A chat launcher near the bottom. On one store we measured, the launcher did not appear on mobile until the widget loaded.

The app's own guide: Richpanel: Configuring widget position and visibility

Move or hide it in the app

• In the widget settings, find “Widget Icon Position” and choose left or right.
• Set the spacing from the side and bottom of the page in pixels (the page does not name these fields). Raise the bottom spacing above the Tab Bar.
• Under “Visibility Settings”, turn on “Hide Widget on Mobile Website” to hide it on mobile.

For developers

Run for real. Changing the URL hash opens the chat; tested on ridgewallet.com (iframe opened full screen). Richpanel has no API to hide the launcher.

Sources: 1 2

Help Scout BeaconMay cover it

What the button looks like: A round Beacon button in the bottom-right corner, shown on phones.

The app's own guide: Help Scout: Advanced Beacon customization

Move or hide it in the app

• Beacon is set in code. Add Beacon(‘config’, { hideFABOnMobile: true }) to hide the Beacon on phones.
• Use Beacon(‘config’, { hideFABLabelOnMobile: true }) to hide only the text label on phones.
• The older Beacon 1.0 developer docs also list position: ‘left’ (default ‘right’). Ask your developer to add the code.

For developers

From the app's docs, not run by us. From Help Scout’s Beacon docs, not run by us. Beacon(‘destroy’) removes it entirely.

Sources: 1 2

HubSpot ChatOften covers the Tab Bar

What the button looks like: A chat bubble in the bottom-right corner.

The app's own guide: HubSpot: Connect and customize a chat channel

Move or hide it in the app

• Click the settings icon in the top navigation bar.
• In the left sidebar go to Inbox & Help Desk > Inboxes (use the “Current view” dropdown if you have several inboxes).
• Hover over the chat channel, click Edit, then click “Web chat” in the left sidebar.
• In “Chat widget placement” choose Left or Right. You can also turn on “Chat widget movement” so visitors can drag the widget.
• HubSpot’s page has no setting to hide the widget on mobile only.

For developers

From the app's docs, not run by us. From HubSpot’s developer docs; we did not run it in this survey. Wait for HubSpotConversations to load first.

Sources: 1

FreshchatOften covers the Tab Bar

What the button looks like: A chat bubble in the bottom-right corner.

The app's own guide: Freshworks: Change the position of the Freshchat widget

Move or hide it in the app

• Go to Admin Settings > Channels > Web Chat and select the widget.
• Open Appearance and scroll to the “Position and behavior” section.
• Set “Widget Position” to Bottom-left or Bottom-right and save. Freshchat’s page lists no bottom offset and no mobile-only switch.

For developers

From the app's docs, not run by us. From Freshworks’ docs as we know them; not run by us. fcWidget.show() brings it back.

Sources: 1

LiveChatOften covers the Tab Bar

What the button looks like: A chat bubble in the bottom-right corner.

The app's own guide: LiveChat: Chat widget visibility

Move or hide it in the app

• Open Settings > Chat Window > Customization and click Position to choose the widget position, then Save changes.
• To hide on mobile: Settings > Chat Window > Customization > “Mobile Chat widget”, choose “Custom for mobile devices”, scroll down, turn off “Show chat widget on mobile” and Save changes.

For developers

From the app's docs, not run by us. From LiveChat’s JavaScript API docs, not run by us.

Sources: 1 2

GladlyMay cover it

What the button looks like: A launcher in the bottom-right corner. It was hidden on mobile when we scanned.

The app's own guide: Gladly: Create and configure Chat

Move or hide it in the app

• Go to Style > Placement and choose left or right for where Chat appears.
• Use Z-Index in the same Placement section to set the stack order of the minimized Chat icon.
• Gladly’s page lists no bottom offset and no switch to hide on mobile.

Sources: 1

WhatsApp buttonOften covers the Tab Bar

What the button looks like: A floating WhatsApp button, usually a green circle in a bottom corner.

Put it in the Tab Bar

1. In the Tab Bar menu, choose Add item and name it “WhatsApp”. Pick a WhatsApp icon.
2. In Link, type https://wa.me/<phone number>. Use the full international number, digits only (no + or spaces).
3. Turn off the floating WhatsApp button in the app that adds it (Elfsight, Dondy, Musbu and similar).
4. Save and tap the item on a phone to check it opens WhatsApp.

Move or hide it in the app

• Open the app that adds the WhatsApp button (for example Elfsight, Dondy, Musbu).
• Turn the floating button off, or change its position or hide it on mobile.

Sources: 1

ChatyOften covers the Tab Bar

What the button looks like: A floating channel button in the bottom-right or bottom-left corner, shown on phones. The side depends on its settings.

Put it in the Tab Bar

1. Add a Tab Bar item with the link https://wa.me/<phone number> (full international number, digits only).
2. In Chaty, turn the floating widget off, or hide it on mobile.

Move or hide it in the app

• In Chaty, open the widget settings and change the position, or hide it on mobile.

Sources: 1

Facebook Messenger (customer chat)May cover it

What the button looks like: A floating Messenger button at the bottom. Meta is retiring this old plugin.

Put it in the Tab Bar

1. Add a Tab Bar item named “Messenger” with the link https://m.me/<page name> (your Facebook page username).
2. Meta has retired the Messenger customer chat plugin. If the bubble is already gone from your store, you only need the Tab Bar item.

Hide the button with CSS

Paste into Global CSS (Configure step). It only applies on phones.

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

Klaviyo (teaser / popup)May cover it

What the button looks like: A teaser bar of about 354×50px at the very bottom edge of the screen (we measured no gap below it).

The app's own guide: Klaviyo: How to optimize popup and flyout forms for mobile

Put it in the Tab Bar

1. In the Tab Bar menu, choose Add item and name it “Sign up” (or “Offers”).
2. In Link, open Library → Open other applications → Open Klaviyo form, or type open:Klaviyo. It follows the form Klaviyo is already running.
3. To open one specific popup or flyout form, type open:Klaviyo(FORM_ID). In Klaviyo, that form needs Display timing set to a custom trigger.
4. Save. Klaviyo’s floating teaser is hidden automatically while the menu has this item.

Move or hide it in the app

• In Klaviyo, open the form and click Edit styles to open the Styles panel.
• Choose “Mobile flyout position” and pick “Dock to bottom” or “Dock to top”. Pick top if the bottom is taken by the Tab Bar.
• For the teaser, set its display option to “Show after form is closed” or “Show before displaying form and after form is closed”.
• Klaviyo’s page does not describe a teaser position or a switch to hide only the teaser on mobile. Use the Tab Bar item (open:Klaviyo) to replace it.

Hide the button with CSS

Paste into Global CSS (Configure step). It only applies on phones.

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

For developers

From the app's docs, not run by us. 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.

Sources: 1 2

PrivyMay cover it

What the button looks like: A popup or a small tab that opens a form, depending on the campaign.

The app's own guide: Privy: Manage display tabs

Move or hide it in the app

• In the Privy editor, click Tab in the Display Steps panel. If the display has no tab yet, click Add Tab.
• Use the controls on the right side of the screen to choose which devices show the tab (turn it off for mobile) and to set the tab’s position.
• The page is old and does not list the exact choices, so check the labels in your editor.

Sources: 1 2

AttentiveMay cover it

What the button looks like: A full-screen sign-up popup, plus a small teaser tab at the edge or bottom of the screen.

Move or hide it in the app

• In Attentive, open the sign-up unit’s display settings and check the teaser position and frequency.

OmnisendMay cover it

What the button looks like: A sign-up popup or a small teaser, depending on the form you set up.

The app's own guide: Omnisend: Add a teaser to your signup forms

Move or hide it in the app

• Go to Forms and open your popup form.
• In the bottom menu click the + icon and select Teaser.
• In the settings panel open the Style tab.
• Under Style Settings, find Position and choose where the teaser floats (for example center-left instead of bottom-left).
• Click Update live form (or Enable form if it is not live yet) in the top-right.

Sources: 1 2

"Someone just bought" popupOften covers the Tab Bar

What the button looks like: A small notification card near the bottom of the screen.

Move or hide it in the app

• In the app that shows the popup (Fomo, Sales Pop and similar), set its position to top, or turn it off on mobile.

Free shipping / announcement bar at the bottomOften covers the Tab Bar

What the button looks like: A full-width bar at the bottom or top, for example a free shipping notice.

Move or hide it in the app

• In the app or theme settings, move the bar to the top of the page.

PushOwl (notification bell)May cover it

What the button looks like: A small bell near the bottom corner of the screen, fixed on top of the page.

Navi+ handles it

Navi+ lifts the PushOwl bell above the Tab Bar on phones by itself. Nothing to do.

Smile (Rewards)Often covers the Tab Bar

What the button looks like: A round or pill launcher in a bottom corner, left or right. You can turn it on or off for mobile.

The app's own guide: Smile.io: Change launcher placement

Move or hide it in the app

• In Smile Admin go to On-site content and select Launcher.
• Pick the left or right side of your site.
• Open the Spacing menu to set the side and bottom spacing of the launcher. Raise the bottom spacing above the Tab Bar.
• Select the Desktop or Mobile tab to set each device, then click Save.
• To hide on mobile: On-site content > Launcher > Device visibility card, choose Desktop, then Save (Smile’s “Show or hide the loyalty launcher” article).

For developers

Run for real. openPanel() verified on poshbaby.com (full-screen panel opens). No JS call to hide the launcher: use the Launcher visibility setting.

Sources: 1 2 3

Rivo (Rewards)May cover it

What the button looks like: A floating rewards widget in a bottom corner.

The app's own guide: Rivo: Customizing the widget button and screen position

Move or hide it in the app

• Go to On-Site Displays > Floating Widget > Widget Button.
• Choose the side of the screen, left or right.
• Set the side padding (distance from the edge) and the bottom padding (distance from the bottom). Raise the bottom padding above the Tab Bar.
• Mobile and desktop are separate: select mobile at the top of the page to change the mobile placement. Click Save.
• To hide on mobile: go to On-Site Displays > Floating Widget > Visibility Settings, turn on “Hide widget launcher button on mobile” and click Save.

For developers

From the app's docs, not run by us. 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.

Sources: 1 2

LoyaltyLionMay cover it

What the button looks like: A launcher in a bottom corner that opens a rewards panel. On one store we measured, it did not show on mobile.

The app's own guide: LoyaltyLion: Loyalty pop-up and widget

Move or hide it in the app

• In LoyaltyLion open Display > Store components.
• On the “Loyalty widget” card click Customize and open the “Global” tab.
• Under “Position on your site” choose Left or Right (the article suggests the side opposite a chat widget), then Save Changes.
• To hide it, on the same Global tab under Visibility clear “Show UI” and Save Changes. The page does not mention a mobile-only switch.

For developers

From the app's docs, not run by us. 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).

Sources: 1 2

Yotpo Loyalty (Swell)May cover it

What the button looks like: A launcher or tab in a bottom corner. Yotpo shows up on 14 of the 80 stores we scanned, so it is common.

In Yotpo Loyalty, customize the launcher so it does not cover the Tab Bar.

Sources: 1

Joy LoyaltyMay cover it

What the button looks like: A launcher in a bottom corner.

In Joy settings, move the launcher up or hide it on mobile.

For developers

From the app's docs, not run by us. From Joy’s developer docs, not run by us. Joy can also open from a deep link: add #joy-open to the URL.

Sources: 1 2

Seal / Sway (Rewards)Often covers the Tab Bar

What the button looks like: A pill of about 120×50px in the bottom-left corner, 16px above the bottom edge.

Put it in the Tab Bar

1. In the Tab Bar menu, choose Add item and name it “Rewards”.
2. In Link, type open:clickTo(#seal-loyalty-main-button) for Seal, or open:clickTo(#sway-launcher-btn) for Sway. Navi+ taps the app’s own button for the visitor.
3. Hide the floating button with the CSS below (it keeps the button in the page so the tap still works). Do not remove it in the app.
4. Save and test the item on a phone.

Move or hide it in the app

• In the app settings, move the button up or hide it on mobile.

Hide the button with CSS

Paste into Global CSS (Configure step). It only applies on phones.

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

Stamped (Rewards launcher)Rarely covers it

What the button looks like: A widget inside the page or a floating tab, depending on setup.

The app's own guide: Stamped: Loyalty & Rewards launcher

Move or hide it in the app

• Loyalty 2.0: go to Display > Launcher > Settings/Branding and find Placement. Loyalty Classic: go to Settings > Widgets > Launcher and find Placement.
• Set Position to Left or Right (default Left).
• Set Visibility: All devices (default), Desktop only (hides it on mobile) or Hide on all devices.
• Set “Launcher position bottom offset” in px (default 30px). Raise it above the Tab Bar. “Launcher position left offset” moves it from the side.

Sources: 1

Theme "Add to cart" bar (product pages)Often covers the Tab Bar

What the button looks like: A full-width bar at the bottom of product pages with an Add to cart button. Many themes and apps add one.

Move or hide it in the app

• In the Theme editor, open a product page and turn off the sticky add-to-cart bar (the setting name differs by theme).
• Or keep it and hide the Tab Bar on product pages with Display rules.

accessiBeMay cover it

What the button looks like: A small round accessibility icon in a bottom corner. It can be hidden on mobile in its settings.

The app's own guide: accessiBe: change the location of the accessibility button (The app's own guide (we could not open it automatically; the site blocks checkers))

Move or hide it in the app

• Keep this button on: it is an accessibility tool.
• In accessiBe, increase the mobile bottom offset of the trigger so it sits above the Tab Bar.

For developers

From the app's docs, not run by us. 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.

Sources: 1 2 3

UserWayMay cover it

What the button looks like: A small round accessibility button at the bottom left or right. We measured its wrapper at about 13px from the left, 831px from the top on a 844px screen.

The app's own guide: UserWay: Change the widget icon position in the dashboard

Move or hide it in the app

• Log in at manage.userway.org.
• In the left menu click My Sites, choose your site and open the Customize tab.
• Under the “Button Location Desktop” tab pick a placement, then switch to “Button Location Mobile” and pick a placement for phones.
• Optionally turn on “Enable exact button positioning” and set the horizontal and vertical offsets (each 5 to 500 px), then Save. Raise the vertical offset above the Tab Bar.

For developers

From the app's docs, not run by us. 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.

Sources: 1 2

UsableNet (A42)Often covers the Tab Bar

What the button looks like: A round button of about 48px in the bottom-right corner, right at the bottom edge (776 to 824px on an 844px screen).

Move or hide it in the app

• Keep this button on: it is an accessibility tool.
• Add this to the Global CSS, and change 80px to match your Tab Bar height: @media (max-width: 768px) { #usntA42Toggle { bottom: 80px !important; } }

OneTrustOften covers the Tab Bar

What the button looks like: A cookie banner across the full width at the bottom, about 287 to 290px tall on a 390px phone. A small button reopens the preferences.

Move or hide it in the app

• The banner disappears once the visitor answers, so the overlap is short. Do not hide it with CSS: it is a legal notice.
• To reduce it, edit the banner template in OneTrust and pick the floating (corner) layout.

For developers

From the app's docs, not run by us. 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.

CookiebotOften covers the Tab Bar

What the button looks like: A dialog in the middle or at the bottom of the screen.

The app's own guide: Cookiebot: The Cookiebot CMP widget (The app's own guide (we could not open it automatically; the site blocks checkers))

Move or hide it in the app

• The banner disappears once the visitor answers. Do not hide it with CSS: it is a legal notice.
• To reduce it, change the banner type or position in Cookiebot.

For developers

Run for real. renew() verified on taylorstitch.com (dialog opened, 374 x 474 px). Use it to let visitors reopen their consent choices.

Sources: 1

Pandectes GDPROften covers the Tab Bar

What the button looks like: A full-width cookie banner at the bottom, plus a small floating button to change the choice later.

The app's own guide: Pandectes: enable and customize the consent widget

Move or hide it in the app

• In Shopify admin go to Apps and open Pandectes GDPR Compliance.
• Open Cookie banner, then the Layout tab.
• Under Consent dialogs, turn on the Consent widget toggle.
• In the Consent widget card, choose the Position, then Save. Pandectes does not list a switch to hide the widget on mobile only.

For developers

From the app's docs, not run by us. 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.

Sources: 1 2

Shopify Customer Privacy bannerOften covers the Tab Bar

What the button looks like: A banner at the bottom of the screen, built into Shopify.

Move or hide it in the app

• The banner disappears once the visitor answers. Do not hide it with CSS: it is a legal notice.
• To change it, open Shopify admin → Settings → Customer privacy.

For developers

From the app's docs, not run by us. From Shopify’s Customer Privacy docs (written for Hydrogen); not tested on Liquid themes.

Sources: 1

Theme built-in bottom barOften covers the Tab Bar

What the button looks like: A full-width bar or dock at the very bottom. 4 of the 80 stores we scanned have one.

Move or hide it in the app

• In the Theme editor, find the theme’s own bottom or mobile bar and turn it off (the name differs by theme). The Tab Bar replaces it.
• Seen on 4 of 80 surveyed stores, for example a mobile dock or a fixed cart summary bar.

"Back to top" buttonMay cover it

What the button looks like: A small round arrow button near the bottom corner of the page.

Move or hide it in the app

• Turn the button off in the theme settings, or lift it with the CSS in the developer section.

Judge.me (Floating Reviews Tab)Rarely covers it

What the button looks like: A vertical tab on the left or right edge of the screen (not the bottom). It can be turned on for mobile.

The app's own guide: Judge.me: Floating Reviews Tab

Move or hide it in the app

• Hide on mobile: in the Judge.me Reviews app go to Settings > Widgets > Floating Reviews Tab.
• In Display properties, tick “Hide widget on mobile and tablet devices” and click Save.
• Change position: in Shopify admin go to Online Store > Themes, click Edit theme and open the App embeds icon (third icon in the left menu).
• Open the “Floating tab” app embed, set Position to Left, Right or Bottom, then click Save. Left or Right keeps the tab away from the Tab Bar.

Hide the button with CSS

Paste into Global CSS (Configure step). It only applies on phones.

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

Sources: 1

Navi+ Floating ButtonMay cover it

What the button looks like: A Navi+ Floating Button, set by you in the app.

Move or hide it in the app

• Open the Floating Button menu and increase its bottom spacing so it sits above the Tab Bar.