How to style your Customer Hub

Estimated 6 minute read
|
Updated Feb 20, 2025, 6:59 PM EST
You will learn

You will learn

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. 

Before you begin

Before you begin

This guide explains how to customize the style of your Customer Hub interface. Before proceeding, ensure that the Customer Hub feature is enabled.

Learn more about Customer Hub.

Styling Customer Hub

Styling Customer Hub

The Customer Hub drawer has multiple customizable tabs:

  • For you
  • Orders
  • Profile
  • Chat (only visible when web chat is enabled)

The Customer Hub drawer open on an example brand's website and showing that the shopper is logged in to their customer account.

You have various options for customizing the design across each of these tabs, including editing text, colors, fonts, and more. Style customization selections cascade across each tab in the Customer Hub drawer to ensure a consistent, on-brand experience for your site visitors. 

While the appearance of most elements in Customer Hub drawer can be adjusted, their positions cannot. Only general layout options are currently available.

As you edit the design settings for your Customer Hub in Klaviyo, use the View live button to see the changes made to the hub interface on your website. Note that if your Customer Hub is live, saved changes are published to your site. 

Customize a main call to action

Customize a main call to action

By default, when a shopper signs into their customer account, Klaviyo displays “Welcome, first.name” as the main heading on the For you tab of the Customer Hub drawer. This text is not editable.

For unauthenticated shoppers, however, you can write your own call-to-action heading to display above the “Get started” button before they log in. This can be helpful for incentivizing unauthenticated visitors to sign in and engage with your Customer Hub interface.

In the example below, the main call to action reads “Earn rewards, track orders, and save your shopping history.”

The For you tab view in Customer Hub showing the main call to action for a shopper who has not signed into an account.

To update the Main call to action for your Customer Hub interface:

  1. Open the Customer Hub tab in Klaviyo’s left-hand navigation.
  2. Select the Settings in the top right corner.
    The Settings button on the Customer Hub dashboard.
  3. Select Content.
  4. Under Main call to action, customize a call to action to display above the getting started button for unauthenticated shoppers.
    The Main call to action section on the Content settings menu in the Customer Hub tab in Klaviyo.
  5. Click Save
Design settings

Design settings

For design options to customize your Customer Hub interface:

  1. Navigate to Customer Hub in Klaviyo's left-hand navigation.
  2. Select Settings.
  3. Open the Design menu. 
    The Design menu in Customer Hub settings in Klaviyo showing all styling options for customizing a Customer Hub drawer.

You can adjust the following color and style settings:

  • Fonts
    • Heading font
      Used for headings on each tab of Customer Hub. Choose Inherit from site to automatically replicate the font used in other headings on your site.
    • Heading color
      Used for heading text on each tab of Customer Hub.
    • Paragraph font
      Used for text within each section, content block, and button. Choose Inherit from site to automatically replicate the font used in other paragraphs on your site.
    • Paragraph color
      Used for all button, content block, and section text in Customer Hub.
  • Buttons
    • Button color
      The background color for all buttons in Customer Hub.
    • Button text color
      The color of the text on all buttons in Customer Hub. 
  • Layout
    • Style
      The shape of the edges of content blocks, buttons, and sections in Customer Hub. 
    • Position on desktop
      Where the Customer Hub drawer slides out from (left or right side of viewport). If your brand uses a cart drawer, consider using left-aligned positioning so it does not overlap with Customer Hub.
    • Background color
      The base color of Customer Hub beneath all text, content blocks, and extensions.
Hub launcher widget

Hub launcher widget

Aside from designing Customer Hub itself, you can also customize a hub launcher widget, which is a small, floating element on your website that visitors can click to quickly open Customer Hub. This is often used in conjunction with Customer Hub’s web chat functionality. A hub launcher widget functions much like a form teaser, following visitors throughout their journey on your website. 

The hub launcher widget styling menu on the Design settings page showing an example hub launcher set to hidden but with some styling configured.

You can customize the hub launcher widget’s:

  • Visibility
    • Which site visitors can see and click on the widget
  • Widget shape
    • The shape of the widget’s edges
  • Page location
    • Where on a web page the widget floats
  • Spacing
    • Distance from left/right and top/bottom corner, depending on the widget’s location
  • Widget background color
    • Base color of the widget
Custom CSS for Customer Hub

Custom CSS for Customer Hub

If your branding needs aren’t met by the Customer Hub design options, you can apply advanced styling with Custom CSS.

While Customer Hub uses CSS resets to avoid collision with your site’s CSS, you may need to add custom CSS to address edge cases or apply unique styling, such as floating drawer or custom border radius values.

Implementing custom CSS for your Customer Hub involves editing your site’s code. This is only recommended for technically savvy marketers or those who have access to a developer. While our product does support custom CSS, our support team cannot help you add custom CSS to Customer Hub beyond the general guidance covered in this documentation. To maintain the security of your data, Klaviyo's support team is not able to open your HTML files.

Apply custom CSS 

Apply custom CSS 

Add any custom CSS directly to the Custom CSS section of the in your Customer Hub design settings, and make sure to save your changes.

The Custom CSS section at the bottom of the Customer Hub Design settings menu in Klaviyo.

All basic elements within the Customer Hub have class names prefixed with kl-hub-:

  • All text elements have the class kl-hub-text, while headings have the class kl-hub-heading
  • Buttons have the class kl-hub-button, and also include their variants (e.g., kl-hub-button-primary, kl-hub-button-secondary, etc.)
  • The Customer Hub drawer itself has the class kl-hub-drawer
  • Text inputs have the class kl-hub-input

This is not an exhaustive list; you can find more by inspecting the Customer Hub with your browser’s debugger. If an element has a class that starts with kl-hub-, it’s safe to use for custom CSS.

CSS example

CSS example

If you wanted to make all buttons and headings in the Customer Hub uppercase, you could write the following custom CSS:

.kl-hub-button, .kl-hub-heading {

    text-transform: uppercase;
}
Additional resources

Additional resources

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

Explore more from Klaviyo

Community
Connect with peers, partners, and Klaviyo experts to find inspiration, share insights, and get answers to all of your questions.
Live training
Join a live session with Klaviyo experts to learn about best practices, how to set up key features, and more.
Support

Access support through your account.

Email support (free trial and paid accounts) Available 24/7

Chat/virtual assistance
Availability varies by location and plan type