Re: How To Remove Notification

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

SofiaK
Tourist
12 0 1

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

 

Screenshot 2023-03-27 at 13.33.05.jpgScreenshot 2023-03-27 at 13.40.49.jpg

Replies 7 (7)

Sophia
Shopify Staff
1722 110 223

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!

Sophia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

GemPages
Shopify Partner
5625 1261 1232

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:

 

GemPages_0-1680056920273.png

 

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

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

 

Eg:

GemPages_1-1680056938062.png

 

Hope you find my answer helpful!

Kind & Best regards,
GemPages Support Team.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
CMCosMic
Visitor
2 0 2

Didn't work

journtalat
Tourist
4 0 1

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
Shopify Staff
1722 110 223

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.

Sophia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

doyenn
Tourist
5 0 0

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
Tourist
8 1 4

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.