How can I hide the chat widget on specific pages?

heskew · ‎05-23-2022

Hello, the improvements and integrations on the Shopify inbox app have been amazing.

One key feature that would be crucial, is the availability to hide the 'chat with us' widget , on certain pages. Some pages really need the chat button, others, it can be very distracting

I hope i can find some help on how to solve this. Thank you

SidouLF · ‎05-23-2022

Hey @heskew

This can be done with some extra code, send me the URL and the page you want to hide the widget from

- Was my reply helpful? Click Like to let me know! and Mark it as an Accepted Solution

- Feel free to contact me if you need any help and and have any issue.

heskew · ‎06-02-2022

Thank you, sending now

SidouLF · ‎06-02-2022

@heskew

Go to theme.liquid and at the end of your closing head tag

</head>

add the following code

{% if page.handle == 'cg-essential' %}
  <style>
    #shopify-chat-dummy{display:none !important;}
  </style>
{% endif %}

replace "cg-essential" with the handle of the page you want to hide it from.

- Was my reply helpful? Click Like to let me know! and Mark it as an Accepted Solution

- Feel free to contact me if you need any help and and have any issue.

heskew · ‎06-03-2022

Hello, thanks! I actually edited the code a bit to hide
dummy-chat-button isntead of dummy chat and it worked!! Thanks so much

ErikLima · ‎07-08-2022

Can you please share the entire code?

SidouLF · ‎07-09-2022

@ErikLima Send me your link

- Was my reply helpful? Click Like to let me know! and Mark it as an Accepted Solution

- Feel free to contact me if you need any help and and have any issue.

Jared_Clevenger · ‎08-02-2022

Hi Gang - Any chance there's a code to exclude it from anything but a product or checkout page?

Thanks in advance!

Jared

Patrick2022 · ‎08-22-2022

Hi - I'm trying to remove the chat option from appearing on my blogs. What would I need to edit in your example to make this work? Thanks

greenfieldbotan · ‎09-21-2022

Hi @SidouLF and @heskew, how would I apply this code to all blogs on the website? I have several different blog categories, and I would like to turn off chat for all of them. Do I need to list them all separately or can I disable the chat button for all blogs?

Here is example code to try to disable the "oregano oil and organic skincare" category:

</head>
{% if blog.handle == 'oregano-oil-and-organic-skincare' %}
<style>
#dummy-chat-button{display:none !important;}
</style>
{% endif %}

It doesn't seem to be working. Does the code belong within the <head></head> tag or just after it?

Thanks for your help!

MoLove · ‎04-24-2023

You should be able to remove it from all blogs by just using the {% if blog %} but I am not 100% certain on that. It seems to me that the chat is loaded after everything else. So I made a workaround you add an `id=` inline to your body tag in your `theme.liquid` file

<body 
{% if blog.handle == 'oregano-oil-and-organic-skincare'} 
  id="a-blog" 
{% endif %} >

...lots of code here

</body>

Then in your custom.css file you can add the css to remove it

#a-blog #dummy-chat-button-iframe {
display: hidden !important;
visibility: hidden !important;
}

Zoubidou75 · ‎01-22-2023

Hello dear thanks for it !

On the contrary if we want to display it only in ONE page, only the homepage do you know what kind of code it is please ?

Thanks !

MoLove · ‎04-24-2023

Here is a workaround you add an `id=` inline to your body tag in your theme.liquid file

<body 
{% if blog.handle != 'home'} 
  id="not-home" 
{% endif %} >

...lots of code here

</body>

Then in your custom.css file you can add the css to remove it

#not-home #dummy-chat-button-iframe {
display: hidden !important;
visibility: hidden !important;
}

mariomf · ‎09-22-2022

Can you help me as well please, I tried inserting the code bellow but still cant make it hide from that page.

{% if page.handle == 'sistema-de-puntuacion' %}
  <style>
    #shopify-chat-dummy{display:none !important;}
  </style>
{% endif %}

cglodt · ‎10-24-2023

Can you help me add the Shopify Inbox to only one page on my website? I only want the chat widget to show on https://www.projecthomediy.com/pages/firstbox50 this page.

butterandblends · ‎06-05-2024

Can you do this for me? 😄

Brandon-Flexi · ‎10-21-2022

My solution isn't necessarily URL specific but rather template specific!

For example, if you would like to hide the Shopify chat widget on article pages! You'll need to go to Themes>Edit code and then search for the "article.liquid" template in sections folder.

At the top of the section, insert the code below:

  <style>
  #shopify-chat {
    display: none !important;
  }
  </style>

The above code should work for any template you'd like to hide the chat widget on.

If you are looking to hide the widget on a specific page, you'll need to have slightly more developer knowledge. You'll need to use handles!

Handles link:
https://shopify.dev/api/liquid/basics

Hope this helps (:

wizenedmandrill · ‎02-02-2024

This is the only thing I found that works. Thanks heaps! For me the section template was 'main-article.liquid' not 'article.liquid' though.

How can I hide the chat widget on specific pages?

How can I hide the chat widget on specific pages?

Community Blog Articles