Getting started with onsite product recommendations

You will learn

Learn how to add a personalized product recommendations block directly to product detail pages (PDPs), extending Klaviyo's onsite personalization beyond the Customer Hub drawer. This guide covers what the embedded block does, how to configure and design it, how the feature is rolling out over time, and the technical tradeoffs behind the implementation.

Embedded product recommendations are commerce-platform agnostic by design and can eventually be hosted on any page of your site, with an initial focus on the PDP. For feedback on this feature, contact the Customer Hub product team.

Before you begin

• Requirement: This block requires Customer Hub to be enabled in Klaviyo.
• Platform Support: Available today on Shopify (as a theme app block), Shopify Plus (as an embeddable code snippet), and Salesforce Commerce Cloud (SFRA support only). Support for additional platforms is planned.
• Engine Dependency: Recommendation quality is powered by Klaviyo's recommendation engine. We’re serving recommendations through our next-generation recommendation service — an upgrade from our previous system, which couldn't personalize recommendations for anonymous visitors.

Note: Onsite product recommendations were previously available only in the Hub drawer, and only for logged-in users. This feature brings recommendations out of the Hub drawer and onto the PDP.

What you can do with embedded product recommendations

The embedded product recommendations block lets you surface relevant products directly on your product detail pages so every visitor — known or anonymous — sees something relevant to them.

• Match your site's style: Customize fonts, colors, layout, and button styles so the block feels like a native part of your theme. Add custom CSS classes that target all Customer Hub elements, all embedded blocks, or the recommendations block specifically. Edit the block header (e.g., “Top picks for you” or “You may also like”) and choose a carousel-style layout.
• Personalize recommendations for known visitors: Recommendations are based on what Klaviyo knows about a profile, powered by the Next Gen Product Recommendations (NGPRS) service.
• Show something to every visitor: Anonymous visitors see generic product recommendations by default, sourced from Shopify.
• Load quickly without hurting page performance: The block is designed to load quickly right from the start, without weighing down your page with extra code — so it won't slow down your site or hurt your performance scores.
• Measure engagement and revenue: Every click is tracked as a Clicked Product event and attributed the same way as a click on a product inside the Hub drawer, so you can measure views, clicks, and attributable revenue.
• Keep the experience consistent: Known or identified visitors can see the same recommendations in the Hub drawer and on the PDP.
• Let shoppers save products for later: Shoppers can add a recommended product to their favorites directly from the card or to their carts if they're not ready to buy yet.
• Avoid recommending what's already in the cart: Products already in a shopper's cart are excluded from the recommendations shown to them.

Create a new embedded product recommendations block

This is a new embeddable block — set up the same way as other embedded blocks like Favorites and FAQ, rather than through the broader Embedded Personalization Content Blocks framework.

1. Access the block library:
   1. Navigate to Service > Customer Hub in Klaviyo's left-hand navigation. Click Design > Onsite blocks. Find Product recommendations in the block library and add it to your product page.
2. Configure your recommendation source:
   1. Choose how recommendations will be populated and filtered based on the visitor state:
      1. Logged-in and identified visitors: Klaviyo (default) or Shopify.
      2. Anonymous visitors: Shopify (default, and currently the only option). This source also powers Hub drawer recommendations for anonymous visitors.
      3. Filter out-of-stock products: Toggle On / Off.
      4. Filter products already in the shopper's cart: Toggle On / Off.
3. Design and customize:
   1. Adjust the visual settings so the block feels native to your site:
      1. Elements: Show or hide price (shown by default), favorite buttons (shown by default), add-to-cart buttons (hidden by default), and product variant (hidden by default).
      2. Buttons: Choose a style (rounded, square, curved), color, text color, and text case.
      3. Layout: Set the max width, max products (1–10, default 4), padding (top, left, right, bottom), and margins (between the title and the product row, and between products). Configure image size (width, height) and fit (cover, contain, fill).
      4. Fonts: Select families and sizes for the header font, product name font, price font, and variant font.
      5. Custom CSS: Add classes to target all Customer Hub elements, all embedded blocks, or the recommendations block specifically.

4. Complete platform setup:
   1. Install the block on your e-commerce platform's frontend:
      1. Shopify: Add as an app block through the theme editor.
      2. Shopify Plus: Add as a code snippet (div) for merchants who need theme-level control.
5. Publish:
   1. Save and publish your changes. The block will appear on your live PDP according to the source, filters, and design settings you've configured.

Attribution and Analytics

• Every click on a recommended product is tracked as a Clicked Product event, sourced as “Embedded product recommendation block.”
• Clicks are attributed the same way as a click on a product inside the Hub drawer.
• Klaviyo logs views and clicks so you can track adoption (accounts with at least one live recommendations block), engagement (click-through rate, add-to-cart rate after a click, favorites), and revenue (attributable revenue per 1,000 block impressions, and share of orders with a recommendations-assisted click path).

Style matching

To match your existing theme, the ideal approach is to have Shopify render the product block on Klaviyo's behalf. Shopify won't render blocks inside Klaviyo's app extension with the product's context, though, so instead we create a new section block that renders the product block.