How can I disable the false notification feature in my Shopify inbox?

[SofiaK]

I use Shopify inbox in my shop, and it shows a fake notification to new customers as part of the design. (Red 1 icon)

The solution below doesn't work because I don't have the >base.css.liquid in Assets

.chat-notification {
   display: none !important;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.css.liquid

My website is www.sofiakov.com I'm using a prestige allure theme

[Sophia]

Hi, @SofiaK!

I haven't been able to get the red dot notification to appear on my test store, so I'm not sure what's triggering it.

While I'm not able to offer coding advice, I wanted to suggest contacting our team via the Shopify Help Center. Since Shopify Inbox is developed and supported by Shopify, our team might be able to identify what is triggering the red dot and help you remove it. If removing it isn't a supported customization, we can at the very least submit feedback about this to our developers on your behalf.

I noticed that the custom greeting on Shopify Inbox is missing a word. The end of the message reads "I will be happy help", though I believe it should read "I will be happy to help". This might be a good opportunity to proofread the rest of the website copy, though I didn't notice any other typos while looking around. The product photos are such great quality, and the products look really unique. I especially appreciate the thought and detail on the About page—this will really help customers connect with you and your brand. Great work!

[GemPages]

Hi @SofiaK,

Glad to support you today.

You can check out my suggestion below to get your concern resolved:

1. Go to Edit code on Online Store:

2. add my code  above the </body> tag on Theme.liquid:

<style>
.chat-notification {
   display: none !important;
}
</style>

Eg:

Hope you find my answer helpful!

Kind & Best regards,
GemPages Support Team.

[CMCosMic]

Didn't work

[journtalat]

I'm waiting for almost a week to someone to reply... I really don't know what your intention with that notification if you are focusing on user experience on websites. https://community.shopify.com/c/shopify-apps/deceiving-notification-badge-of-shopify-inbox-widget/td...

[Sophia]

Hi, @journtalat.

As my previous reply in this thread states, I'm not able to offer coding advice, but I suggest contacting our team via the Shopify Help Center. Since Shopify Inbox is developed and supported by Shopify, our team might be able to identify what is triggering the red dot and help you remove it. If removing it isn't a supported customization, we can at the very least submit feedback about this to our developers on your behalf.

The Shopify Community is monitored by our team, but we can't guarantee a response to every post. It's also important to note that since you replied to your topic here, it will no longer appear as "unanswered", so Shopify staff and others in the Community may see the post as if someone has already engaged with it.

This is a great place to post if you're looking for advice from developers or other store owners, but if you need help from Shopify Support right away, it's best to contact us via the Help Center.

[doyenn]

I think it's caused by the "greeting message" which starts a "conversation" and disabling the greeting message would solve the problem.. unfortunately in the theme editor, one cannot leave the "greeting message" field blank.

[DonD]

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 </body> tag:

<script>
function accGetCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function accSetCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

setTimeout(accAdjustChatNotification, 500);
function accAdjustChatNotification() {
const accChatDiv = document.getElementById('shopify-chat');
accChatDiv.addEventListener('click', () => {
accSetCookie("acc_chat_opened","true","365");
});
let accChatOpened = accGetCookie("acc_chat_opened");
if (accChatOpened=="") {
const accNotification = document.getElementById('shopify-chat').childNodes[0].shadowRoot.childNodes[3].childNodes[0].childNodes[2];
if (accNotification.innerHTML=="1") {
accNotification.outerHTML="";
}
}
}

</script>

Explanation:

1. The purpose of the "setTimeout" is to wait 1/2 second before running this code. That gives the app time to render the html we need to address.

2. Next, we add an event listener to the chat widget, so that when the shopper clicks on it, it sets a cookie. This is so we only interfere with the notification dot if the shopper has not clicked on the widget (once they click on the widget, the false notification goes away on its own).

3. Then we check for the cookie. It if is missing (the shopper has not clicked on the widget), we navigate the DOM until we get to the notification dot. If it is showing a "1", then we remove it.

I understand there may be a somewhat more elegant approach to navigating the DOM, but this works. Also, instead of the 1/2 second delay, it would be better to poll the DOM for the presence of the notification node, say once every 1/10 second until it is exposed and then do the work. As it is, the shopper will see the false "1" for up to 1/2 second, but in my opinion that is acceptable because they probably won't notice it.

[christoffwalker]

Fantastic. Thank you so much for this! Seems to be working well so far...

Agree with OP the false notification icon is misleading - let us turn it off in the app settings.

[doyenn]

Hmm didn't work for me. I'm using the Dawn theme, if that matters.

[christoffwalker]

Yes you're right - this is no longer working...

[christoffwalker]

I re-traced the childNodes and it seems the code has changed so just need to update the final childNodes from 2 to 1.

Change this line:

const accNotification = document.getElementById('shopify-chat').childNodes[0].shadowRoot.childNodes[3].childNodes[0].childNodes[2];

To this:

const accNotification = document.getElementById('shopify-chat').childNodes[0].shadowRoot.childNodes[3].childNodes[0].childNodes[1];

[christoffwalker]

They have since updated the source code. After re-tracing the childNodes we just need to update the final childNodes selector from 2 to 1.

Change this line:

const accNotification = document.getElementById('shopify-chat').childNodes[0].shadowRoot.childNodes[3].childNodes[0].childNodes[2];

To this:

const accNotification = document.getElementById('shopify-chat').childNodes[0].shadowRoot.childNodes[3].childNodes[0].childNodes[1];