How do I hide the Shopify Chat widget when my Klaviyo form is open?
my website is clubpickleco.com
Topic summary
A user needed to hide the Shopify Chat widget when a Klaviyo popup form is displayed on their site, as both elements were appearing simultaneously and creating a visual conflict.
Solution Provided:
Two community members offered CSS-based solutions:
- Add custom CSS code to the theme files (base.css, theme.css, or styles.css)
- The code uses a CSS selector to hide the Shopify Chat element when the Klaviyo popup is active
- Implementation requires accessing Shopify Admin → Online Store → Theme → Edit code
Outcome:
The original poster confirmed the solution worked successfully. The fix involves inserting specific CSS that targets the chat widget’s z-index when the Klaviyo form class is detected in the DOM.
you can place this code at bottom of theme.liquid see if it works.
Hi @talonwr ,
You can try this code by following these steps:
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file base.css , theme.css or styles.css
Step 3: Insert the below code at the bottom of the file → Save
body:has(.needsclick.kl-teaser-WwhdZB) inbox-online-store-chat#ShopifyChat {
z-index: 0 !important;
}
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it asa solution. Thank you 
This worked great thank you
1 Like
you are welcome !