Shopify Chat Icon Gone Rogue? How to Hide It (No Code & CSS Solutions)

Hey everyone! As a Shopify migration expert, I spend a lot of time digging through community forums, and I recently stumbled upon a really common, yet slightly tricky, issue that many store owners face: that pesky Shopify chat icon that sometimes just won't go away! It's one of those small things that can really impact your store's aesthetic and user experience if it's not where you want it to be.

Our friend yonicque from www.yonicque.com kicked off a discussion asking for help to hide the Shopify chat icon on both mobile and desktop. The problem? The old CSS tag, #shopify-chat, wasn't working anymore after a Shopify update. Sound familiar?

This is a classic example of how Shopify's continuous evolution, while great for features, can sometimes throw a wrench in our custom solutions. Luckily, the community came through with some fantastic insights and solutions, and I want to break them down for you.

Why Your Old CSS Might Not Be Working (The Shopify Inbox Factor)

Several community members, like sonivragifford and Ploqo, quickly pointed out that Shopify indeed changed how the chat widget is rendered. What used to be a standard element targeted by #shopify-chat is now often handled differently, especially if you're using Shopify Inbox.

Ploqo, in particular, did some excellent detective work, testing on a Motion theme store and discovering that the icon is now often added as an app embed. This is a crucial detail because it means the chat button doesn't live in your traditional theme code anymore, which is why your old CSS rules might have stopped working.

Solution 1: The Easiest Fix (No Code Required!)

This is by far the most straightforward method, especially if you're not planning to use Shopify Inbox chat at all. Ploqo outlined this beautifully, and it's a game-changer for many.

Step-by-Step: Disabling the App Embed

1. First, head over to your Shopify Admin.
2. Navigate to Online Store > Themes.
3. On your active theme (e.g., Motion, or whatever you're using), click the Customize button.
4. Once in the theme editor, look for the App embeds icon at the top left. It often looks like a small puzzle piece or block icon.
5. In the App embeds section, you'll find a list of embedded apps. Look for Online store chat (by Inbox).
6. Simply switch its toggle off.
7. Don't forget to click Save in the top right corner!

Here's what that looks like:

And here's the toggle you're looking for:

Voila! The icon should disappear immediately from both mobile and desktop views, as demonstrated by Ploqo's final screenshot:

Solution 2: Hiding with CSS (If You Still Need Inbox Running)

What if you want to keep Shopify Inbox active in the background for some reason, but just hide the floating chat button? This is where CSS comes in handy. As sonivragifford recommended, inspecting the element in your browser is always a good first step to find the current selector.

Based on the community's findings, the new element to target is often shopify-chat.

Step-by-Step: Adding Custom CSS

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

#shopify-chat,
shopify-chat,
.shopify-chat {
  display: none !important;
}

The code provided by devcoders is robust as it includes multiple selectors (#shopify-chat, shopify-chat, and .shopify-chat) to ensure maximum compatibility. NerdCurator also suggested the simpler shopify-chat{ display:none !important; } which works for the primary new element.

Remember to click Save after adding the code.

Which Method Should You Choose?

Ploqo made a really important distinction here:

• The toggle route (Solution 1) completely removes the chat feature from your storefront. Use this if you're not using Inbox at all or want it completely gone.
• The CSS route (Solution 2) just hides the button but keeps Inbox running in the background. This might be useful if you're using Inbox for other purposes (like managing customer emails) but don't want the live chat button visible.

For yonicque's original request, wanting to hide the icon from the menu on both mobile and desktop, the no-code app embed toggle is likely the simplest and most effective solution if you don't need the chat functionality at all. If you're a bit more tech-savvy or have specific reasons to keep Inbox active behind the scenes, the CSS method gives you that flexibility.

It's great to see the Shopify community jumping in with such detailed and helpful responses. These kinds of discussions are invaluable for store owners navigating the ever-changing landscape of e-commerce. Always remember to make a backup of your theme before making any code changes!