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, and your account has access to Customer Hub personalization features.
• 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's Visibility is set to Logged in shoppers. The editor prevents publishing personalized blocks with All shoppers or Logged out shoppers visibility.

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:
   • Reuse an existing drawer or onsite content block: under Your blocks, click Add block on the block you want to copy.
   • Start with a template from the Klaviyo content block library: click Add block on a template.
   • Create a new content block: click Build your own.
5. On the Content tab, design your content by adding:
   • A heading in Block header and body text in Block paragraph
   • Images (optional)
   • A link destination (optional)
   • Personalization tags, such as a customer's first name
6. To make the block clickable, enter a destination in the Link field. To open Customer Hub's coupons page, enter #k-hub/coupons and leave Open link in a new tab unchecked. Leave Link blank if the block should only display information.
7. Enter an Internal name. This name is used for identification and translations and is not visible to shoppers. Choose it before publishing. You can't edit it afterward.
8. Set Visibility to choose which shoppers can see the block. To target specific lists or segments, use Show to and Don't Show to under Targeting.
9. On the Style tab, adjust the appearance of the block, including dimensions and styling, as needed.
10. Click Publish.

After publishing, the block's unique ID appears as Block UUID on the Content tab. 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, open the block's Content tab and use the copy control next to Block 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 UUID you copied from Klaviyo into the Content Block ID field.
8. Move the block to your preferred location within the page layout.
9. Click Save.

The content block can now appear wherever you've placed the Klaviyo Content Block app block, for shoppers who match its visibility and targeting settings.

Preview and test your content block

If your content block is configured for Logged in shoppers, test it on your storefront while logged in to a customer account. A preview without a logged-in customer session won't show the block.

To test placement, styling, and personalization:

1. Keep the block's intended Visibility and Targeting settings. If you've changed them, click Publish in Klaviyo before testing.
2. Open the storefront page where you placed the app block. If the block is set to Logged in shoppers, log in to a customer account.
3. Confirm the placement, styling, text, and link destination. If you use list or segment targeting, test with a customer in the intended audience.
4. If you need to make changes, return to Customer Hub > Design, select the block, update it, and click Publish. Refresh the storefront page and test again.

Note: Personalized blocks can't be published with All shoppers or Logged out shoppers visibility. Keep Logged in shoppers selected when testing content that uses personalization tags.

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.
• For a block set to Logged in shoppers, personalization tags are populated using the logged-in shopper's 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.