Shopify V2 Integration Guide

This section show how to add Kleep AI Sizing to your Shopify Store

Overview

Shopify Integration Overview

Tutorial

https://app.tango.us/app/workflow/HOW-TO---Add-the-button-to-the-shop-221b9c3c09a74dcd973cf5e7aa54d99e

Shopify V1 Integration Guide

1. Sizing

This section shows how to add Kleep AI Sizing to your Shopify codebase

Tutorial

https://app.tango.us/app/workflow/-----Install-Kleep-on-your-Shopify-V1-Store-a02522bee9fa4bf78f387a8333850f47

Steps

Make sure that the app is activated in your App embeds

Capture d’écran 2025-08-13 à 14.29.30.png

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

{% render 'kleep-button', cms: section.settings %}

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

Kleep button

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

Add the following options to your Settings schema at the end of the page

Shopify options

{
  "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": "Font du thème",
  "info": "Si coché, la variable css `--font-body-family` est utilisée"
},
{
  "type": "font_picker",
  "id": "font_family",
  "label": "Font Family",
  "default": "helvetica_n4"
},
{
  "type": "select",
  "id": "text_style",
  "label": "Style texte",
  "default": "normal",
  "options": [
    {
      "label": "Normal",
      "value": "normal"
    },
    {
      "label": "Italic",
      "value": "italic"
    },
    {
      "label": "Oblique",
      "value": "oblique"
    }
  ]
},
{
  "type": "select",
  "id": "text_transform",
  "label": "Texte 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": "Poid texte",
  "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": "Taille police",
  "default": 16
},
{
  "type": "checkbox",
  "id": "text_underline",
  "label": "Texte soulignage",
  "default": false
},
{
  "type": "range",
  "id": "text_underline_offset",
  "min": 1,
  "max": 20,
  "step": 1,
  "unit": "px",
  "label": "Offset underline",
  "default": 2
},
{
  "type": "color",
  "id": "text_color",
  "label": "Couleur texte du bouton",
  "default": "#ffffff"
},
{
  "type": "color",
  "id": "bg_color",
  "label": "Couleur fond",
  "default": "#000000"
},
{
  "type": "color",
  "id": "border_color",
  "label": "Couleur bordures",
  "default": "#000000"
},
{
  "type": "range",
  "id": "border_width",
  "min": 0,
  "max": 8,
  "step": 1,
  "unit": "px",
  "label": "Épaisseur bordures",
  "default": 0
},
{
  "type": "header",
  "content": "CSS Styles",
  "info": "Espacements"
},
{
  "type": "checkbox",
  "id": "center",
  "label": "Centrer le bouton",
  "default": false,
  "info": "Cela remplacera le 'Margin horizontal'"
},
{
  "type": "range",
  "id": "margin_y",
  "min": 0,
  "max": 80,
  "step": 2,
  "unit": "px",
  "label": "Margin vertical",
  "default": 0
},
{
  "type": "range",
  "id": "margin_x",
  "min": 0,
  "max": 80,
  "step": 2,
  "unit": "px",
  "label": "Margin horizontal",
  "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": "Bordures arrondies",
  "default": 0
}

For add your own CSS styles:

To change how it looks (colors, spacing, fonts, etc.), paste your CSS into the “Input custom CSS styles” box in the Kleep App Embed settings.

For example:

Add English translations to your theme locales.

Translations

"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"
      }
    }
  }

Add other translations to your theme locales.

fr.json

"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"
      }
    }
  }

it.json

"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"
    }
  }
}

de.json

"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"
    }
  }
}

es.json

"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"
    }
  }
}

ja.json

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

ko.json

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

pt.json

"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"
    }
  }
}

Validate updates in the Shopify Theme Customize area. Configure visuals within product information block settings.
If you want to add secondary button you will need to create a new file named kleep-secondary-button.liquid within your snippets folder. Put the following content inside:

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

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

{% render 'kleep-secondary-button', cms: section.settings %}

2. Similar Products

Install “Similar Products” for V1 Shopify Themes

In this case, you must add a Liquid snippet manually.

Step 1 - Create a snippet

Create: snippets/kleep-similar-button.liquid Insert the following code:

{% assign cms = block.settings %}
{% assign domain = shop.domain %}
{% assign translated_similar = '' %}
{% assign translated_similar_missing = true %}

{%- assign domain_key = domain | prepend: 'www.' | append: '.recommended' -%}
{% assign raw_domain_similar = domain_key | t %}

{% unless raw_domain_similar contains 'Translation missing'
  or raw_domain_similar contains domain
%}
  {% assign translated_similar = raw_domain_similar %}
  {% assign translated_similar_missing = false %}
{% endunless %}

{%- if translated_similar_missing -%}
  {% assign raw_global_similar = 'kleep.recommended.text.btn' | t %}
  {% unless raw_global_similar contains 'Translation missing' %}
    {% assign translated_similar = raw_global_similar %}
    {% assign translated_similar_missing = false %}
  {% endunless %}
{%- endif %}

<button
  type="button"
  class="kleep-similar-btn {{ block.settings.extra_classes }}"
  data-kleep-similar
  data-product-id="{{ product.id }}"
  {% if product.selected_or_first_available_variant %}
    data-variant-id="{{ product.selected_or_first_available_variant.id }}"
  {% endif %}
  style="
    display:none; align-items:center; gap:.5rem;
    {% if block.settings.center %}margin: {{ block.settings.margin_y }}px auto; justify-content:center;{% else %}margin: {{ block.settings.margin_y }}px {{ block.settings.margin_x }}px;{% endif %}
  "
>
  <span>
    {% if cms.custom_text != blank %}
      {{ cms.custom_text }}
    {% else %}
      {% if translated_similar_missing %}
        {{ 'kleep.recommended.text.btn' | t }}
      {% else %}
        {{ translated_similar }}
      {% endif %}
    {% endif %}
  </span>
</button>

Step 2 - Render the snippet inside the product template

Insert this line wherever you want the button to appear:

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

Typical placement: under the variant selectors or near the Add to Cart form.

Step 3 - Enable the correct mode for V1 themes

https://www.notion.so/kleep/Shopify-Integration-Guide-1538bfd3e84980e3b102ede4161d592b?source=copy_link#2c48bfd3e84980a4aadbf7f40c0d7d87 Because V1 themes cannot insert OS2.0 blocks, the widget must use one of:

custom_buttons
popup+custom
button+custom

Install “Similar Products” for V2 (Online Store 2.0) Stores

Modern Shopify themes support app embeds and custom blocks. No code changes are required.

Step 1 — Enable the Kleep App Embed

Go to Online Store → Themes → Customize.
Open the App embeds section.
Enable the Kleep App.
Save the theme.

This activates the core script that manages Similar Products logic.

Next, locate the “Show recommended products”

Step 2 — Select the Similar Products display mode

Inside the Kleep widget configuration, choose how Similar Products should appear on the Product Page:

disabled – completely turns off the feature
popup – automatically adds a popup above variant/size selectors on desktop, and replaces the default button on mobile
button – automatically inserts a CTA button near the Add to Cart area when the selected variant is out of stock
custom_buttons – disables all automatic placement; the merchant must add one or more “Kleep Similar Button” blocks manually
popup+custom – keeps the automatic popup and also enables any custom buttons added in the theme
button+custom – keeps the automatic CTA button and also enables any custom buttons added in the theme

After that, simply save the theme, and it will immediately appear in your store (Product page). Step 3 — Add Custom Buttons (only for custom_buttons, popup+custom, button+custom) If your selected mode includes custom buttons:

Open Online Store → Customize.
Go to the Product page template.
In the desired section, click Add Block.
Select Kleep Similar Button.
Save the theme.

Custom buttons will only appear when the selected variant is out of stock.

Adding Multiple “Similar Products” Buttons (Primary & Secondary)

You can add any number of Similar Products buttons on the Product Page. This works for both OS 2.0 themes and V1 / legacy themes.

Enable a Mode That Supports Custom Buttons

To allow multiple buttons, the widget must be set to one of:

custom_buttons
popup+custom
button+custom

These modes activate manual placement, so merchants can insert as many buttons as needed.

For Online Store 2.0 (Modern Themes)

OS 2.0 themes allow adding buttons visually through the Theme Editor. Steps:

Go to Online Store → Customize
Open the Product page template
Click Add block → Kleep Similar Button
Add the button anywhere you want
Repeat if you want 2+ buttons on the page

Every button automatically appears only when the selected variant is out of stock.

For V1 / Legacy Themes

Legacy themes do not support blocks, but you can render the snippet multiple times. Insert this snippet wherever you want a button: {% render 'kleep-similar-button' %} To create multiple buttons, simply place this code in different areas of the product template. Each snippet call creates an additional button.

Summary

To add multiple Similar Products buttons: Enable any mode with custom buttons → add several OS 2.0 blocks or multiple snippet calls → all buttons work automatically when the variant is out of stock.

CTA Location on PDP The location is defined by DOM selectors inside KleepSDK.getConstants(). targetProductInfoBlockQueries – where the product info is. This is an array of selectors that point 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 CTA 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 CTA. Popup vs. Button (Desktop vs. Mobile) We detect the device type using checkIfMobile(): This function checks the browser’s navigator.userAgent string against a list of mobile devices (e.g., iPhone, Android, iPad).

If desktop, the CTA is displayed as hover popups next to the variant labels.
If mobile, the script replaces hover popups with a single button, since hover interactions do not work on touch screens.

Customization

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

3. Search

Note: You don’t need to change any theme code to set up the Kleep Search in Shopify V1. Open the Theme Editor, turn on the Kleep App Embed, enable Custom Search, then replace the default search block with the Kleep Search block. To change how it looks (colors, spacing, fonts, etc.), paste your CSS into the “Input custom CSS styles” box in the Kleep App Embed settings. All of this things will be discribe below Open Theme Editor Go to Online Store > Themes, find the theme you want to edit, and click Customize. Enable Kleep App Embed Open the App embeds section. Find the Kleep app and switch it on. Enable Custom Search (Optional) In the Kleep settings, enable “Enable custom search”.

Replace Default Search From the theme editor, open the Search template (navigate to the Search page template).

Remove or hide the default search section from the theme.

Add the Kleep Search block (from the Apps tab) and place it where the default search was.

Save the theme changes. The search feature is integrated as a Liquid section within the app, not as a separate Liquid code. Activation is controlled by:

{% if block.settings.kleep_enable_custom_search  and '[kookai.fr](http://kookai.fr/), [gualap.com](http://gualap.com/), [gualap.fr](http://gualap.fr/), [www.molli.com](http://www.molli.com/), [getkleep.myshopify.com](http://getkleep.myshopify.com/)'  contains domain%}

This ensures only specific stores (domains) can enable the search feature.Layout and Styles

Grid vs. list view is toggled only through the products_search_grid_layout setting in the app.

To do this, go to the search you have already added and on the right side you will see the option to configure it

Additional styles (fonts, colors, spacing) are implemented by us in the code, on a per-store basis, if needed.
All functionality is tied to this Liquid section and enabled via kleep_enable_custom_search in the app, not by adding Liquid code to the theme settings.
To change how it looks (colors, spacing, fonts, etc.), paste your CSS into the “Input custom CSS styles” box in the Kleep App Embed settings.

Welcome

CMS

Mobile

Data

Shopify: CTA Button & Similar Products

Shopify V2 Integration Guide

Overview

Tutorial

Shopify V1 Integration Guide

1. Sizing

Tutorial

Steps

2. Similar Products

Install “Similar Products” for V1 Shopify Themes

Step 1 - Create a snippet

Step 2 - Render the snippet inside the product template

Step 3 - Enable the correct mode for V1 themes

Install “Similar Products” for V2 (Online Store 2.0) Stores

Step 1 — Enable the Kleep App Embed

Step 2 — Select the Similar Products display mode

Adding Multiple “Similar Products” Buttons (Primary & Secondary)

Enable a Mode That Supports Custom Buttons

For Online Store 2.0 (Modern Themes)

For V1 / Legacy Themes

Summary

3. Search

Welcome

CMS

Mobile

Data

​Shopify V2 Integration Guide

​Overview

​Tutorial

​Shopify V1 Integration Guide

​1. Sizing

​Tutorial

​Steps

​2. Similar Products

​Install “Similar Products” for V1 Shopify Themes

​Step 1 - Create a snippet

​Step 2 - Render the snippet inside the product template

​Step 3 - Enable the correct mode for V1 themes

​Install “Similar Products” for V2 (Online Store 2.0) Stores

​Step 1 — Enable the Kleep App Embed

​Step 2 — Select the Similar Products display mode

​Adding Multiple “Similar Products” Buttons (Primary & Secondary)

​Enable a Mode That Supports Custom Buttons

​For Online Store 2.0 (Modern Themes)

​For V1 / Legacy Themes

​Summary

​3. Search

Shopify V2 Integration Guide

Overview

Tutorial

Shopify V1 Integration Guide

1. Sizing

Tutorial

Steps

2. Similar Products

Install “Similar Products” for V1 Shopify Themes

Step 1 - Create a snippet

Step 2 - Render the snippet inside the product template

Step 3 - Enable the correct mode for V1 themes

Install “Similar Products” for V2 (Online Store 2.0) Stores

Step 1 — Enable the Kleep App Embed

Step 2 — Select the Similar Products display mode

Adding Multiple “Similar Products” Buttons (Primary & Secondary)

Enable a Mode That Supports Custom Buttons

For Online Store 2.0 (Modern Themes)

For V1 / Legacy Themes

Summary

3. Search