How to show or hide the launcher on specific pages

You will learn

How to hide the launcher (the floating button that opens web chat or Customer Hub) on certain pages of your site, or show it only on certain pages. You'll add a short CSS snippet to your site theme on the pages you choose.

This works whether you use web chat on its own or as part of Customer Hub, and whichever screen your launcher opens to (chat, Favorites, or For You).

Before you begin

You'll need:

• Web chat or Customer Hub live on your site
• Access to edit your site theme's code

Klaviyo doesn't currently have a setting that controls which pages the launcher appears on, so this is done with CSS.

The snippet

This CSS hides the launcher:

.kl-hub-launcher-container,
.kl-hub-launcher {
  display: none !important;
}

.kl-hub-launcher-container is the wrapper that positions the launcher, and .kl-hub-launcher is the button itself. Klaviyo's styles load after your theme's, so keep !important or the launcher will reappear.

Hide the launcher on specific pages (Shopify)

1. In Shopify, navigate to Online Store > Themes.
2. Next to your live theme, click the three dots, then click Edit code.
3. Open layout/theme.liquid.
4. Paste the code below just above the closing </head> tag, and replace the template names with the pages where you want to hide the launcher.
5. Click Save.

{% if template.name == 'cart' or template.name == 'collection' %}
  <style>
    .kl-hub-launcher-container,
    .kl-hub-launcher {
      display: none !important;
    }
  </style>
{% endif %}

Common template names:

• index — your homepage
• product — product pages
• collection — collection pages
• cart — the cart page
• page — standard content pages, like About or Contact
• blog and article — your blog and blog posts
• search — search results

Shopify checkout pages don't use your theme, so you can't target them this way.

Target a single page by its URL

To target one specific page rather than every page of a type, check the page's path instead of its template name:

{% if request.path == '/pages/contact' %}
  <style>
    .kl-hub-launcher-container,
    .kl-hub-launcher {
      display: none !important;
    }
  </style>
{% endif %}

Show the launcher only on specific pages (Shopify)

Follow the same steps, but use unless instead of if. This hides the launcher everywhere except the pages you list. In this example, the launcher only appears on your homepage and product pages:

{% unless template.name == 'index' or template.name == 'product' %}
  <style>
    .kl-hub-launcher-container,
    .kl-hub-launcher {
      display: none !important;
    }
  </style>
{% endunless %}

Only ever hide the launcher on the pages that shouldn't show it. Don't hide it everywhere and then try to force it back on for certain pages; the override can conflict with Klaviyo's styles and display the launcher incorrectly.

Other ecommerce platforms

The same approach works on any site: add the snippet inside a style tag only on the pages where the launcher should be hidden. Depending on your platform, you can do this in a page-specific template, a page-level custom code field, or your tag manager.

If your platform adds a page-specific class to the body tag, you can scope the snippet to that class instead. Replace page-cart with the class your platform uses:

body.page-cart .kl-hub-launcher-container,
body.page-cart .kl-hub-launcher {
  display: none !important;
}

Hide the launcher on mobile

Hiding the launcher by screen size doesn't depend on the page, so this one can go in the Custom CSS field in your Customer Hub design settings (Customer Hub > Design) or standalone web chat design settings (Settings > Web chat > Design). Adjust the width to match your theme's mobile breakpoint:

@media (max-width: 767px) {
  .kl-hub-launcher-container,
  .kl-hub-launcher {
    display: none !important;
  }
}

What hiding the launcher doesn't do

• It doesn't turn off web chat or Customer Hub. Shoppers can still open them from links to #k-hub (like a Favorites link in your header), FAQ blocks on product pages, and embedded blocks. Remove or hide those separately if you don't want them on the page.
• It doesn't affect other channels. Customer Agent still responds on email, SMS, and WhatsApp.
• It doesn't control who sees web chat. To limit web chat to logged-in shoppers or turn it off, use the web chat visibility settings instead.

Test your changes

Open a page where the launcher should be hidden in a private browsing window and confirm it doesn't appear. Then open a page where it should appear and confirm it's still there. If the launcher still shows where it shouldn't, check that the template name or path matches exactly and that the snippet includes !important.

FAQ

Is there a setting in Klaviyo to choose which pages show the launcher?
Not currently. Use the CSS approach in this article.

Will this break when Klaviyo updates web chat?
Classes that start with kl-hub- are stable across normal updates, so the snippet should keep working. Re-test after major redesigns.

Can I hide the launcher for certain shoppers instead of certain pages?
Yes, but not with CSS. Use the web chat visibility settings to show web chat to all visitors or only logged-in shoppers, and Customer Agent's targeting settings to choose which segments the agent responds to.

Additional resources