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

# AI Try-On

> Virtual try-on, straight from your product pages

## Overview

AI Try-On lets shoppers see products on themselves. Clicking the **“Try it on”** button opens the virtual try-on experience in a full-screen overlay on top of your product page.

## Standard installation

Two placements are available from the theme editor — no theme code is modified:

**Try-On button block** — a standalone button you position like any other block:

1. In the theme editor, open the **Product page** template
2. Click **Add block → Apps → “Try on”**
3. Set your retailer `public_id` (provided by the Kleep team) in the block settings, and adjust the label and styling

**Try-On overlay embed** — a button anchored on a corner of the product image gallery:

1. Go to **Online Store → Themes → Customize → App embeds** and enable **“Kleep Try-On overlay”**
2. Set your `public_id` and the gallery container CSS selector (the Kleep team provides the right selector for your theme)
3. Choose the corner, offset and styling

## Manual installation

Use manual installation when App Blocks aren't available, or when you prefer to control exactly where the button sits in your theme code.

<Warning>
  This section requires Shopify development knowledge (Liquid).
</Warning>

**Prerequisites**

* The Kleep app installed on your store
* Your Kleep retailer `public_id` (provided by the Kleep team)
* Access to the theme code editor (**Online Store → Themes → Edit code**)

**Step 1: Enable the Try-On App Embed**

In your Shopify admin, go to **Online Store → Themes → Customize → App embeds** and toggle on **"Kleep Try-On overlay"**.

The embed loads the try-on script. When placing the button manually, leave the **"Gallery container selector"** setting empty — otherwise the embed also injects its own button on the product image.

<Note>
  The embed's other settings (corner, offset, z-index, custom CSS class, inline style) only apply to the button the embed injects itself — they are ignored in manual mode, so they can be left as is. Style your manual button directly in the snippet.
</Note>

**Step 2: Create the Button Snippet**

Create a new file named `kleep-vto-button.liquid` within your `snippets` folder:

<Accordion title="Code">
  ```jsx theme={null} theme={null}
  {% assign kleep_vto_public_id = 'YOUR_KLEEP_PUBLIC_ID' %}
  {% assign kleep_vto_label = 'Try it on' %}

  {% if product.id != blank and kleep_vto_public_id != blank %}
    <button
      type="button"
      class="kleep-vto-button"
      data-public-id="{{ kleep_vto_public_id }}"
      data-product-ref="{{ product.id }}"
      data-base="https://vto.kleep.ai"
      style="background: #000000; color: #ffffff; border: 0; padding: 12px 16px; font-size: 16px; border-radius: 0; cursor: pointer;"
    >
      <span class="kleep-vto-button-text">{{ kleep_vto_label }}</span>
    </button>
  {% endif %}
  ```
</Accordion>

Replace `YOUR_KLEEP_PUBLIC_ID` with the `public_id` provided by the Kleep team, and adjust the label and inline styles freely.

**Step 3: Render the Snippet**

Insert this line in your product template where the button should appear:

<Accordion title="Code">
  ```jsx theme={null} theme={null}
  {% render 'kleep-vto-button' %}
  ```
</Accordion>

**How it works**

* The try-on script binds a click handler to every element carrying the `kleep-vto-button` class.
* Clicking the button opens the virtual try-on experience (`vto.kleep.ai`) in a full-screen iframe overlay. Shoppers close it with the ✕ button or the Escape key.
* Keep the `kleep-vto-button` class and the `data-*` attributes unchanged — the script relies on them. Everything else (markup around the button, styling) is yours.

<Note>
  If your team prefers not to use app embeds at all, we can provide a fully self-contained integration package (button snippets + scripts served from your own theme assets). Contact [support@kleep.ai](mailto:support@kleep.ai).
</Note>