> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kleep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Similar Products

> Display an out-of-stock cross-sell drawer via the Kleep JS library.

<Note>
  **Prerequisites** — before implementing Similar Products, complete the [Cookie consent](/cms/js-library#1-cookie-consent-legal-requirement) and [Installation](/cms/js-library#2-installation) steps on the [JS Library](/cms/js-library) page. Kleep must not load until the visitor has consented via your CMP, and the library must be loaded site-wide.
</Note>

<Note>
  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.
</Note>

## 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.

<Frame caption="The &#x22;View similar&#x22; CTA on a product page (JOTT)">
  <img src="https://mintcdn.com/kleepai/EPQdLZdKh6wcKcbT/images/js-library/similar-products-cta-example.png?fit=max&auto=format&n=EPQdLZdKh6wcKcbT&q=85&s=6cf6ed12e5d5fb6449cd15006e84d205" alt="Kleep View similar CTA rendered on a JOTT product page" width="719" height="266" data-path="images/js-library/similar-products-cta-example.png" />
</Frame>

<Frame caption="The drawer that opens when a shopper taps &#x22;View similar&#x22; (JOTT)">
  <img src="https://mintcdn.com/kleepai/EPQdLZdKh6wcKcbT/images/js-library/similar-products-drawer-example.png?fit=max&auto=format&n=EPQdLZdKh6wcKcbT&q=85&s=3cd64e28d1aa58f99b911a5e0be32645" alt="Kleep drawer showing similar-product alternatives on JOTT" width="1914" height="934" data-path="images/js-library/similar-products-drawer-example.png" />
</Frame>

## 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.

<Frame caption="Option 2: the CTA appears when hovering an out-of-stock size">
  <img src="https://mintcdn.com/kleepai/EPQdLZdKh6wcKcbT/images/js-library/similar-products-hover-option.png?fit=max&auto=format&n=EPQdLZdKh6wcKcbT&q=85&s=729e2d6e1f8b8cffd31789c3f7ff99c9" alt="Kleep View similar CTA revealed when hovering an out-of-stock size selector" width="510" height="238" data-path="images/js-library/similar-products-hover-option.png" />
</Frame>

<Tip>
  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.
</Tip>

## 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:

```html theme={null}
<button id="kleep-sp-fixed"></button>
```

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

```javascript theme={null}
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:

```html theme={null}
<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:

```javascript theme={null}
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:

```html theme={null}
<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](/cookie-consent).