Similar Products

Prerequisites — before implementing Similar Products, complete the Cookie consent and Installation steps on the JS Library page. Kleep must not load until the visitor has consented via your CMP, and the library must be loaded site-wide.

Similar Products is available on demand and is not linked to sizing. If you’re unsure whether this feature is enabled for your account, contact your Kleep representative.

What Similar Products does

When a size on a product page is out of stock, Similar Products displays a View similar CTA. Clicking it opens the Kleep drawer with relevant alternatives the shopper is likely to buy — an on-page cross-sell that recovers otherwise-lost conversions.

Kleep View similar CTA rendered on a JOTT product page — The "View similar" CTA on a product page (JOTT)

Kleep drawer showing similar-product alternatives on JOTT — The drawer that opens when a shopper taps "View similar" (JOTT)

CTA display options

You can render the CTA in two ways:

Option 1 — Fixed CTA: a solid, always-visible button on the PDP (like the example above).
Option 2 — Hover CTA: a button that appears when the shopper hovers an out-of-stock size selector.

Kleep View similar CTA revealed when hovering an out-of-stock size selector — Option 2: the CTA appears when hovering an out-of-stock size

Pick based on your product page layout. If your size menu is a dropdown (rather than a list of hoverable elements), Option 1 is the natural fit. For mobile, always prefer Option 1 — hover isn’t reliable on touch devices. You can enable both — Option 1 on mobile and Option 2 on desktop, for example.

How to implement

Step 1: Choose your option(s) Decide whether you want the fixed CTA (Option 1), the hover CTA (Option 2), or both. Step 2: Configure Option 1 (Fixed CTA) Add a button element where you want the CTA to render:

<button id="kleep-sp-fixed"></button>

Then update your kleep.load call with a selectors.similarProducts.fixed entry:

kleep.load({
  // ...existing params
  selectors: {
    sizing: "#kleep-container",
    similarProducts: {
      fixed: "#kleep-sp-fixed"
    }
  }
})

Step 3: Configure Option 2 (Hover CTA) Add the kleep-sp-hover class to each of your size selector elements and set data-variant-id to the corresponding variant ID:

<ul>
  <li class="kleep-sp-hover" data-variant-id="variant-XS">XS</li>
  <li class="kleep-sp-hover" data-variant-id="variant-S">S</li>
  <li class="kleep-sp-hover" data-variant-id="variant-M">M</li>
  <li class="kleep-sp-hover" data-variant-id="variant-L">L</li>
  <li class="kleep-sp-hover" data-variant-id="variant-XL">XL</li>
</ul>

Then update your kleep.load call:

kleep.load({
  // ...existing params
  selectors: {
    sizing: "#kleep-container",
    similarProducts: {
      hover: ".kleep-sp-hover"
    }
  }
})

Build your own CTA with `kleep.showSimilarProducts`

If neither preset fits your layout, call kleep.showSimilarProducts(variantId) directly to open the drawer from any element you control:

<div id="showSimilarProductsButton"></div>

<script>
  document.querySelector("#showSimilarProductsButton").addEventListener("click", function () {
    const variantId = 123456789;
    kleep.showSimilarProducts(variantId);
  });
</script>

The method takes a single variantId and opens the Kleep similar-products drawer for that variant.

Cookies & data privacy

Kleep is fully gated by visitor consent: the script only loads after consent is collected through your CMP, and you must condition its loading accordingly. For the complete list of trackers, the data processed, the purposes and legal bases, hosting, subprocessors and security, see Cookies, CMP & Data Privacy.

Welcome

CMS

Mobile

Dashboard

Data

Privacy

What Similar Products does

CTA display options

How to implement

Build your own CTA with `kleep.showSimilarProducts`

Cookies & data privacy

​What Similar Products does

​CTA display options

​How to implement

​Build your own CTA with kleep.showSimilarProducts

​Cookies & data privacy

What Similar Products does

CTA display options

How to implement

Build your own CTA with `kleep.showSimilarProducts`

Cookies & data privacy