> ## 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.
# Guide d'intégration Shopify
**Ce guide vous explique comment installer Kleep sur votre boutique Shopify. Kleep propose trois fonctionnalités principales : un guide des tailles intelligent (Kleep Sizing), des recommandations de produits similaires (Kleep Similar Products) et une recherche produit optimisée (Kleep Search).**
## Vue d'ensemble du processus d'intégration
Voici ce à quoi vous pouvez vous attendre, de la signature du contrat à la mise en production et au-delà. L'intégration de bout en bout prend généralement environ **5 à 6 semaines**.
### Onboarding
Une fois le contrat signé, votre représentant Kleep lance la facturation via GoCardless : [Configurer le prélèvement automatique →](https://pay.gocardless.com/BRT000352V7T67Q).
Un court appel avec votre représentant Kleep pour s'aligner sur le calendrier, les contacts techniques et les éventuelles exigences spécifiques à votre boutique avant le début de l'installation.
Après le lancement, nous vous demanderons de partager quelques informations sur votre entreprise, la facturation, les environnements de boutique et la configuration des retours afin que nous puissions préparer l'intégration.
**[Remplir notre formulaire d'onboarding →](https://ihu3s9tz3r8.typeform.com/to/fYQw9zJ5)**
Cela prend environ 5 minutes. Une fois soumis, notre équipe examinera vos réponses et confirmera les prochaines étapes dans un délai d'un jour ouvrable.
Envoyez-nous l'adresse de votre boutique (par exemple `your-store.myshopify.com`) ainsi que votre code de demande collaborateur afin que nous puissions demander l'accès à votre boutique.
**Plusieurs boutiques Shopify ?** Si vous avez plusieurs instances Shopify (par exemple, différentes régions ou marques), veuillez nous envoyer un code collaborateur pour **chaque boutique** — nous avons besoin d'un code par boutique.
Vous ne savez pas où les trouver ? Dans votre administration Shopify, accédez à **Paramètres → Utilisateurs et permissions** — votre URL `myshopify.com` est affichée en haut, et le **Code de demande collaborateur** est répertorié dans la section *Collaborateurs*. Consultez l'article d'aide Shopify sur les [comptes collaborateurs](https://help.shopify.com/en/manual/your-account/staff-accounts/collaborator-accounts) pour plus de détails.
Nous enverrons une demande d'accès collaborateur depuis notre compte Shopify Partner. Approuvez-la depuis **Paramètres → Utilisateurs et permissions → Collaborateurs** dans votre administration Shopify.
Une fois que nous avons l'accès collaborateur, nous vous enverrons un lien d'installation de l'application **pour chaque boutique**. Vous devrez installer l'application Kleep séparément sur chaque boutique Shopify où vous souhaitez activer Kleep.
Consultez nos positions suggérées pour le bouton « Trouver ma taille » et choisissez celle qui convient le mieux à votre storefront : [Figma de positionnement du CTA →](https://www.figma.com/design/DvsqgNPSjVPVPLjKV2efAY/KLEEP-CTA-POSITIONING-SUGGESTIONS?node-id=0-1\&p=f\&t=92MwlxQkzlfAYyk5-0).
### Installation & tests
Notre équipe duplique votre thème Shopify actuel et installe Kleep sur le doublon, afin que votre storefront en ligne reste intact pendant que vous testez.
Nous vous envoyons un lien de prévisualisation privé pour tester l'intégration de bout en bout et partager vos retours ou les ajustements nécessaires.
Une fois que vous donnez votre accord, nous publions Kleep sur votre thème en ligne.
### Post-intégration
Nous provisionnons des identifiants pour votre équipe afin d'accéder au [Kleep Dashboard](https://dashboard.kleep.ai), où vous pouvez suivre les KPIs de performance de Kleep en temps réel.
Nous activons [Fit Feedback](/fr/dashboard/fit-feedback) dans votre tableau de bord afin que votre équipe puisse affiner les recommandations de taille de Kleep à partir de données de taille réelles.
## 1. Fonctionnalités
Kleep est intégré dans votre boutique via l'installation d'une application personnalisée créée au préalable. Elle permet de :
1. Ajouter notre CTA « Trouver ma taille » sur vos pages produits
2. Personnaliser son interface directement dans l'éditeur de thème
Notre application crée également des flux automatisés de données Produits, Commandes et Retours afin de rester à jour. Ces données sont récupérées quotidiennement.
Lors de l'installation, l'application crée un WebPixel utilisé pour suivre plusieurs métriques à partir desquelles nous calculons le ROI de la solution.
## 2. Fonctionnalité Produits Similaires
Les Produits Similaires suggèrent des produits alternatifs lorsqu'une taille est en rupture de stock. Cette fonctionnalité augmente les conversions en proposant des alternatives pertinentes aux clients.
**Modes d'affichage disponibles**
| Mode | Description |
| ------------------------------------ | ------------------------------------------------------------------ |
| **Popup (auto)** | Popup automatique au survol des tailles (bureau) / bouton (mobile) |
| **Bouton (auto)** | Bouton CTA automatique près du panier en cas de rupture de stock |
| **Boutons personnalisés uniquement** | Vous placez manuellement les boutons via l'éditeur de thème |
| **Popup + personnalisé** | Popup automatique + boutons personnalisés supplémentaires |
| **Bouton + personnalisé** | Bouton automatique + boutons personnalisés supplémentaires |
**Configuration**
**Étape 1 : Choisir le mode d'affichage**
Dans les paramètres Kleep App Embed, trouvez l'option **« Afficher les produits recommandés »** et sélectionnez le mode souhaité dans le menu déroulant.
Sélection du mode Produits Similaires
**Ajout de boutons personnalisés (pour les modes personnalisés)**
Si vous avez choisi un mode avec « personnalisé », vous pouvez ajouter des boutons à des emplacements spécifiques :
1. Accédez au template **Page produit** dans l'éditeur de thème
2. Dans la section souhaitée, cliquez sur **Ajouter un bloc**
3. Cliquez sur l'onglet **Apps** et sélectionnez **« Kleep Similar Button »**
4. Positionnez le bloc où vous le souhaitez et enregistrez
Ajouter le bloc Kleep Similar Button
Les boutons Produits Similaires n'apparaissent que lorsqu'une variante est en rupture de stock. C'est normal si vous ne les voyez pas sur tous les produits.
**Ajouter plusieurs boutons**
Vous pouvez ajouter autant de boutons Produits Similaires que vous le souhaitez sur la page produit. Pour autoriser plusieurs boutons, le widget doit être réglé sur l'un des modes suivants : `custom_buttons`, `popup+custom` ou `button+custom`.
Pour les thèmes OS 2.0 :
* Accédez à **Online Store → Customize**
* Ouvrez le template **Page produit**
* Cliquez sur **Ajouter un bloc → Kleep Similar Button**
* 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.
***
## 3. Fonctionnalité Kleep Search
Kleep Search remplace la recherche native de Shopify par une recherche optimisée avec des filtres de taille et des recommandations personnalisées.
**Étape 1 : Activer la recherche personnalisée**
Dans les paramètres Kleep App Embed, activez l'option **« Activer la recherche personnalisée »**.
Activer la recherche personnalisée
**Étape 2 : Accéder au template de recherche**
Dans l'éditeur de thème, cliquez sur le menu déroulant en haut (par défaut « Page d'accueil ») et sélectionnez **« Recherche »** dans la liste des templates.
Sélectionner le template Recherche
**Étape 3 : Masquer la recherche native**
Dans la section Template, masquez ou supprimez le bloc natif **« Résultats de la recherche »** en cliquant sur l'icône en forme d'œil.
Masquer la recherche native
**Étape 4 : Ajouter le bloc Kleep Search**
Cliquez sur **Ajouter une section**, puis dans l'onglet **Apps**, sélectionnez **« Search »** (kleep-dev).
Ajouter le bloc Kleep Search
**Étape 5 : Configurer les options**
Cliquez sur le bloc Search que vous avez ajouté pour accéder aux paramètres : nombre de résultats, affichage grille/liste, délai de recherche, etc.
Options de configuration de la recherche
## 4. Intégration des retours (optionnel)
Si vous utilisez une plateforme de gestion des retours, Kleep peut intégrer les données de retours pour améliorer les recommandations de taille.
**Fournisseurs de retours pris en charge**
* Global-e
* Aftership
* Fast Return
* Return Go
* Autre (contactez-nous)
**Configuration**
1. Dans le Kleep Dashboard, accédez à **Paramètres → Retours**
2. Sélectionnez votre fournisseur de retours
3. Suivez les instructions spécifiques au fournisseur pour connecter votre compte
Si votre fournisseur n'est pas répertorié, contactez-nous à [support@kleep.ai](mailto:support@kleep.ai) — nous pouvons mettre en place une intégration personnalisée via SFTP ou API.
## 5. Tracking des événements & analytics
Kleep suit automatiquement les interactions des utilisateurs à des fins d'analytics. Assurez-vous que le tracking fonctionne correctement avant la mise en production.
**Événements trackés**
| Événement | Description |
| ------------------------ | --------------------------------------------------------- |
| `kleep_button_click` | L'utilisateur a cliqué sur le bouton du guide des tailles |
| `kleep_drawer_open` | Le drawer du guide des tailles s'est ouvert |
| `kleep_size_recommended` | Une recommandation de taille a été affichée |
| `kleep_add_to_cart` | L'utilisateur a ajouté un produit au panier depuis Kleep |
| `kleep_similar_click` | L'utilisateur a cliqué sur un produit similaire |
**Vérification**
Pour vérifier que les événements se déclenchent correctement :
1. Ouvrez les Outils de développement de votre navigateur (F12)
2. Accédez à l'onglet **Réseau**
3. Filtrez par « kleep »
4. Interagissez avec le bouton du guide des tailles
5. Vous devriez voir des appels API pour chaque événement
**Avant la mise en production :** Assurez-vous qu'au moins 5 événements se déclenchent et que les payloads sont valides. Effectuez un parcours utilisateur complet (clic sur le bouton → recommandation de taille → ajout au panier) pour valider l'intégration.
## 6. Personnalisation CSS
Vous pouvez personnaliser l'apparence des éléments Kleep (boutons, popups, recherche) en ajoutant du CSS personnalisé.
**Où ajouter le CSS**
Dans les paramètres Kleep App Embed, vous trouverez un champ **« Input custom CSS styles »**. Collez votre CSS personnalisé là.
Champ CSS personnalisé
**Exemple de personnalisation**
```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;
}
```
## 7. Environnements multiples
Si vous disposez de plusieurs environnements Shopify (dev, staging, production), vous devez configurer Kleep pour chacun d'eux.
**Configuration pour chaque environnement**
1. **Boutique de production** — Boutique principale, entièrement configurée
2. **Boutiques Staging/Dev** — Pour tester avant de pousser en production
Pour chaque environnement :
1. Installer l'application Kleep
2. Activer l'App Embed
3. Contacter votre CSM Kleep pour lier l'environnement à votre compte
Testez toujours les modifications sur le staging avant de les appliquer en production.
**URLs spécifiques à chaque environnement**
Fournissez à votre CSM Kleep :
* URL de production : `https://www.yourbrand.com`
* URL de staging : `https://staging.yourbrand.com` (si applicable)
* URL de dev : `https://dev.yourbrand.com` (si applicable)
## 7.5 Bouton CTA & Produits Similaires — Guide d'installation complet
Pour la référence technique complète sur l'installation du bouton CTA Kleep et la fonctionnalité Produits Similaires (incluant tout le code Liquid, le schéma des paramètres et la configuration du bouton secondaire), consultez le guide dédié ci-dessous :
[Bouton CTA & Produits Similaires — Guide d'installation complet](/fr/cms/cta-button)
***
## 8. Thèmes Vintage - Configuration du guide des tailles
Les thèmes Vintage (également appelés « legacy » ou créés avant Online Store 2.0) ne prennent pas en charge les App Blocks. L'installation nécessite des modifications du code Liquid.
Cette section nécessite des connaissances en développement Shopify (Liquid).
**Prérequis**
* Accès à l'éditeur de code du thème (**Online Store → Themes → Edit code**)
* L'App Embed Kleep doit être activé dans votre administration Shopify (**Online Store → Themes → Customize → App embeds → Kleep**)
**Étape 1 : Activer l'App Embed**
Dans votre administration Shopify, accédez à **Online Store → Themes → Customize → App embeds** et activez l'application Kleep.
**Étape 2 : Appeler le snippet**
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 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 le schéma des paramètres**
Ajoutez les options suivantes à votre schéma Settings à la fin du fichier de section :
```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
}
```
**Étape 5 : Valider**
Validez les mises à jour dans la zone Personnaliser le thème Shopify. Configurez les visuels dans les paramètres du bloc d'informations produit.
**Optionnel : Bouton secondaire**
Si vous souhaitez ajouter un bouton secondaire, créez un nouveau fichier nommé `kleep-secondary-button.liquid` dans votre dossier `snippets` :
```jsx theme={null}
```
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 %}
```
***
## 9. Thèmes Vintage - Configuration des Produits Similaires
**Étape 1 : Créer le snippet**
Créez un fichier `snippets/kleep-similar-button.liquid` avec 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**
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**
Les thèmes Vintage ne pouvant pas insérer de blocs OS 2.0, le widget doit utiliser l'un des modes suivants :
* `custom_buttons`
* `popup+custom`
* `button+custom`
**Ajouter plusieurs boutons**
Pour créer plusieurs boutons, placez simplement le code du snippet à différents endroits du template produit :
```jsx theme={null}
{% render 'kleep-similar-button' %}
```
Chaque appel au snippet crée un bouton supplémentaire. Chaque bouton n'apparaît automatiquement que lorsque la variante sélectionnée est en rupture de stock.
***
## 10. Traductions (i18n)
Ajoutez les traductions suivantes à vos fichiers de locale du thème.
**Anglais (`en.json`)**
```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"
}
}
}
}
```
**Français (`fr.json`)**
```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"
}
}
}
}
```
**Italien (`it.json`)**
```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"
}
}
}
}
```
**Allemand (`de.json`)**
```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"
}
}
}
}
```
**Espagnol (`es.json`)**
```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"
}
}
}
}
```
**Japonais (`ja.json`)**
```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": "商品を見る"
}
}
}
}
```
**Coréen (`ko.json`)**
```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": "상품 보기"
}
}
}
}
```
**Portugais (`pt.json`)**
```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"
}
}
}
}
```
***
## 11. Référence technique
**Emplacement du CTA sur la PDP**
L'emplacement est défini par des sélecteurs DOM dans `KleepSDK.getConstants()` :
* **`targetProductInfoBlockQueries`** — 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 `
Sélection du mode Produits Similaires
**Ajout de boutons personnalisés (pour les modes personnalisés)**
Si vous avez choisi un mode avec « personnalisé », vous pouvez ajouter des boutons à des emplacements spécifiques :
1. Accédez au template **Page produit** dans l'éditeur de thème
2. Dans la section souhaitée, cliquez sur **Ajouter un bloc**
3. Cliquez sur l'onglet **Apps** et sélectionnez **« Kleep Similar Button »**
4. Positionnez le bloc où vous le souhaitez et enregistrez
Ajouter le bloc Kleep Similar Button
Activer la recherche personnalisée
**Étape 2 : Accéder au template de recherche**
Dans l'éditeur de thème, cliquez sur le menu déroulant en haut (par défaut « Page d'accueil ») et sélectionnez **« Recherche »** dans la liste des templates.
Sélectionner le template Recherche
**Étape 3 : Masquer la recherche native**
Dans la section Template, masquez ou supprimez le bloc natif **« Résultats de la recherche »** en cliquant sur l'icône en forme d'œil.
Masquer la recherche native
**Étape 4 : Ajouter le bloc Kleep Search**
Cliquez sur **Ajouter une section**, puis dans l'onglet **Apps**, sélectionnez **« Search »** (kleep-dev).
Ajouter le bloc Kleep Search
**Étape 5 : Configurer les options**
Cliquez sur le bloc Search que vous avez ajouté pour accéder aux paramètres : nombre de résultats, affichage grille/liste, délai de recherche, etc.
Options de configuration de la recherche
## 4. Intégration des retours (optionnel)
Si vous utilisez une plateforme de gestion des retours, Kleep peut intégrer les données de retours pour améliorer les recommandations de taille.
**Fournisseurs de retours pris en charge**
* Global-e
* Aftership
* Fast Return
* Return Go
* Autre (contactez-nous)
**Configuration**
1. Dans le Kleep Dashboard, accédez à **Paramètres → Retours**
2. Sélectionnez votre fournisseur de retours
3. Suivez les instructions spécifiques au fournisseur pour connecter votre compte
Champ CSS personnalisé
**Exemple de personnalisation**