The Add to Cart button behind the chat bubble

A product page has a sticky Add to Cart bar on mobile, which is the single most valuable pixel area on the whole store. A support chat launcher was pinned to the bottom right corner, on top of it. An email capture teaser did the same thing from the bottom left a moment later.

What we found

The instinct is to raise the bar above them. That does not work, and it is worth understanding why before anyone spends an afternoon on it.

Widgets like these set their stacking order inline, in JavaScript, at the maximum value a browser will accept. There is no number above it. Even if there were, raising the bar would be the wrong move: it deliberately sits below the cart drawer, so lifting it high enough to clear the chat bubble would put it over the top of the drawer instead, and you would have traded one covered button for another.

So the thing that has to move is the widget, not the bar. Which is fine, except neither widget offers a stable hook to move it by. The chat launcher’s container has a class you can target. The popup was harder: it renders as a single element that is a small teaser pill in one state and a full-screen overlay in the other, with randomly generated ids inside it that change on every load.

The way in was the difference between those two states. In teaser state the element carries an inline bottom offset. In overlay state it does not, because it uses a different positioning shorthand. So a selector that matches only elements with a bottom offset touches the pill and never the overlay, without depending on a single generated id.

What we did

Measured the bar at each breakpoint and offset both widgets upward by exactly that height, applied only while the bar is actually visible, so nothing moves on pages without one. Verified on the live page at phone and desktop widths: both clear the bar with their own designed gap intact.

What to take from it

This is a housekeeping check, not a build. Load your own product page on a phone, scroll until the sticky bar appears, and look at what is sitting on it. Chat, reviews prompts, email capture, cookie banners and loyalty widgets all claim the same corner and none of them know the others exist. Each one was fine on the day it was installed.

Where the widget has an offset setting of its own, use it, because that survives the vendor changing their markup. Where it doesn’t, a scoped rule in the theme does the job, and it is worth checking after every app update.