Add onsite content blocks to your Shopify store

Learn how to create an onsite content block in Customer Hub and display it on your Shopify storefront. Onsite content blocks let you surface personalized messaging, promotions, and calls to action directly on your storefront while leveraging Klaviyo's targeting and personalization features.

Before you begin

Before creating an onsite content block, make sure that:

• Customer Hub is enabled for your store.
• You're using a Shopify theme that supports the Klaviyo Content Block theme app block.
• If you plan to use personalization tags (for example, a customer's first name), your content block targets Logged in shoppers. Personalization is only available when Klaviyo can identify the shopper.

Create an onsite content block

1. In Klaviyo, navigate to Customer Hub > Design.
2. Scroll to the Onsite content blocks section.
3. Click Create block.
4. Choose one of the following:
   • Import an existing drawer content block.
   • Start with a template from the Klaviyo content block library.
   • Create a new content block.
5. Design your content by adding:
   • Headline and body text
   • Images (optional)
   • Buttons or links
   • Personalization tags, such as a customer's first name
6. Configure your button or link destination. To direct shoppers to Customer Hub, select the Customer Hub coupons destination.
7. Enter an Internal name. This name is used for identification and translations and is not visible to shoppers.
8. Choose the audience that should see the block using the Targeting settings.
9. Adjust the appearance of the block, including dimensions and styling, as needed.
10. Click Publish.

After publishing, Klaviyo generates a unique Content Block ID (UUID). You'll use this ID when adding the block to your Shopify theme.

Important: If your content includes personalization tags, update the visibility to Logged in shoppers before publishing. Personalization isn't available for anonymous visitors.

Add the content block to your Shopify theme

Once you've published your content block:

1. In Klaviyo, copy the Content Block ID (UUID).
2. In Shopify, navigate to Online Store > Themes.
3. Click Customize to open the Theme Editor.
4. Open the template where you want the content block to appear (for example, your Product page template).
5. Click Add block.
6. Select Klaviyo Content Block.
7. Paste the Content Block ID into the Content Block ID field.
8. Move the block to your preferred location within the page layout.
9. Click Save.

The content block will now render anywhere you've placed the Klaviyo Content Block app block.

Preview and test your content block

If your content block is configured for Logged in shoppers, it won't appear in the Shopify Theme Editor preview unless you're viewing the site as a recognized logged-in customer.

To verify placement before publishing:

1. Temporarily change the content block visibility to All shoppers.
2. Preview your storefront to confirm the placement and styling.
3. Once you're satisfied, change the visibility back to Logged in shoppers (if using personalization).
4. Republish the content block if necessary.

Note: While previewing as All shoppers, personalization tags won't render with customer data. They're only populated for recognized logged-in shoppers.

Example use cases

Onsite content blocks can be used to:

• Promote product-specific offers on product pages.
• Display exclusive coupons for VIP customers.
• Highlight loyalty or rewards benefits.
• Personalize promotional messages using customer profile properties.
• Direct shoppers to Customer Hub to redeem coupons or view personalized offers.

How it works

When a shopper visits a page containing a Klaviyo Content Block:

• Klaviyo retrieves the published content using the Content Block ID.
• Targeting rules determine whether the shopper should see the content.
• If the shopper is recognized, personalization tags are populated using their Klaviyo profile.
• Links configured to open Customer Hub take shoppers directly to the relevant experience, such as their available coupons.

This allows you to create dynamic, reusable promotional content without modifying your Shopify theme each time your messaging changes.