Apply z-index to Shopify Chat icon

Shopify Apps

Topic summary

A user needed to adjust the z-index of the Shopify Chat icon so it would appear behind other site elements like the cart drawer and mobile menu.

Initial Solution Attempt:

  • Another user suggested adding CSS targeting #shopify-chat with z-index: 2 !important; via the theme’s CSS file
  • This approach didn’t work when applied through the custom CSS tab in theme settings

Working Solution:
The original poster resolved the issue by targeting .needsclick class instead:

.needsclick {
  z-index: 2 !important;
}

This successfully hid the chat icon and other buttons beneath active elements. A corrected selector (#ShopifyChat with capital ‘S’ and ‘C’) was also suggested. The issue is now resolved, with an additional tutorial resource shared for managing z-index across Shopify elements.

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

Hi! I’m trying to hide the Shopify Chat icon under other active elements on the site (like cart drawer or mobile menu). I’ve managed to do this on chrome’s developer mode but can’t find a .style to apply. Pls help. I just need z-index: 2; to be applied to the chat.

Screenshot 2024-05-17 at 20.08.04.jpg
Screenshot 2024-05-17 at 20.08.04.jpg3446×490 256 KB

2

Hi! To hide the Shopify Chat icon under other elements, add this CSS to your theme:

  1. Go to Online Store > Themes > Actions > Edit Code.
  2. Open your theme.css or theme.scss.liquid file in the Assets folder.
  3. Add the following code:
#shopify-chat {
    z-index: 2 !important;
}
​

Save the changes and refresh your site This will apply the z-index to the chat icon

3

Doesn’t work. Applied the code in custom css tab in theme settings.

Screenshot 2024-05-17 at 21.32.22.jpg
Screenshot 2024-05-17 at 21.32.22.jpg1368×1276 62.9 KB

4 
.needsclick {
  z-index: 2 !important;
}

This worked

5

My bad I didn’t read your console screenshot
Do this instead

#ShopifyChat {
    z-index: 2 !important;
}
6

Yeah that’s better! I ended up hiding few more buttons by my code with .needsclick style =D Thank you!

1 Like
7

You’re welcome

8

Hey! :waving_hand: I’ve actually covered this exact issue in one of my tutorials — it shows how you can control and manage z-index for Shopify elements (like chat icons, drawers, and popups) directly in Shopify Liquid for a cleaner, faster checkout experience.

You can check out the full step-by-step guide here Want a FAST Checkout? Fix Your Shopify Chat Position NOW

It’ll help you fix the z-index properly so the chat icon stays behind other active elements like the cart drawer or mobile menu. Hope it helps! :rocket: