How to Create a Personalized Onsite Banner

In this article:

• Understanding personalized onsite banners
• Design your banner
• Configure settings and targeting
• The onsite experience

Understanding personalized onsite banners

Personalized onsite banners allow you to greet visitors with highly visible, targeted messages directly at the top of your website—with zero code or manual installation required.

Because banners use the power of Klaviyo segments and profile data, you can move beyond generic announcements. Use onsite banners to:

• Show targeted offers: Display clear calls-to-action (CTAs) for specific promotions to drive conversions.
• Make marketing announcements: Alert all visitors to a new sale or product drop immediately upon arrival.
• Recognize VIPs: Greet your best customers by name and display their current loyalty point balance so they feel valued and ready to shop.

Before you begin, set up Customer Hub for your store. You need access to its paid features and permission to edit Customer Hub. Onsite banners are not available for Salesforce Commerce Cloud.

For Shopify setup instructions, see Getting started with Customer Hub on Shopify.

Design your banner

To build a new onsite banner, you will define both its content and its styling.

1. Navigate to Website > Customer Hub > Design.
2. In the Banner section, click Create banner. If you see a Banner tile instead, select it.

3. If your editor has Content and Style tabs, open Content and enter a Banner name and Message name under Klaviyo settings. If your editor opens with General settings, enter a Banner name, then click the banner in the preview to open Display.

Choose names you can keep: banner and message names cannot be changed after creation.

1. Enter your message and choose how shoppers can click the banner:
   • Banner text: The main message of your banner. You can include profile variables (like first name or point balance) to personalize the greeting.
   • Banner link type: Choose Whole banner clickable, Link only, or No Link.
   • Link text: Enter the text for your call-to-action when you choose Link only. This field is required for that option.
   • Redirect link: Enter the destination URL for Whole banner clickable or Link only. This field is required for both options.
2. Open Style to customize the look and feel to match your brand. If your editor uses General settings, click Back to general settings to find these controls:
   • Banner background (or Background color in General)
   • Banner font and Banner text color (or Text color in General)
   • Link text color (or Link color in General). By default, the link uses your text color and is underlined.

Configure settings and targeting

Once your banner looks the way you want it to, you need to define how it behaves and who will see it.

1. In Style (or General settings), configure the banner’s appearance:
   • Stay sticky: Turn this on if you want the banner to stay pinned to the top of the screen as the user scrolls. This is off by default.
   • Dismissible: Turn this on if you want visitors to be able to close the banner. This is on by default.
2. To further target the banner, find Group based visibility in Content. If your editor uses General settings, click the banner in the preview, then select Targeting.
   • Show to: Select the lists or segments whose shoppers should see the banner.
   • Don't show to: Select the lists or segments to exclude. If a shopper matches both audiences, they are excluded.
3. Choose the banner’s Visibility in Content. If your editor uses General settings, click Back to general settings and choose Banner visibility. Choose from:
   • All shoppers: Show the banner to visitors regardless of whether they are logged in or recognized.
   • Logged in shoppers only: Show the banner only to shoppers who are logged in.
   • Logged in or recognized shoppers: Show the banner to shoppers who are logged in or whom Klaviyo recognizes from previous visits.
   • Hidden: Keep the banner hidden from shoppers.

If you use personalization tags, choose Logged in shoppers only or Logged in or recognized shoppers. Personalization tags are not compatible with All shoppers.

1. Review your banner in the preview, then click Publish. Wait for the confirmation that your changes have been saved.

Content

Targeting

The onsite experience

Once published with a visibility setting other than Hidden, your banner will load at the top of your website for visitors who meet your targeting criteria. There may be a slight delay from when you publish your banner and when it will appear on your website.

If you enabled the dismissal setting, visitors can close the banner. Klaviyo will persist this dismissal state per user and browser, ensuring they aren't repeatedly shown a banner they have already closed.