Shopify Chat Icon - Hide Request

Store Design
,
1

Hello, I need assistance with hiding the shopify chat icon on both mobile and desktop from the menu. I noticed that the previous tag was #shopify-chat but it seems that this tag for the code has been changed once they updated the icon. Can someone please assist. Our website is www.yonicque.com

3

Hey, I believe the issue is that Shopify changed how the Chat widget is rendered, so the old #shopify-chat selector may no longer work.

I’d first inspect the Chat icon in your browser and check the current element/class Shopify is using, then target that instead. If you’re comfortable with the theme code, you can use the browser inspector to find the new selector and add the CSS to hide it on both desktop and mobile.

Hope that helps!

4

I tested on a Motion store.

That icon is the Shopify Inbox chat button. It is added to your Motion theme as an app embed, so it does not live in your normal theme code. That is also why your old CSS stopped working.

The Shopify chat icon on your store
The Shopify chat icon on your store1618×1200 181 KB

Easiest fix (no code, hides it on mobile and desktop)

  • Go to Online Store > Themes, and on your Motion theme click Customize.
  • Click the App embeds icon at the top left (the app blocks icon).
  • Find Online store chat (by Inbox) and switch its toggle off.
  • Click Save.

Turn off the Online store chat app embed
Turn off the Online store chat app embed2556×1178 344 KB

The icon disappears everywhere right away.

Chat icon removed
Chat icon removed1618×1200 193 KB

If you would rather hide it with CSS

Your old #shopify-chat rule no longer matches. The new button sits inside a shopify-chat element, so target that instead:

  • shopify-chat { display: none !important; }

Put that where your old rule was. It hides the icon on mobile and desktop and touches nothing else.

One note: the toggle route removes the chat feature entirely, while the CSS route just hides the button but keeps Inbox running in the background. Use the toggle if you are not using Inbox at all.

Regards,
Ploqo

5

Hello @yonicque Thanks for reaching out to Shopify community with your concern. You need to add this code in the theme files. For which you need to go to Online Store > Actions (Active theme) > Edit Code > Assets, under assets add the code at the bottom of styles.css file.

shopify-chat{ display:none !important; }
7

Hi @yonicque

Try this code.

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