Hide Shopify inbox embed app on homepage only HORIZON THEME

Ask & Offer
1

Hello,

I have looked through the resources here and haven’t been able to find a solution thus far:(

My store is: www.linesix.ca.

I am trying to hide the chat bubble on the homepage only. Any help would be greatly appreciated.

Thanks!

2

Hi @LS001 ,

Maybe try to add this piece of code to the template file?

{% if template.name == ‘index’ %}

<style>
  .chat-app {
   display: none
  }
</style>

{% endif %}

Please let me know if that works! I don’t think that the app has a way to hide it natively on specific pages.

Regards,

Rodrigo

3

Hey @LS001

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 </ body> tag
{% if template.name == ‘index’ %}
<style>
div#shopify-chat {
    display: none !important;
}
</style>
{% endif %}

RESULT:

image
image1903×911 70.4 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

4

Hello,

Thank you for your help but this solution did not work for me

5

Hello and thank you for your help but this solution did not work for me:(

I am using the Shopify inbox app and using the embed function from the theme editor.

6

Hi, sorry! I didn’t see that it was inside the shadow dom.

The solution from @Moeed should work. I tested it on my end.

Regards,

Rodrigo

7

Hey, Thanks so much but it still did not work for me. Not sure what I’m doing wrong. I added the code above the tag at the end of the theme.liquid file.

Are you able to show where exactly you’re placing it in the file?

Thanks so much

8

Hi,

Weird.

I added this here:

{% if template.name == 'index' %}

  <style>

#shopify-chat {

display: none !important;

    }

</style>

{% endif %}

to here (theme.liquid):

image
image1000×716 74.7 KB

9

ahh, found it, it seems that the code that was shared is using ‘ instead of ’ in the if clause.

10

What code should I use in this case? I appreciate the help

11

Please add the code below to theme.liqui file after <head>

    {% if template == 'index' %}
      <style> #shopify-chat { display: none !important; visibility: hidden; } </style>
    {% endif %}

Best regards,
Dan from Ryviu: Product Reviews App

12

Do not edit theme code.

Simplest solution is to add a “Custom liquid” section to your homepage template and paste this into “Custom liquid”:

<style>
  div#shopify-chat {
   display: none;
  }
</style>
  • The code will hide the chat button.
  • The code will only apply on pages with this template – meaning homepage only.
  • “Custom liquid” will be preserved when updating theme version.
13

That is smart! Thank you for sharing!

14

Amazing! This worked and thank you so much to you and everyone else who has helped out

15

You are very welcome!