> ## 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.
# Shopify : Bouton CTA & Produits Similaires
## Guide d'intégration Shopify V2
Cette section montre comment ajouter Kleep AI Sizing à votre boutique Shopify.
Suivez notre tutoriel Tango pour ajouter le bouton Kleep à votre boutique sur les thèmes Online Store 2.0.
## Guide d'intégration Shopify V1
## 1. Guide des tailles
Cette section montre comment ajouter Kleep AI Sizing à votre codebase Shopify.
Regardez le tutoriel Tango étape par étape pour installer Kleep sur une boutique Shopify V1.
### Étapes
**Étape 1 : Activer l'App Embed**
Assurez-vous que l'application Kleep est activée dans vos App embeds.
**Étape 2 : Inclure le snippet du bouton**
Collez le code suivant à l'endroit où vous souhaitez que Kleep apparaisse. Il doit faire partie du bloc `Product info` dans le dossier `snippets`.
```jsx theme={null}
{% render 'kleep-button', cms: section.settings %}
```
**Étape 3 : Créer le fichier snippet du bouton**
Créez un nouveau fichier nommé `kleep-button.liquid` dans votre dossier `snippets`. Insérez le contenu suivant :
```jsx theme={null}
```
**Étape 4 : Ajouter les options du schéma des paramètres**
Ajoutez les options suivantes à votre schéma Settings à la fin de la page :
```jsx 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": "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
}
```
Pour ajouter vos propres styles CSS :
* Pour modifier l'apparence (couleurs, espacement, polices, etc.), collez votre CSS dans le champ **« Input custom CSS styles »** des paramètres Kleep App Embed.
Par exemple :
**Étape 5 : Ajouter les traductions anglaises**
Ajoutez les traductions anglaises à vos locales de thème.
```jsx 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"
}
}
}
```
**Étape 6 : Ajouter d'autres traductions**
Ajoutez d'autres traductions à vos locales de thème.
```jsx 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"
}
}
}
```
```jsx 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"
}
}
}
```
```jsx 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"
}
}
}
```
```jsx 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"
}
}
}
```
```jsx 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": "商品を見る"
}
}
}
```
```jsx 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": "상품 보기"
}
}
}
```
```jsx 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"
}
}
}
```
1. Validez les mises à jour dans la zone Personnaliser le thème Shopify. Configurez les visuels dans les paramètres du bloc d'informations produit.
2. Si vous souhaitez ajouter un bouton secondaire, vous devrez créer un nouveau fichier nommé `kleep-secondary-button.liquid` dans votre dossier `snippets`. Insérez le contenu suivant :
```
```
Collez le code suivant à l'endroit où vous souhaitez que Kleep apparaisse. Il doit faire partie du bloc `Product info` dans le dossier `snippets`.
```jsx theme={null}
{% render 'kleep-secondary-button', cms: section.settings %}
```
## 2. Produits Similaires
***
### Installer « Produits Similaires » pour les thèmes Shopify V1
Dans ce cas, vous devez ajouter un snippet Liquid manuellement.
### Étape 1 - Créer un snippet
Créez :
`snippets/kleep-similar-button.liquid`
Insérez le code suivant :
```jsx theme={null}
{% 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 %}
```
### Étape 2 - Inclure le snippet dans le template produit
Insérez cette ligne à l'endroit où vous souhaitez que le bouton apparaisse :
```jsx theme={null}
{% render 'kleep-similar-button' %}
```
Emplacement typique : sous les sélecteurs de variantes ou près du formulaire d'ajout au panier.
### Étape 3 - Activer le bon mode pour les thèmes V1
Les thèmes V1 ne pouvant pas insérer de blocs OS2.0, le widget doit utiliser l'un des modes suivants :
* `custom_buttons`
* `popup+custom`
* `button+custom`
### **Installer « Produits Similaires » pour les boutiques V2 (Online Store 2.0)**
Les thèmes Shopify modernes prennent en charge les app embeds et les blocs personnalisés. Aucune modification de code n'est nécessaire.
### Étape 1 — Activer le Kleep App Embed
1. Accédez à **Online Store → Themes → Customize**.
2. Ouvrez la section **App embeds**.
3. Activez l'**application Kleep**.
4. Enregistrez le thème.
Cela active le script principal qui gère la logique des Produits Similaires.
Localisez ensuite **« Afficher les produits recommandés »**
### Étape 2 — Sélectionner le mode d'affichage des Produits Similaires
Dans la configuration du widget Kleep, choisissez comment les Produits Similaires doivent apparaître sur la page produit :
* disabled – désactive complètement la fonctionnalité
* popup – ajoute automatiquement un popup au-dessus des sélecteurs de variantes/taille sur bureau, et remplace le bouton par défaut sur mobile
* button – insère automatiquement un bouton CTA près de la zone d'ajout au panier lorsque la variante sélectionnée est en rupture de stock
* custom\_buttons – désactive tout placement automatique ; le marchand doit ajouter manuellement un ou plusieurs blocs « Kleep Similar Button »
* popup+custom – conserve le popup automatique et active également tous les boutons personnalisés ajoutés dans le thème
* button+custom – conserve le bouton CTA automatique et active également tous les boutons personnalisés ajoutés dans le thème
Ensuite, enregistrez simplement le thème, et il apparaîtra immédiatement dans votre boutique (page produit).
**Étape 3 — Ajouter des boutons personnalisés (uniquement pour custom\_buttons, popup+custom, button+custom)**
Si le mode sélectionné inclut des boutons personnalisés :
1. Ouvrez **Online Store → Customize**.
2. Accédez au template **Page produit**.
3. Dans la section souhaitée, cliquez sur **Ajouter un bloc**.
4. Sélectionnez **Kleep Similar Button**.
5. Enregistrez le thème.
Les boutons personnalisés n'apparaissent que lorsque la variante sélectionnée est en rupture de stock.
## Ajouter plusieurs boutons « Produits Similaires » (Primaire & Secondaire)
Vous pouvez ajouter autant de boutons Produits Similaires que vous le souhaitez sur la page produit.
Cela fonctionne aussi bien pour les thèmes OS 2.0 que pour les thèmes V1 / legacy.
## Activer un mode qui prend en charge les boutons personnalisés
Pour autoriser plusieurs boutons, le widget doit être réglé sur l'un des modes suivants :
* custom\_buttons
* popup+custom
* button+custom
Ces modes activent le placement manuel, permettant aux marchands d'insérer autant de boutons que nécessaire.
## Pour Online Store 2.0 (Thèmes modernes)
Les thèmes OS 2.0 permettent d'ajouter des boutons visuellement via l'éditeur de thème.
Étapes :
* Accédez à Online Store → Customize
* Ouvrez le template Page produit
* Cliquez sur Ajouter un bloc → Kleep Similar Button
* Ajoutez le bouton où vous le souhaitez
* Répétez si vous souhaitez 2+ boutons sur la page
Chaque bouton n'apparaît automatiquement que lorsque la variante sélectionnée est en rupture de stock.
## Pour les thèmes V1 / Legacy
Les thèmes legacy ne prennent pas en charge les blocs, mais vous pouvez inclure le snippet plusieurs fois.
Insérez ce snippet à l'endroit où vous souhaitez un bouton :
`{% render 'kleep-similar-button' %}`
Pour créer plusieurs boutons, placez simplement ce code à différents endroits du template produit.
Chaque appel au snippet crée un bouton supplémentaire.
### Récapitulatif
Pour ajouter plusieurs boutons Produits Similaires :
Activez un mode avec boutons personnalisés → ajoutez plusieurs blocs OS 2.0 ou plusieurs appels au snippet → tous les boutons fonctionnent automatiquement lorsque la variante est en rupture de stock.
***
**Emplacement du CTA sur la PDP**
L'emplacement est défini par des sélecteurs DOM dans `KleepSDK.getConstants().`
`targetProductInfoBlockQueries` – emplacement des informations produit. Il s'agit d'un tableau de sélecteurs pointant vers le conteneur principal des détails du produit (titre, prix, tailles, etc.). Le script itère sur ces sélecteurs et utilise le premier trouvé comme point d'insertion pour le CTA ou les popups.
`targetVariantQueries` – emplacement des options de taille/variante : une fois le bloc d'informations produit trouvé, le script recherche les éléments de variante (comme les sélecteurs de taille) à l'intérieur. Chaque `
**Étape 2 : Inclure le snippet du bouton**
Collez le code suivant à l'endroit où vous souhaitez que Kleep apparaisse. Il doit faire partie du bloc `Product info` dans le dossier `snippets`.
```jsx theme={null}
{% render 'kleep-button', cms: section.settings %}
```
**Étape 3 : Créer le fichier snippet du bouton**
Créez un nouveau fichier nommé `kleep-button.liquid` dans votre dossier `snippets`. Insérez le contenu suivant :
**Étape 5 : Ajouter les traductions anglaises**
Ajoutez les traductions anglaises à vos locales de thème.
Localisez ensuite **« Afficher les produits recommandés »**
### Étape 2 — Sélectionner le mode d'affichage des Produits Similaires
Dans la configuration du widget Kleep, choisissez comment les Produits Similaires doivent apparaître sur la page produit :
* disabled – désactive complètement la fonctionnalité
* popup – ajoute automatiquement un popup au-dessus des sélecteurs de variantes/taille sur bureau, et remplace le bouton par défaut sur mobile
* button – insère automatiquement un bouton CTA près de la zone d'ajout au panier lorsque la variante sélectionnée est en rupture de stock
* custom\_buttons – désactive tout placement automatique ; le marchand doit ajouter manuellement un ou plusieurs blocs « Kleep Similar Button »
* popup+custom – conserve le popup automatique et active également tous les boutons personnalisés ajoutés dans le thème
* button+custom – conserve le bouton CTA automatique et active également tous les boutons personnalisés ajoutés dans le thème
Ensuite, enregistrez simplement le thème, et il apparaîtra immédiatement dans votre boutique (page produit).
**Étape 3 — Ajouter des boutons personnalisés (uniquement pour custom\_buttons, popup+custom, button+custom)**
Si le mode sélectionné inclut des boutons personnalisés :
1. Ouvrez **Online Store → Customize**.
2. Accédez au template **Page produit**.
3. Dans la section souhaitée, cliquez sur **Ajouter un bloc**.
4. Sélectionnez **Kleep Similar Button**.
5. Enregistrez le thème.
Les boutons personnalisés n'apparaissent que lorsque la variante sélectionnée est en rupture de stock.
## Ajouter plusieurs boutons « Produits Similaires » (Primaire & Secondaire)
Vous pouvez ajouter autant de boutons Produits Similaires que vous le souhaitez sur la page produit.
Cela fonctionne aussi bien pour les thèmes OS 2.0 que pour les thèmes V1 / legacy.
## Activer un mode qui prend en charge les boutons personnalisés
Pour autoriser plusieurs boutons, le widget doit être réglé sur l'un des modes suivants :
* custom\_buttons
* popup+custom
* button+custom
Ces modes activent le placement manuel, permettant aux marchands d'insérer autant de boutons que nécessaire.
## Pour Online Store 2.0 (Thèmes modernes)
Les thèmes OS 2.0 permettent d'ajouter des boutons visuellement via l'éditeur de thème.
Étapes :
* Accédez à Online Store → Customize
* Ouvrez le template Page produit
* Cliquez sur Ajouter un bloc → Kleep Similar Button
* Ajoutez le bouton où vous le souhaitez
* Répétez si vous souhaitez 2+ boutons sur la page
Chaque bouton n'apparaît automatiquement que lorsque la variante sélectionnée est en rupture de stock.
## Pour les thèmes V1 / Legacy
Les thèmes legacy ne prennent pas en charge les blocs, mais vous pouvez inclure le snippet plusieurs fois.
Insérez ce snippet à l'endroit où vous souhaitez un bouton :
`{% render 'kleep-similar-button' %}`
Pour créer plusieurs boutons, placez simplement ce code à différents endroits du template produit.
Chaque appel au snippet crée un bouton supplémentaire.
### Récapitulatif
Pour ajouter plusieurs boutons Produits Similaires :
Activez un mode avec boutons personnalisés → ajoutez plusieurs blocs OS 2.0 ou plusieurs appels au snippet → tous les boutons fonctionnent automatiquement lorsque la variante est en rupture de stock.
***
**Emplacement du CTA sur la PDP**
L'emplacement est défini par des sélecteurs DOM dans `KleepSDK.getConstants().`
`targetProductInfoBlockQueries` – emplacement des informations produit. Il s'agit d'un tableau de sélecteurs pointant vers le conteneur principal des détails du produit (titre, prix, tailles, etc.). Le script itère sur ces sélecteurs et utilise le premier trouvé comme point d'insertion pour le CTA ou les popups.
`targetVariantQueries` – emplacement des options de taille/variante : une fois le bloc d'informations produit trouvé, le script recherche les éléments de variante (comme les sélecteurs de taille) à l'intérieur. Chaque `