CSS code for hiding Shopify Inbox chat on Homepage ONLY

Technical Q&A
,
1

URL: https://culinarysolvent.com. I currently have the Shopify Inbox enabled, chat icon shows up at the bottom left of every page. I would like to hide the chat feature from loading on the Homepage only, suggestions from the internet say pasting the below css code into my theme.css.liquid file should do it, however the icon is still appearing.

.template-index #shopify-chat-dummy { display: none; }

In addition to assistance with the proper code to paste, does anyone have experience/knowledge with hiding the chat widget on the homepage to improve site load speed? Much appreciated.

2

Hey @MrTincture

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

{% if template == 'index' %}

{% endif %}

RESULT:

Moeed_0-1704088286323.png
Moeed_0-1704088286323.png1896×874 502 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Code worked like a charm, thanks so much @Moeed !

4

Hello,

its not working 2024. Can you help me please to display it only on contact page?

Page: “https://snus-shop.at/pages/hilfezentrum”

Kind regards

Stipo

5

@marcikics try this on theme.liquid file

div#shopify-chat { display: none; }

{% if page.handle == ‘hilfezentrum’ %}

.div#shopify-chat { display: block; }

{% endif %}

6

Hello Kazi,

thank you for your help.

I changed it to:

{% if page.handle != ‘hilfezentrum’ %}


div#shopify-chat {
display: none;
}

{% endif %}

now its working.

Kind regards

Stipo

7

@marcikics great you have got it working :grinning_face_with_smiling_eyes:

8

Hey! Don’t want to hijack this thread, but I cannot for the life of me figure out how to change this text with CSS from “Chat with us” to just “Chat.” I tried targeting the heading (h2) with (using Safari’s Web Inspector), and found the selector .interstitial-view__welcome .store-info-heading h2. My plan was to display: none !important it, and then use ::after pseudo status/class and do content: 'Cart' !important, but I think the problem is that the Shopify Inbox CSS is dynamically generated and a part of the styles.css stylesheet (dynamically generated itself), and none of the theme.css.liquid (or other liquid) files seem to contribute in a meaningful way to the styles.css. And because it’s generated at the time the webpage is load, it’s always going to take priority as far as the DOM is concerned. Also, all this stuff is in Shadow DOM, so I’m not even sure I can do anything with CSS anyways. Any ideas?

Screenshot 2024-06-12 at 12.36.58 PM.png
Screenshot 2024-06-12 at 12.36.58 PM.png1722×1566 199 KB

9

@toniwonkanobi Hello i guess you can change it from the app settings.

10

No, unfortunately, one cannot change it. The Shopify Inbox app does not have a section for injecting CSS (like one can do when editing the Theme).

11

Not to add css you can change the title that says “chat with us”

12

One can only change the text when the chat box is “closed.” The “Chat with us” text is not editable from the app embeds customization section.

13

https://fitt-vibes.myshopify.com/ can you make mine too pls

14

@Nightmare What are you trying to do?

15

Make the chat only at home page @kazi_1

16

@Nightmare Put this code in theme.liquid after tag

{% if template != ‘index’ %}

iframe#ShopifyChat { display: none !important; }

{% endif %}

17

it just dissapears

18

it didnt do anything @kazi_1

19

btw @kazi_1 can you pls make the chat only visible in my homepage not anyware else

20

@Nightmare replace the code with this

{% if template != ‘index’ %}

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

{% endif %}