Hide the shopify chat inbox when cart side bar is open

Store Design
, ,

Topic summary

A user seeks to hide Shopify’s chat inbox widget when the cart sidebar is open, as it currently overlaps and obstructs the cart contents.

Solution Provided:

  • Use CSS to either layer the cart drawer above the chat widget or hide the chat completely when the drawer is open
  • Recommended placement: Theme Settings → Custom CSS (rather than editing theme code directly)
  • This approach preserves customizations during theme updates

CSS Code:

body:has(cart-drawer[open]) #shopify-chat {
  display: none;
}

The original poster confirmed the solution worked. Another user later encountered the same issue and asked for implementation guidance.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hey folks,

Could you please help me hide the shopify chat inbox when cart side bar is open?

Right now it’s like the below;

cardboardhouse_0-1747753047336.png
cardboardhouse_0-1747753047336.png556×993 106 KB

Thanks a lot

1 Like
2

Sure, thanks it’s

https://www.cardboardhouse.store/
CBH25

3

The code by @Markit-Themes would work, but I’d rather use Customize:Theme Settings=> “Custom CSS” instead of editing theme code – this will help when it’s time to update your theme to a new version.

Automatic update does not carry code edits over to new theme, but it does transfer theme settings.

That code makes cart drawer open on top of chat widget so that it does not obscure cart contents.

Another option is to hide chat widget completely when card drawer is open:

body:has(cart-drawer[open]) #shopify-chat {
  display: none;
}
1 Like
4

Perfect. |Thanks Tim

5

Same problem here. Button getting in the way when customer trying to work with cart. Can you tell me where this code should go? Thanks.