Technically, you should be able to set z-index on Shopify chat parent element and your cart drawer so that cart drawer opens on top of the chat, no matter what state it is.
Also – search first.
Literally – just my posts on the issue:
or
Topic summary
Goal: Hide the Shopify Inbox chat widget when the Motion theme’s cart drawer () is open.
Current approach: OP added a script (in theme.liquid, before ) that uses a MutationObserver to watch the cart-drawer’s open attribute and toggles chat elements’ display/visibility. Despite this, the chat still shows; OP suspects the widget may be inside an iframe.
Context provided: Theme = Motion by Archetype, Chat = Shopify Inbox (default), Cart type = drawer, Public URL not provided (placeholder only). Code snippets are central; they include minor typos (e.g., “docum ent” and “display: none” with a leading space) that could affect behavior.
Feedback:
- Practical workaround: reposition the chat button to the opposite screen side so it doesn’t overlap the drawer.
- Debugging requirement: share a publicly inspectable store URL to verify selectors, DOM structure, and loading timing.
- Alternative fix: raise the cart drawer’s z-index and/or adjust the chat container’s z-index so the drawer overlays the chat regardless of state; related threads were linked for reference.
Status: Unresolved. Next steps: provide the live URL; test z-index overlay approach; verify iframe involvement and correct typos/selectors in the script.