How Do I Stop the Chat Button Covering My Add-to-Cart Button?
Move the chat button to the other corner, hide it on the pages where it gets in the way, or place the chat inside the page instead of floating over it. Shopify Inbox lets you set the button’s horizontal and vertical position. AeroChat’s web chat can sit bottom right or bottom left, show only on the pages you choose or skip the pages you list, and mount inline in a spot you place on the page. Clashes with a specific theme’s sticky bar or cart drawer can still need a small theme fix.
Shopify behavior from Shopify’s help center: Customize Shopify Inbox chat settings and appearance and Apps in themes, both checked 11 November 2026.
Why it happens
This is one of the most common complaints on the Shopify Community. Merchants say the chat bubble sits on top of the sticky add-to-cart button on product pages, covers the checkout button in the cart, or stays on top of the cart drawer and mobile menu when they open. Some want the widget smaller, some want it moved to the left, and some want it hidden on the homepage or a landing page. Others find it loads early and slows the page, or that a CSS fix that used to hide it stopped working after a theme or app update.
The cause is simple. Floating widgets, sticky buy bars, review badges and cookie banners all compete for the same bottom corners of a phone screen. Each one is placed on its own, without knowing about the others.
What Shopify’s help center says
Per Shopify’s help center, checked 11 November 2026:
- Shopify Inbox offers two widget styles, Button and Message bar. Button is the default.
- With the Button style, you set its horizontal position and vertical position on your online store. The message bar sits centered at the bottom of the screen.
- Inbox has separate chat buttons you can add to specific pages.
- App embeds, the floating elements apps add to your theme, can be turned on or off in the theme editor under App embeds.
The usual fixes and their limits
- Move the button. The quickest fix. It only works if the other corner is free, which on mobile it often isn’t.
- Custom CSS. Merchants share snippets that resize, move or hide the widget. They can break when the app or theme updates, and some only move the button, not the chat window.
- Turn the app embed off. Removes the overlap and the chat with it.
- Ask the theme developer. The right fix for a specific sticky bar or drawer clash. It costs time or money for each theme change.
How to handle it with AeroChat
AeroChat’s web chat gives you three controls in its widget settings. You choose the corner, bottom right or bottom left. You set page rules: show on all pages, hide on the pages you list, or show only on the pages you list, such as everywhere except the cart and checkout. And you can switch from the floating button to inline mode, where the chat mounts inside a container you place on the page, such as a “Questions about this product?” block under the buy button. The chat that opens can then help the shopper decide and send them back to the add-to-cart button, with a link to the right size or color.
Customer: Is the Trail jacket warm enough for winter hiking? (example)
AeroChat: It’s made for temperatures around freezing with a base layer (example), so it suits cool winter days. For colder trips, the Summit parka is warmer. Which size do you usually wear?
Customer: Medium.
AeroChat: The Trail jacket in medium is in stock. Here it is, ready to add to your cart: [link]
On the page: the chat sits in a block under the product description, so the sticky add-to-cart bar stays clear.
Copy this into AeroChat
When a shopper asks a question on a product page, follow these steps.
- Answer from the product details and our knowledge base. Keep the answer short.
- If size or fit matters, ask their usual size and check stock for it in Shopify.
- If the item is in stock, send the product link for that size and color so they can add it to their cart.
- If it is out of stock, suggest up to two in-stock alternatives.
- If they ask about shipping, give our shipping times and costs from the knowledge base.
Never invent product details. Reply in the customer’s language.
Then set the widget position and page rules in AeroChat’s widget settings, and test on a phone with the cart drawer open.
What to connect
- Your Shopify store. Built in. Install AeroChat from the Shopify App Store and connect your store, so the chat answers from your products, stock and policies.
- The web chat widget settings. Pick the corner, the page rules, and floating or inline mode.
- Other channels, for shoppers who prefer them. The widget can show your WhatsApp and other connected channels, so shoppers continue where they like.
Questions
Can I hide the chat on the cart page only?
Yes. In AeroChat’s page rules, choose “hide on these pages” and add your cart page path.
Can the chat sit inside the product page instead of floating?
Yes. Inline mode mounts the chat in a container you place on the page, so nothing floats over your buttons.
Will this fix every theme clash?
Position, page rules and inline mode solve most of them. A theme with its own floating elements may still need a small theme change.
Does the chat replace Shopify Inbox?
It can. If you run both, turn off the Inbox app embed so two bubbles don’t compete for the same corner. See Shopify Inbox or a helpdesk.
Using a different system? If it has a public API, it connects to AeroChat the same way: describe what you want, paste in its key, and it runs.
Can’t find your tool? Message us in the chat on this page and we’ll tell you how it connects.
Keep chat on your store without blocking the buy button
Install AeroChat, set the widget corner and page rules, and check your product page on a phone.
7-day free trial.