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

> The “Find my size” experience on your product pages

## Overview

AI Sizing adds a **“Find my size”** button to your product pages. Shoppers answer a few quick questions and get an instant size recommendation — the experience runs in the Kleep drawer, on top of your page.

The Kleep app also:

1. Lets you customize the button's UI directly in the Theme Editor
2. Creates automated daily flows of Products, Orders and Returns data to keep recommendations up to date

## Standard installation

The Kleep team installs AI Sizing for you (see the [integration process](/cms/shopify)). Under the hood it uses the Kleep app's theme components — no theme code is modified:

1. The **Kleep App Embed** is enabled (**Online Store → Themes → Customize → App embeds → Kleep**) — it loads the sizing experience.
2. The **Button** app block is placed on the product template (**Add block → Apps**) and styled from the theme editor.

For the complete technical walkthrough (including V1 / legacy themes), see the [AI Sizing — advanced installation guide](/cms/cta-button).

### CSS customization

You can customize the appearance of Kleep elements (buttons, popups, search) by adding custom CSS.

**Where to Add CSS**

In the Kleep App Embed settings, you’ll find an **“Input custom CSS styles”** field. Paste your custom CSS there.

<img src="https://mintcdn.com/kleepai/A9OHiEXCm7A82FUt/images/shopify/Screenshot_2025-08-13_at_13.25.30.png?fit=max&auto=format&n=A9OHiEXCm7A82FUt&q=85&s=ccffae57f877aff1babb42797a3f11ad" alt="Screenshot_2025-08-13_at_13.25.30.png" width="310" height="366" data-path="images/shopify/Screenshot_2025-08-13_at_13.25.30.png" />

Custom CSS Field

**Example Customization**

<Accordion title="Code">
  ```css theme={null}
  .kleep-button {
    all: unset;
    font-style: normal;
    font-size: 1.3rem;
    font-weight: 400;
    text-transform: none;
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    cursor: pointer;
    display: inline-block;
    position: relative;
  }
  ```
</Accordion>

## Manual installation

Use manual installation when your theme doesn't support App Blocks — vintage themes (also called "legacy", created before Online Store 2.0) — or when your team prefers to place Kleep's code directly in the theme instead of using app blocks.

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

**Prerequisites**

* Access to the theme code editor (**Online Store → Themes → Edit code**)
* Kleep App Embed must be enabled in your Shopify admin (**Online Store → Themes → Customize → App embeds → Kleep**)

**Step 1: Enable the App Embed**

In your Shopify admin, go to **Online Store → Themes → Customize → App embeds** and toggle on the Kleep app.

**Step 2: Call the Snippet**

Paste the following code where you want Kleep to appear. It must be part of `Product info` block within `snippets` folder:

<Accordion title="Code">
  ```jsx theme={null}
  {% render 'kleep-button', cms: section.settings %}
  ```
</Accordion>

**Step 3: Create the Button Snippet**

Create a new file named `kleep-button.liquid` within your `snippets` folder. Put the following content inside:

<Accordion title="Code">
  ```jsx theme={null}
  <button
    type="button"
    style="display: none;{% if cms.font_family and cms.default_font_family == false %}font-family: '{{ cms.font_family }}' ;{% endif %}font-style: {{ cms.text_style }}; font-size: {{ cms.text_size }}px; font-weight: {{ cms.text_weight }}; text-transform: {{ cms.text_transform }}; color: {{ cms.text_color }}; background-color: {{ cms.bg_color }}; padding: {{ cms.padding_t }}px {{ cms.padding_r }}px {{ cms.padding_b }}px {{ cms.padding_l }}px;{% if cms.center %} margin: {{ cms.margin_y }}px auto;{% else %} margin: {{ cms.margin_y }}px {{ cms.margin_x }}px;{% endif %}; border: {{ cms.border_color }} {{ cms.border_width }}px solid; border-radius: {{ cms.border_radius }}px;"
    class="kleep-button"
    id="kleep-size-button"
    data-product-id="{{ product.id }}"
  >
    <span class="kleep-wrapper-content">
      {% if cms.text_underline %}
        <span
          style="position: absolute; width: calc(100% + 2px); height: 1px; bottom: -{{ cms.text_underline_offset }}px; left: 0; background-color: {{ cms.text_color }};"
        ></span>
      {% endif %}

      {% if cms.image_url != blank %}
        <img
          height="{{ cms.image_size }}"
          width="{{ cms.image_size }}"
          src="{{ cms.image_url }}"
          loading="lazy"
          alt="Kleep button image"
        >
      {% endif %}

      <span class="kleep-btn-text">
        <span class="kleep-default">
          {% if cms.custom_button_text_toggle %}
            {{ cms.custom_find_size_text }}
          {% else %}
            {{ 'blocks.button.text.without_hash' | t }}
          {% endif %}
        </span>
        <span style="display: none;" class="kleep-custom">
          {% if cms.custom_button_text_toggle %}
            {{ cms.custom_recommended_size_text }}{% if localization.language.iso_code == "fr" %}&nbsp;{% endif %}<span class="kleep-colon">:</span>
          {% else %}
            {{ 'blocks.button.text.with_hash' | t }}{% if localization.language.iso_code == "fr" %}&nbsp;{% endif %}<span class="kleep-colon">:</span>
          {% endif %}
          <span class="kleep-custom-res"></span>
        </span>
      </span>
    </span>

    <span
      style="display: none; color: {{ cms.text_color }}; border-top-color: {{ cms.text_color }};"
      class="kleep-spinner"
      id="size-spinner"
    ></span>
  </button>
  ```
</Accordion>

**Step 4: Add Settings Schema**

Add the following options to your Settings schema at the end of the section file:

<Accordion title="Code">
  ```json theme={null}
  {
    "type": "header",
    "content": "Button text",
        "info": "If you enable this feature, the button text you enter will be replaced for all languages in your store"
      },
      {
        "type": "checkbox",
        "default": false,
        "id": "custom_button_text_toggle",
        "label": "Enable custom button text"
      },
      {
        "type": "text",
        "id": "custom_find_size_text",
        "label": "Find my best size text",
        "info": "What text will display instead of\"Find my best size\"?"
      },
      {
        "type": "text",
        "id": "custom_recommended_size_text",
        "label": "Recommended size text",
        "info": "What text will display instead of\"Recommended size\"?"
      },
      {
        "type": "header",
        "content": "Image"
      },
      {
        "type": "url",
        "id": "image_url",
        "label": "Url Image"
      },
      {
        "type": "range",
        "id": "image_size",
        "min": 0,
        "max": 80,
        "step": 2,
        "unit": "px",
        "label": "Image size (square)",
        "default": 20
      },
      {
        "type": "header",
        "content": "CSS Styles"
      },
      {
        "type": "checkbox",
        "default": true,
        "id": "default_font_family",
        "label": "Theme font",
        "info": "If checked, the css variable `--font-body-family` is used"
      },
      {
        "type": "font_picker",
        "id": "font_family",
        "label": "Font Family",
        "default": "helvetica_n4"
      },
      {
        "type": "select",
        "id": "text_style",
        "label": "Text style",
        "default": "normal",
        "options": [
          { "label": "Normal", "value": "normal" },
          { "label": "Italic", "value": "italic" },
          { "label": "Oblique", "value": "oblique" }
        ]
      },
      {
        "type": "select",
        "id": "text_transform",
        "label": "Text transformation",
        "default": "none",
        "options": [
          { "label": "Normal", "value": "none" },
          { "label": "Capitalize", "value": "capitalize" },
          { "label": "Uppercase", "value": "uppercase" },
          { "label": "Lowercase", "value": "lowercase" }
        ]
      },
      {
        "type": "select",
        "id": "text_weight",
        "label": "Text weight",
        "default": "400",
        "options": [
          { "label": "100", "value": "100" },
          { "label": "200", "value": "200" },
          { "label": "300", "value": "300" },
          { "label": "400", "value": "400" },
          { "label": "500", "value": "500" },
          { "label": "600", "value": "600" },
          { "label": "700", "value": "700" },
          { "label": "800", "value": "800" },
          { "label": "900", "value": "900" }
        ]
      },
      {
        "type": "range",
        "id": "text_size",
        "min": 2,
        "max": 50,
        "step": 2,
        "unit": "px",
        "label": "Font size",
        "default": 16
      },
      {
        "type": "checkbox",
        "id": "text_underline",
        "label": "Text underline",
        "default": false
      },
      {
        "type": "range",
        "id": "text_underline_offset",
        "min": 1,
        "max": 20,
        "step": 1,
        "unit": "px",
        "label": "Underline offset",
        "default": 2
      },
      {
        "type": "color",
        "id": "text_color",
        "label": "Button text color",
        "default": "#ffffff"
      },
      {
        "type": "color",
        "id": "bg_color",
        "label": "Background color",
        "default": "#000000"
      },
      {
        "type": "color",
        "id": "border_color",
        "label": "Border color",
        "default": "#000000"
      },
      {
        "type": "range",
        "id": "border_width",
        "min": 0,
        "max": 8,
        "step": 1,
        "unit": "px",
        "label": "Border width",
        "default": 0
      },
      {
        "type": "header",
        "content": "Spacing"
      },
      {
        "type": "checkbox",
        "id": "center",
        "label": "Center the button",
        "default": false,
        "info": "This will override 'Horizontal margin'"
      },
      {
        "type": "range",
        "id": "margin_y",
        "min": 0,
        "max": 80,
        "step": 2,
        "unit": "px",
        "label": "Vertical margin",
        "default": 0
      },
      {
        "type": "range",
        "id": "margin_x",
        "min": 0,
        "max": 80,
        "step": 2,
        "unit": "px",
        "label": "Horizontal margin",
        "default": 0
      },
      {
        "type": "range",
        "id": "padding_t",
        "min": 0,
        "max": 40,
        "step": 2,
        "unit": "px",
        "label": "Padding top",
        "default": 12
      },
      {
        "type": "range",
        "id": "padding_r",
        "min": 0,
        "max": 40,
        "step": 2,
        "unit": "px",
        "label": "Padding right",
        "default": 16
      },
      {
        "type": "range",
        "id": "padding_b",
        "min": 0,
        "max": 40,
        "step": 2,
        "unit": "px",
        "label": "Padding bottom",
        "default": 12
      },
      {
        "type": "range",
        "id": "padding_l",
        "min": 0,
        "max": 40,
        "step": 2,
        "unit": "px",
        "label": "Padding left",
        "default": 16
      },
      {
        "type": "range",
        "id": "border_radius",
        "min": 0,
        "max": 40,
        "step": 2,
        "unit": "px",
        "label": "Border radius",
        "default": 0
      }
  ```
</Accordion>

**Step 5: Validate**

Validate updates in the Shopify Theme Customize area. Configure visuals within product information block settings.

**Optional: Secondary Button**

If you want to add a secondary button, create a new file named `kleep-secondary-button.liquid` within your `snippets` folder:

<Accordion title="Code">
  ```jsx theme={null}
  <div class="kleep-secondary-button-box">
      <button
                  type="button"
                  style="{% if cms.kleep_font_family and cms.kleep_default_font_family == false %}font-family: '{{ cms.kleep_font_family }}' ;{% endif %}font-style: {{ cms.kleep_text_style }}; font-size: {{ cms.kleep_text_size }}px; font-weight: {{ cms.kleep_text_weight }}; text-transform: {{ cms.kleep_text_transform }}; color: {{ cms.kleep_text_color }}; background-color: {{ cms.kleep_bg_color }}; {% if cms.kleep_center %} margin: {{ cms.kleep_margin_y }}px auto;{% else %} margin: {{ cms.kleep_margin_y }}px {{ cms.kleep_margin_x }}px;{% endif %}; border: {{ cms.kleep_border_color }} {{ cms.kleep_border_width }}px solid; border-radius: {{ cms.kleep_border_radius }}px;"
                  class="kleep-secondary-button"
                  onclick="kleep_cta();"
                  data-product-id="{{ product.id }}"
          >
          <span class="kleep-wrapper-content">
            {% if cms.kleep_text_underline %}
                <span style="position: absolute; width: calc(100% + 2px); height: 1px; bottom: -{{ cms.kleep_text_underline_offset }}px; left: 0; background-color: {{ cms.kleep_text_color }};"></span>
            {% endif %}
      
              {% if cms.kleep_image_url != blank %}
                  <img height="{{ cms.kleep_image_size }}" width="{{ cms.kleep_image_size }}" src="{{ cms.kleep_image_url }}"
                       loading="lazy" alt="Kleep button image">
              {% endif %}
      
            <span class="kleep-secondary-btn-text">
              <span class="kleep-secondary-default">
                {{ 'kleep.button.text.without_hash' | t }}
              </span>
              <span style="display: none;" class="kleep-secondary-custom">
                {{ 'kleep.button.text.with_hash' | t }}:
                <span class="kleep-secondary-custom-res"></span>
              </span>
            </span>
          </span>
      
              <span
                      style="display: none; color: {{ cms.kleep_text_color }}; border-top-color: {{ cms.kleep_text_color }};"
                      class="kleep-secondary-spinner"
              ></span>
          </button>
      </div>
  ```
</Accordion>

Paste the following code where you want Kleep to appear. It must be part of `Product info` block within `snippets` folder.

<Accordion title="Code">
  ```jsx theme={null}
  {% render 'kleep-secondary-button', cms: section.settings %}
  ```
</Accordion>

## Translations (i18n)

These translations are required for **manual installations** (they also cover the Similar Products button labels).

Add the following translations to your theme locale files.

**English (`en.json`)**

<Accordion title="Code">
  ```json theme={null}
  {
    "kleep": {
      "button": {
        "text": {
          "without_hash": "Find my ideal size",
          "with_hash": "Ideal size"
            }
          },
          "recommended": {
            "text": {
              "btn": "View similar",
              "hint": "Size unavailable",
              "link": "See similar products"
            }
          },
          "search": {
            "text": {
              "inputPlaceholder": "Search...",
              "productsBlockTitle": "Products",
              "clearButton": "Clear"
            }
          },
          "searchPage": {
            "text": {
              "header": "search results",
              "query": "Results for",
              "submit": "Search",
              "input": "Search the store",
              "viewProduct": "View product"
            }
          }
        }
      }
  ```
</Accordion>

**French (`fr.json`)**

<Accordion title="Code">
  ```json theme={null}
  {
    "kleep": {
      "button": {
        "text": {
          "without_hash": "Trouver ma taille idéale",
          "with_hash": "Taille idéale"
            }
          },
          "recommended": {
            "text": {
              "btn": "Voir similaire",
              "hint": "Taille indisponible",
              "link": "Voir des produits similaires"
            }
          },
          "search": {
            "text": {
              "inputPlaceholder": "Recherche...",
              "productsBlockTitle": "Produits",
              "clearButton": "Effacer"
            }
          },
          "searchPage": {
            "text": {
              "header": "résultats de la recherche",
              "query": "Résultats pour",
              "submit": "Recherche",
              "input": "Rechercher dans la boutique",
              "viewProduct": "Voir le produit"
            }
          }
        }
      }
  ```
</Accordion>

**Italian (`it.json`)**

<Accordion title="Code">
  ```json theme={null}
  {
    "kleep": {
      "button": {
        "text": {
          "without_hash": "Trova la mia taglia ideale",
          "with_hash": "Taglia ideale"
        }
      },
      "recommended": {
        "text": {
          "btn": "Visualizza simili",
          "hint": "Taglia non disponibile",
          "link": "Visualizza prodotti simili"
        }
      },
      "search": {
        "text": {
          "inputPlaceholder": "Cerca...",
          "productsBlockTitle": "Prodotti",
          "clearButton": "Cancella"
        }
      },
      "searchPage": {
        "text": {
          "header": "risultati della ricerca",
          "query": "Risultati per",
          "submit": "Cerca",
          "input": "Cerca nel negozio",
          "viewProduct": "Visualizza prodotto"
        }
      }
    }
  }
  ```
</Accordion>

**German (`de.json`)**

<Accordion title="Code">
  ```json theme={null}
  {
    "kleep": {
      "button": {
        "text": {
          "without_hash": "Finde meine ideale Größe",
          "with_hash": "Ideale Größe"
        }
      },
      "recommended": {
        "text": {
          "btn": "Ähnliche Ansicht",
          "hint": "Größe nicht verfügbar",
          "link": "Ähnliche Produkte ansehen"
        }
      },
      "search": {
        "text": {
          "inputPlaceholder": "Suchen...",
          "productsBlockTitle": "Produkte",
          "clearButton": "Klar"
        }
      },
      "searchPage": {
        "text": {
          "header": "Suchergebnisse",
          "query": "Ergebnisse für",
          "submit": "Suchen",
          "input": "Durchsuchen Sie den Shop",
          "viewProduct": "Produkt ansehen"
        }
      }
    }
  }
  ```
</Accordion>

**Spanish (`es.json`)**

<Accordion title="Code">
  ```json theme={null}
  {
    "kleep": {
      "button": {
        "text": {
          "without_hash": "Encontrar mi talla ideal",
          "with_hash": "Talla ideal"
        }
      },
      "recommended": {
        "text": {
          "btn": "Ver similares",
          "hint": "Talla no disponible",
          "link": "Ver productos similares"
        }
      },
      "search": {
        "text": {
          "inputPlaceholder": "Buscar...",
          "productsBlockTitle": "Productos",
          "clearButton": "Borrar"
        }
      },
      "searchPage": {
        "text": {
          "header": "resultados de búsqueda",
          "query": "Resultados para",
          "submit": "Buscar",
          "input": "Buscar en la tienda",
          "viewProduct": "Ver producto"
        }
      }
    }
  }
  ```
</Accordion>

**Japanese (`ja.json`)**

<Accordion title="Code">
  ```json theme={null}
  {
    "kleep": {
      "button": {
        "text": {
          "without_hash": "自分に合うサイズを探す",
          "with_hash": "好みのサイズ"
        }
      },
      "recommended": {
        "text": {
          "btn": "類似商品を見る",
          "hint": "サイズがありません",
          "link": "類似商品を見る"
        }
      },
      "search": {
        "text": {
          "inputPlaceholder": "検索...",
          "productsBlockTitle": "商品",
          "clearButton": "クリア"
        }
      },
      "searchPage": {
        "text": {
          "header": "検索結果",
          "query": "検索結果",
          "submit": "検索",
          "input": "ストアを検索",
          "viewProduct": "商品を見る"
        }
      }
    }
  }
  ```
</Accordion>

**Korean (`ko.json`)**

<Accordion title="Code">
  ```json theme={null}
  {
    "kleep": {
      "button": {
        "text": {
          "without_hash": "내 이상적인 사이즈 찾기",
          "with_hash": "추천 사이즈"
        }
      },
      "recommended": {
        "text": {
          "btn": "유사한 상품 보기",
          "hint": "사용 불가",
          "link": "유사한 상품 보기"
        }
      },
      "search": {
        "text": {
          "inputPlaceholder": "검색...",
          "productsBlockTitle": "상품",
          "clearButton": "지우기"
        }
      },
      "searchPage": {
        "text": {
          "header": "검색 결과",
          "query": "다음에 대한 결과",
          "submit": "검색",
          "input": "매장 검색",
          "viewProduct": "상품 보기"
        }
      }
    }
  }
  ```
</Accordion>

**Portuguese (`pt.json`)**

<Accordion title="Code">
  ```json theme={null}
  {
    "kleep": {
      "button": {
        "text": {
          "without_hash": "Encontrar meu tamanho ideal",
          "with_hash": "Tamanho recomendado"
        }
      },
      "recommended": {
        "text": {
          "btn": "Ver similar",
          "hint": "Tamanho indisponível",
          "link": "Ver produtos similares"
        }
      },
      "search": {
        "text": {
          "inputPlaceholder": "Pesquisar...",
          "productsBlockTitle": "Produtos",
          "clearButton": "Limpar"
        }
      },
      "searchPage": {
        "text": {
          "header": "resultados da pesquisa",
          "query": "Resultados para",
          "submit": "Pesquisar",
          "input": "Pesquisar na loja",
          "viewProduct": "Ver produto"
        }
      }
    }
  }
  ```
</Accordion>

## Technical reference

**AI Sizing button location on PDP**

The location is defined by DOM selectors inside `KleepSDK.getConstants()`:

* **`targetProductInfoBlockQueries`** – Array of selectors pointing to the main container of product details (title, price, sizes, etc.). The script iterates through these selectors and uses the first one it finds as the insertion point for the AI Sizing button or popups.
* **`targetVariantQueries`** – Where size/variant options are. Once the product info block is found, the script searches inside it for variant elements (like size selectors). Each variant `<label>` (or equivalent) becomes a target for attaching the popup button.

**Popup vs. Button (Desktop vs. Mobile)**

Device type is detected using `checkIfMobile()`:

This function checks the browser’s `navigator.userAgent` string against a list of mobile devices (e.g., iPhone, Android, iPad).

* **Desktop**: The button is displayed as hover popups next to the variant labels
* **Mobile**: The script replaces hover popups with a single button, since hover interactions do not work on touch screens

**Product Reference Configuration**

Kleep uses product references to match products across your catalog. Configure how to identify them:

**Reference Field:** Where to find the brand’s product reference

* Shopify SKU field
* Metafield (specify which one)
* Tags (with prefix, e.g., `ref:ABC123`)

**Master Product Extraction:** How to derive the master product ID from variant SKUs

* Example: If variant SKUs are `ABC123-S`, `ABC123-M`, `ABC123-L`, the master product reference is `ABC123`
* Rule: Take first 6 characters / Split by  and take first part / Custom regex

Configure this in **Kleep Dashboard → Settings → Product References**.

**Customization Notes**

* Other variants of placement/layout are not provided beyond adjusting the selectors and CSS
* To change appearance (colors, spacing, fonts, etc.), paste your CSS into the **“Input custom CSS styles”** box in the Kleep App Embed settings

## Troubleshooting

**The button doesn’t appear**

* ☑️ Verify that the Kleep App Embed is enabled (toggle ON)
* ☑️ Make sure you saved the theme changes
* ☑️ Clear your browser cache and reload the page
* ☑️ Check that the product has size variants configured

**Data mapping issues**

* ☑️ Check that your product data contains the expected fields (tags, metafields, etc.)
* ☑️ Verify mappings in **Kleep Dashboard → Settings → Data Mapping**
* ☑️ Re-run the product scan to refresh detected values

Still stuck? Contact [support@kleep.ai](mailto:support@kleep.ai).