Shopify Inbox Visibility: Hiding the Chat Bubble on Your Homepage

Controlling Your Shopify Inbox: The Case of the Disappearing Chat Bubble

Hey everyone! Ever found yourself wanting to tweak the Shopify Inbox app, specifically hiding that little chat bubble on your homepage? It's a common question, and I recently saw a great discussion about it in the Shopify Community. Let's break down the solutions that were shared; it's easier than you might think!

The original poster, LS001, was looking for a way to hide the Shopify Inbox embed app specifically on their homepage, which uses the Horizon theme. They wanted a clean look for the landing page. Here's how the community jumped in to help.

Community Solutions: Diving into the Code

Several solutions were offered, each with its own approach. Let's explore them:

Solution 1: Theme.liquid Modification

Dan from Ryviu suggested adding code directly to the theme.liquid file. This is a common approach for sitewide changes, but in this case, we want it to only affect the homepage. Here's the code snippet:

    {% if template == 'index' %}
      
    {% endif %}

This code checks if the current page is the homepage (template == 'index') and, if so, applies CSS to hide the #shopify-chat element. It uses display: none !important; and visibility: hidden; to ensure the chat bubble is completely hidden.

LS001 confirmed this solution worked for them after some initial hiccups. It's a testament to persistence and the community's willingness to refine solutions!

Solution 2: Custom Liquid Section

tim_1 offered an interesting alternative: using a "Custom liquid" section. This approach is generally considered safer because it minimizes direct theme code edits, which is good for theme updates. Here's the code:

The key here is to add this code within a "Custom liquid" section specifically on your homepage template. This ensures the code only applies to the homepage. tim_1 highlighted that this method is preserved even when updating your theme, which is a huge plus!

Solution 3: Targeting the Chat App Class

RodrigoJantsch initially suggested targeting a class named .chat-app. However, it was later discovered that the chat bubble resides within a shadow DOM, making it harder to target directly with CSS. Rodrigo then pointed back to Moeed's solution.

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



{% endif %}

Solution 4: Moeed's Simplified Approach

Moeed offered a streamlined version of the theme.liquid modification, placing the code right before the closing tag. This ensured the code would execute properly and hide the chat bubble. Here's Moeed's code:

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

{% endif %}

Moeed also included a helpful screenshot to show exactly where to place the code:

Step-by-Step Instructions: Hiding Your Chat Bubble

Based on the community discussion, here's a consolidated set of instructions to hide the Shopify Inbox chat bubble on your homepage:

1. Go to Online Store: From your Shopify admin, navigate to "Online Store" > "Themes."
2. Edit Code: Click the "..." button next to your current theme and select "Edit code."
3. Find theme.liquid: In the code editor, locate the theme.liquid file under the "Layout" folder.
4. Add the Code: Paste the following code snippet just above the tag at the end of the file:

{% if template == 'index' %}

{% endif %}

5. Save: Click the "Save" button in the top-right corner of the code editor.
6. Check Your Homepage: Visit your homepage to confirm the chat bubble is now hidden.

Important Considerations:

• Theme Updates: If you directly edit theme.liquid, be mindful that future theme updates might overwrite your changes. Consider using the "Custom liquid" section method for better preservation.
• CSS Specificity: The !important flag in the CSS ensures that this style overrides any other conflicting styles.

So, there you have it! Several ways to tackle this little customization. It's great to see the community come together and offer different solutions, each with its own pros and cons. Remember to back up your theme before making any code changes, and test thoroughly after implementing any solution. Happy customizing!