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.

The For you and Cart tabs and the Add to Cart widget require a paid Customer Hub plan or a free trial.

Customer Hub design options

The Customer Hub drawer has multiple customizable tabs:

• For you
• Orders
• Cart (visible when enabled and its placement is set to Hub)
• Chat (only visible when web chat is enabled)
• FAQ (visible when FAQs are enabled and web chat is unavailable to the shopper)
• Profile

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.

Use the editor canvas to preview your changes as you work. If the Preview button is available, use it to preview unpublished changes on your website. View live (or View preview when your Hub is hidden) opens the saved version.

Customize sign-in headings

When a shopper signs in, the For you tab greets them by name, or displays “Welcome” if no name is available. You can’t edit this greeting.

For shoppers who haven’t signed in and aren’t recognized by Klaviyo, you can write a call-to-action heading to invite them to sign in. On the For you tab, recognized shoppers with a name on their profile see the personalized greeting instead.

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

For shoppers who aren’t signed in, the “rewards available” indicator appears when:

• A static coupon is available in Customer Hub and Klaviyo hasn’t recognized the shopper, or
• A loyalty integration (such as Smile) is enabled in Customer Hub.

To update the sign-in headings in your Customer Hub:

1. Open Website > Customer Hub in Klaviyo’s left-hand navigation.
2. Select Design > Edit your Hub.
3. In the control panel above the preview, select Open and Logged out, then choose a page from the Page dropdown:
   • For you
   • Orders
   • Profile
4. In the right-hand panel, expand Login block and select Heading. On the For you page, find Login block under Fixed layout. Enter your heading in the left-hand Content panel.
5. Repeat for any other page you want to customize, then click Publish.

Design your Customer Hub

For design options to customize your Customer Hub interface:

1. Navigate to Customer Hub under the Website tab.
2. Select Design in the Customer Hub navigation.
3. At the top of the Design page, you’ll see a card that displays the status of your Hub. Select the Edit your Hub button to enter the Customer Hub Editor.
   

4. In the editor, select the Style tab in the left-hand panel.
5. Adjust the drawer’s appearance, shape, position, navigation tabs, colors, and fonts. Check the results in the preview canvas.

6. Click Publish to save your design changes. If Customer Hub is live, the changes apply to your website.

You can optionally apply advanced styling with Custom CSS. See the Custom CSS section below for more details.

For language settings and translations, see How to localize Customer Hub for multi-language stores.

If your Hub is hidden, follow the Customer Hub setup guide to set it live when you’re ready to launch.

Customize the Customer Hub widget

The Customer Hub widget is a small, floating element on your website that visitors can click to open Customer Hub. It also displays notifications, such as incoming chat messages and confirmation when shoppers add items to Favorites. Enabling the widget gives shoppers another way to open Customer Hub, but it isn’t required to make your Hub live.

To customize the hub widget:

1. Enter the Customer Hub editor.
2. In the control panel above the preview, select Closed, then Icon.
3. Under Widget settings, use Visibility to choose which shoppers see the widget:
   • All shoppers (recognized, logged in and logged out) – The widget appears for everyone.
   • Logged in or recognized shoppers – The widget appears for shoppers signed in to Customer Hub or recognized by Klaviyo. This option is available when recognized shopper experiences are enabled.
   • Logged in shoppers only – The widget appears for shoppers signed in to Customer Hub.
   • Hidden – The widget does not appear for any shoppers.
4. Choose what the widget opens from the Widget opens dropdown if the widget is visible.
5. Customize the widget’s shape, colors, icon, and layout if it is visible.

Customize additional widget states

With the widget visible, select the caret next to Icon in the control panel above the preview, then select Add to Cart to configure that widget state.

• The Add to Cart state appears on product detail pages when enabled and after shoppers reach the scroll percentage you set. Shoppers can add the product to their cart or save it to Favorites when Favorites is enabled. Configure the scroll percentage and shopper targeting for this state. Learn more about How to set up the Add to Cart Widget in Customer Hub.

When you’ve finished customizing the widget and any additional states, click Publish to save your changes. If Customer Hub is live, the changes apply to your website.

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 conflicts with your site’s CSS, you may need custom CSS to address edge cases or apply unique styling, such as custom border radius values.

Apply custom CSS

1. Open the Style tab in the Customer Hub editor.
2. If the code editor is collapsed, click the + button under Custom CSS. Enter your CSS.
3. Click Publish to save your changes. If Customer Hub is live, the CSS applies to your website.

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