Issue: The Shopify Inbox chat widget shows a red “1” notification badge even when no message exists, distracting shoppers. There’s no in-app setting to disable it, and CSS overrides fail because the badge is injected dynamically and lives inside the widget’s Shadow DOM.
Attempts and context: The store owner tried CSS display/visibility rules without success. Another participant agreed it’s poor UX. No official Shopify response noted.
Workaround provided: A JavaScript snippet added in theme.liquid (just before ) removes the badge when it falsely shows “1.” Key elements:
Polls the DOM until the #shopify-chat element appears, then waits briefly.
Traverses into the widget’s shadowRoot to target the badge node and removes it.
Uses a cookie to track if the shopper has opened the chat; only hides the badge before the first open, and sets the cookie on widget click.
Confirmed working on the Refresh theme; likely compatible with most themes.
Status: Practical, code-based fix available; no native toggle from Shopify. Image and the code snippet are central to implementation.
Summarized with AI on December 29.
AI used: gpt-5.
This is what a customer sees on my store. Even though there is no message sent by me.
It gets the attention of customers to click on it but the problem is, why would I want that?
I want them to be fully focused on my website, not the notification that pops up for nothing.
Since there is no option to remove it, I tried adding these codes to base.css and theme.liquid in
The problem is that the Inbox app chat notification dot is added dynamically using javascript so it is not addressable until after that happens. To make matters worse, it is deep within a ShadowRoot which makes it tricky to address. After a late-nighter though, I figured out how to do this, it works for sure in Refresh theme and probably in most themes.
Add the following code into theme.liquid just above the tag:
Explanation:
Once the shopper clicks on the widget to open it, the notification dot goes away on its own. So we use a cookie to track that event. First we check to see if the cookie is present, indicating the shopper has clicked the widget. If so, we leave the widget alone.
If the cookie is absent, indicating the shopper has not clicked the widget (so the false notification “1” will display), we take action to hide the notification (but only if the value is “1”). Also we attach an event listener to the widget to set the cookie when it is clicked.
Finally, we are polling the DOM every 50 milliseconds to check if the node we are interested in is present. Once the parent node is present, we wait an additional 300 milliseconds to hide the notification.
