How to style your Customer Hub

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

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.

Customer Hub design options

The Customer Hub drawer has multiple customizable tabs:

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

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. 

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 for each tab

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 “Sign in” 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.”

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

1. Open Service - Customer Hub tab in Klaviyo’s left-hand navigation.
2. Click Settings.
3. Under Welcome messages, customize a call to action to display above the "sign in" button for unauthenticated shoppers. You can do this for each tab of the Customer Hub drawer:
   • For you
   • Orders
   • Profile
     
4. Click Save. 

Design your Customer Hub

For design options to customize your Customer Hub interface:

1. Navigate to Customer Hub in Klaviyo's left-hand navigation.
2. Select Design.
3. Open the Style menu. 
   
4. From the Style menu you can adjust the following color and style settings and preview how these adjustments will look in the Customer Hub interface canvas
5. You can optionally apply advanced styling with Custom CSS. See the Custom CSS section below for more details.
6. Click Publish to set your changes live.

Customize the Customer Hub widget

Aside from designing Customer Hub itself, you can also customize the hub widget, which is a small, floating element on your website that visitors can click to quickly open Customer Hub interface. The hub widget functions much like a form teaser, following visitors throughout their journey on your website. 

To customize the hub widget:

1. Select Customer Hub in Klaviyo's left-hand navigation.
2. Select Design.
3. Open the Widget menu.
   

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.

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.

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
• All content blocks have the class kl-hub-content-block, and also include their block Internal name (e.g., kl-hub-content-block-reward-program for a content block named "Reward program")

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

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

• Getting started with Customer Hub
• Getting started with web chat
• How to create content blocks for Customer Hub