How to hide the chat widget on specific pages

Want to keep the chat widget off certain pages, like landing pages or the cart? You can hide it on any page of your theme by adding a single hidden element. Shopify's checkout isn't part of your theme, so the widget never loads there.

Add this snippet to any page where you want the chat widget hidden:

<div id="commslayer-widget-toggle" style="display:none"></div>

That's it. On any page that contains an element with the ID commslayer-widget-toggle, the floating chat icon won't show up.

How it works

• When a page loads, the widget looks for an element with the ID commslayer-widget-toggle
• If it finds one, the chat icon stays hidden on that page
• The element has to be in the page's HTML when the page loads. An element that a script adds later is not picked up
• The div itself is invisible because of display:none
• The widget works as usual on every other page

Where to add it

Two ways to add it:

• Without touching code: in the Shopify theme editor, open the template of the page, add a Custom Liquid section (most Shopify themes have one) and paste the snippet into it. The widget is hidden on every page that uses that template.
• In the theme code: go to Online Store → Themes, open the menu next to your theme and choose Edit code. Open layout/theme.liquid and paste the snippet anywhere inside <body>, for example right before the closing </body> tag. Pasted there without a condition, it hides the widget on every page, so wrap it in a condition as shown below.

Show the widget only on certain pages#

The snippet hides the widget, so to show it on a few pages only, hide it everywhere else. Add the snippet to layout/theme.liquid, inside <body>, wrapped in a Liquid condition.

Only on two pages (here the pages with the handles support and tracking):

{% unless page.handle == 'support' or page.handle == 'tracking' %}
  <div id="commslayer-widget-toggle" style="display:none"></div>
{% endunless %}

The handle is the last part of the page's address: /pages/support has the handle support.

Hidden on product pages and the cart:

{% if template.name == 'product' or template.name == 'cart' %}
  <div id="commslayer-widget-toggle" style="display:none"></div>
{% endif %}

Only for one country (here Finland). This uses the country your storefront is showing to the visitor, the one in your store's country selector:

{% unless localization.country.iso_code == 'FI' %}
  <div id="commslayer-widget-toggle" style="display:none"></div>
{% endunless %}

Only for customers who are logged in:

{% unless customer %}
  <div id="commslayer-widget-toggle" style="display:none"></div>
{% endunless %}

Use one of these blocks, not several. Save the file and check a page of each kind in a private window.

To switch the widget off on the whole store, turn off Commslayer chat widget under App embeds in the theme editor instead.

Tip: If you want to hide the icon but still let visitors open chat through a button or link, check out How to hide the chat icon and trigger the chat with a link or button.