Shopify Chat Icon Gone Rogue? How to Hide or Disable the Inbox Button

Hey fellow store owners! Ever logged into your Shopify admin, made a quick change, and then noticed something unexpected pop up on your storefront? Or perhaps an old customization suddenly stopped working? You’re definitely not alone. I’ve seen this happen countless times, and it’s exactly what came up in a recent community discussion where our friend yonicque was grappling with a “rogue” Shopify chat icon.

Yonicque reached out because their trusty old CSS code, #shopify-chat { display: none !important; }, which used to hide the chat icon, had stopped working. The icon was back, front and center, on both mobile and desktop. This is a classic “Shopify update” scenario, where backend changes can sometimes break existing customizations.

Why Your Old Shopify Chat CSS Might Have Broken (and What Changed!)

Many community members chimed in with helpful advice, and the consensus quickly formed around a key insight shared by Ploqo: the Shopify Inbox chat button is now often added to your theme as an “app embed.” This is a crucial distinction! It means the chat icon isn’t necessarily living directly in your theme’s core code anymore like it used to, which explains why a simple CSS selector targeting an ID might fail.

As sonivragifford pointed out, Shopify likely changed how the chat widget is rendered. Instead of a simple HTML element with a specific ID, it's now often wrapped in a custom element or managed differently through app embeds. This is why targeting #shopify-chat no longer worked, but targeting the new shopify-chat element directly with CSS could still be effective.

The Easiest Fix: No Code Required (and Recommended for Most!)

If you don’t actually use Shopify Inbox for customer chat and just want that icon gone for good, this is by far the simplest and most effective method. Ploqo laid out these steps beautifully, and it leverages Shopify’s built-in theme customization tools.

Here’s how to do it:

1. Go to your Shopify Admin.
2. Navigate to Online Store > Themes.
3. On your active theme (e.g., “Motion” as in yonicque’s case), click the Customize button.
4. Once in the theme editor, look for the App embeds icon at the top left. It usually looks like a small plug or a stack of blocks.
5. In the “App embeds” sidebar, find Online store chat (by Inbox).
6. Toggle its switch off.
7. Click Save in the top right corner.

Voila! The chat icon should disappear instantly from both mobile and desktop. This method completely removes the chat feature if you’re not actively using Shopify Inbox. It’s clean, effective, and requires zero code!

The Code-Savvy Approach: Hiding with CSS

What if you do use Shopify Inbox, but you just don’t want the floating icon to appear all the time? Maybe you want to trigger it from a different button, or perhaps you just want it hidden for specific pages. In this case, hiding it with CSS is your best bet, as it keeps Inbox running in the background.

Based on the community’s findings, the new target for the chat icon is the shopify-chat element. Here’s how to add the CSS:

1. Go to your Shopify Admin.
2. Navigate to Online Store > Themes.
3. On your active theme, click Actions > Edit Code.
4. In the code editor, look for the Assets folder.
5. Find your main CSS file, often named something like styles.css, theme.css, or base.css. Click on it.
6. Scroll to the very bottom of the file and add the following code:

shopify-chat { display: none !important; }

Some community members, like devcoders, suggested a broader selector: #shopify-chat, shopify-chat, .shopify-chat { display: none !important; }. While the new shopify-chat element is the primary target, including the ID and class might catch any older or slightly different implementations across various themes, giving you a bit more robustness.

7. Click Save.

This CSS snippet effectively hides the chat icon on both desktop and mobile without disabling the underlying Inbox functionality. Just remember, if you’re not using Inbox at all, the “no code” app embed toggle is generally the cleaner solution.

It’s always fascinating to see how the Shopify platform evolves, isn’t it? While these updates sometimes mean adjusting our custom solutions, they often bring new features and better ways of doing things. And having a strong community to lean on, sharing insights and practical solutions, makes all the difference when you’re running your store. Whether you’re just starting your journey with Shopify or a seasoned veteran, tapping into these collective experiences is invaluable. Keep an eye on those app embeds, and don’t hesitate to dive into the theme customizer – it’s often where the simplest solutions hide!