I’m encountering an issue with the Shopify Inbox app widget and wanted to check if anyone else is experiencing this or found a clean solution.
Issue: On all devices (desktop and mobile) and orientations, the chat bubble icon is no longer remaining fixed in the bottom-right corner of the viewport. Instead, it seems to be trapped inside a relative parent container/stacking context, causing it to scroll away with the page content as you scroll down. (The chat window itself opens fine, it’s strictly a floating position issue).
Theme: Taiga (App Embed is active).
App: Shopify Inbox.
I’ve tested hiding top sections like the Hero Banner, but the widget continues to scroll with the main body wrapper. I’m unsure if a recent update to the Shopify Inbox app script changed how the iframe is injected, or if a recent theme layout update introduced a CSS container constraint (like overflow or transform).
Has anyone faced this issue recently or found a native fix/CSS override that keeps the Inbox iframe pinned to the viewport without breaking theme layout?
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
This is almost always a transform, filter, contain, or will-change on one of the widget’s parent containers — any of those creates a new containing block, which silently breaks position: fixed on Chromium and Safari. Cheapest way to find it in DevTools: select the chat bubble in Elements, then walk up the ancestor chain checking computed styles for those four properties — the first one you hit is the culprit. Once you find it, the fix is usually scoping that property off the widget’s direct parent rather than removing it site-wide (it’s often there for a scroll animation elsewhere on the page).
As mentioned by devcoders, we would need to debug the same issue on our end too and for that we would need to your store URL and front end password (if enabled).
Also, better if you have any screenshot or video recording to help us understand better. Either way share the store URL.
Hello @SergioCos, @ThemeMend nailed the cause - a transform/filter/contain/will-change on an ancestor is exactly what breaks position: fixed. Worth adding for Taiga specifically: that’s usually the scroll-reveal/fade-in wrapper the theme puts around sections for its entrance animations, so if DevTools points you there, check Theme settings > Animations first, disabling “reveal sections on scroll” often removes the transform storewide without you having to hunt down and edit the CSS yourself.
Concrete fallback if you’d rather keep animations on other sections: in Theme settings > Custom CSS, scope the override to just the offending wrapper instead of a sitewide toggle, e.g. .scroll-trigger { transform: none !important; } (swap in whatever class DevTools shows on that specific ancestor) - that undoes the containing block for the widget without touching animations elsewhere.
If this helped, please mark it a solution
I have re-enabled the Shopify Inbox app embed so you can inspect the live page and see both the positioning and opening issues. Thanks for taking a look!
Took a look at janoa.it — and I have to correct myself: there’s no transform/filter ancestor here at all, so the containing-block theory doesn’t apply to your store. The real cause is simpler and specific to Taiga.
The Inbox launcher is rendered inside a <shopify-chat> web component. Shopify’s own styles make that element the fixed frame the bubble hangs from: :host { position: fixed; inset: 0; display: grid; pointer-events: none }, with .activator-nudge positioned absolute inside it. Taiga 8.1’s reset.css has a global rule — :where(:not(iframe, canvas, img, svg, video, audio, dialog, use)) — that sets position, inset, height, display, pointer-events and z-index to unset/revert on every element on the page, and page CSS beats a component’s :host styles. Result: <shopify-chat> collapses to position: static; height: 0 at the very bottom of the document, and the bubble loses its fixed frame — which is also why it scrolls with the page and why opening it misbehaves.
That’s also why .activator-nudge { position: fixed !important } in theme.liquid can’t work: that element lives inside a shadow root, and page CSS can’t reach it. The fix has to go on the host element instead.
I tested the override below on your live page and the bubble stays pinned bottom-right through scrolling. One caveat: you also run Shopify Forms, and its <shopify-forms-embed> host is hit by the same reset — if it ever sits on top of the bubble, give it the same override with a slightly lower z-index. Nothing else in the theme needs touching. In Theme settings → Custom CSS, add:
Hello @ThemeMend and @SergioCos — great catch, that’s the actual root cause. Since Taiga’s reset hits any web-component host the same way, worth keeping this override handy for Shopify Forms or Search too if you add them later, just a lower z-index like ThemeMend said. Also worth flagging to Shopify as a Taiga bug, a reset that broad shouldn’t be able to override a native app’s fixed positioning. Nice work tracking it down.
I built and tested the followin. Tested on janoa.it, Taiga 8.1.0: the bubble stays put at every scroll position on desktop and mobile, and the chat window opens on screen.
Hi! Thank you so much for the deep dive and detailed explanation regarding Taiga’s reset.css — your diagnosis was 100% spot on!
I reached Woolman Theme Support with your technical insights. They confirmed that Shopify recently moved the Inbox widget to a newer web component system (which uses both <shopify-chat> and <shopify-agent>), causing this layout conflict with the theme’s reset styles.
The single shopify-chat rule wasn’t enough on its own because of the new <shopify-agent> tag. Woolman provided the complete official workaround until a permanent fix is released in a future theme update.
For anyone else facing this issue on Taiga 8.1, you can fix it by adding this snippet to Theme Settings → Custom CSS:
