How to show or hide the launcher on specific pages

How to show or hide the launcher on specific pages

Estimated 5 minute read

Updated Sep 24, 2026, 12:00 AM EST

Table of contents

You will learn
Before you begin
The snippet
Hide the launcher on specific pages (Shopify)
Show the launcher only on specific pages (Shopify)
Other ecommerce platforms
Hide the launcher on mobile
What hiding the launcher doesn't do
Test your changes
FAQ
Additional resources

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

This requires editing your site theme's code. It's recommended for technically savvy marketers or those with access to a developer. Klaviyo's support team can offer general guidance but cannot write or debug custom code for you.

You'll need:

Web chat or Customer Hub live on your site
Access to edit your site theme's code
Permission to edit Customer Hub or web chat design settings in Klaviyo, if you use the Custom CSS editor for the mobile rule below

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:

cssCopy

.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.

Don't paste this snippet into the Custom CSS field in your Customer Hub or web chat design settings. CSS added there loads on every page, so it hides the launcher across your whole site. To target specific pages, add the snippet to your theme so it only loads on those pages.

Hide the launcher on specific pages (Shopify)

Open your live theme in Shopify's code editor.
Open layout/theme.liquid.
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.
Click Save.

htmlCopy

{% 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:

htmlCopy

{% 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:

htmlCopy

{% 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:

cssCopy

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 CSS can go in your Customer Hub or standalone web chat design settings. It hides the launcher in browser windows 767 pixels wide or narrower. Adjust the width to match your theme's mobile breakpoint:

cssCopy

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

If you use Customer Hub

Navigate to Customer Hub > Design and click Edit your Hub.
Select Edit style in the left sidebar. Under Custom CSS, click the plus icon if the editor is closed, then add the CSS above to any existing CSS. Paste only the CSS, without <style> tags.
Click Save. If a visibility test is running, saving opens a warning. Choose End test and publish only when you are ready to end the test and apply your changes.

If you use standalone web chat

Navigate to Settings > Web chat > Design.
Scroll to the Custom section and click Add custom CSS, or edit the CSS already there. Add the CSS above without <style> tags.
Click Save.

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 can use web chat. To turn web chat off, use Settings > Web chat > General. If you use Customer Hub, you can also set Login status to Logged in shoppers to require sign-in before chatting. This does not hide the launcher from logged-out shoppers. Click Save.

Test your changes

Test as a shopper who meets your launcher visibility settings. Open a private browsing window and sign in if required. Open a page where the launcher should be hidden and confirm it doesn't appear. Then open a page where it should appear and confirm it's still there. For the mobile rule, check screen widths both below and above your chosen breakpoint. 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. In Settings > Web chat > General, use Widget visibility to choose All shoppers or Logged in shoppers only, then click Save. Customer Agent's targeting settings choose which segments the agent responds to; they do not hide the launcher.

Additional resources

Learn about design options for styling your Customer Hub drawer, and how you can design it to match your brand. Because the Customer Hub interface is ingrained in the customer experience, it’s best practice to style it to appear as an extension of your website. - Getting started with web chat

Learn about web chat, which is a 2-way communication channel you can add to your website. Web chat can be set up on its own for you to use with Customer Agent and Helpdesk, but it's also designed to be a seamless part of Customer Hub. Web chat allows your business to engage in live, personalized conversations with visitors on your website so they can easily get answers to their questions or assistance with issues.

Was this article helpful?

YesNo

Use this form only for article feedback. Learn how to contact support.