AI Try-On

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:

In the theme editor, open the Product page template
Click Add block → Apps → “Try on”
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:

Go to Online Store → Themes → Customize → App embeds and enable “Kleep Try-On overlay”
Set your public_id and the gallery container CSS selector (the Kleep team provides the right selector for your theme)
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.

This section requires Shopify development knowledge (Liquid).

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.

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.

Step 2: Create the Button Snippet Create a new file named kleep-vto-button.liquid within your snippets folder:

Code

{% 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 %}

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:

Code

{% render 'kleep-vto-button' %}

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.

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.

Welcome

CMS

Mobile

Dashboard

Data

Privacy

Overview

Standard installation

Manual installation

​Overview

​Standard installation

​Manual installation

Overview

Standard installation

Manual installation