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

Contrat signé & facturation configurée

Une fois le contrat signé, votre représentant Kleep lance la facturation via GoCardless : Configurer le prélèvement automatique →.

Réunion de lancement de l'onboarding

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.

Remplir le formulaire d'onboarding

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

Partager votre URL Shopify & votre code collaborateur

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 pour plus de détails.

Accepter notre demande de collaboration

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.

Installer l'application Kleep sur chaque boutique

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.

Choisir l'emplacement du CTA

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

Installation & tests

Nous installons Kleep sur un thème dupliqué

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.

Prévisualisation & retours

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.

Mise en production

Une fois que vous donnez votre accord, nous publions Kleep sur votre thème en ligne.

Post-intégration

Accès au tableau de bord client

Nous provisionnons des identifiants pour votre équipe afin d’accéder au Kleep Dashboard, où vous pouvez suivre les KPIs de performance de Kleep en temps réel.

Fit Feedback activé

Nous activons 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 :

Ajouter notre CTA « Trouver ma taille » sur vos pages produits
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 :

Accédez au template Page produit dans l’éditeur de thème
Dans la section souhaitée, cliquez sur Ajouter un bloc
Cliquez sur l’onglet Apps et sélectionnez « Kleep Similar Button »
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

Dans le Kleep Dashboard, accédez à Paramètres → Retours
Sélectionnez votre fournisseur de retours
Suivez les instructions spécifiques au fournisseur pour connecter votre compte

Si votre fournisseur n’est pas répertorié, contactez-nous à 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 :

Ouvrez les Outils de développement de votre navigateur (F12)
Accédez à l’onglet Réseau
Filtrez par « kleep »
Interagissez avec le bouton du guide des tailles
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

Code

.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

Boutique de production — Boutique principale, entièrement configurée
Boutiques Staging/Dev — Pour tester avant de pousser en production

Pour chaque environnement :

Installer l’application Kleep
Activer l’App Embed
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

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 :

Code

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

Code

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

Étape 4 : Ajouter le schéma des paramètres Ajoutez les options suivantes à votre schéma Settings à la fin du fichier de section :

Code

{
  "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 :

Code

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

Collez le code suivant à l’endroit où vous souhaitez que Kleep apparaisse. Il doit faire partie du bloc Product info dans le dossier snippets.

Code

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

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>

Étape 2 : Inclure le snippet Insérez cette ligne à l’endroit où vous souhaitez que le bouton apparaisse :

Code

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

Code

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

Code

{
  "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)

Code

{
  "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)

Code

{
  "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)

Code

{
  "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)

Code

{
  "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)

Code

{
  "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)

Code

{
  "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)

Code

{
  "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 <label> de variante (ou équivalent) devient une cible pour rattacher le CTA popup.

Popup vs. Bouton (Bureau vs. Mobile) Le type d’appareil est détecté via checkIfMobile() : Cette fonction vérifie la chaîne navigator.userAgent du navigateur par rapport à une liste d’appareils mobiles (par exemple, iPhone, Android, iPad).

Bureau : Le CTA s’affiche sous forme de popups au survol à côté des libellés de variante
Mobile : Le script remplace les popups au survol par un seul bouton, car les interactions au survol ne fonctionnent pas sur les écrans tactiles

Configuration de la référence produit Kleep utilise des références produits pour faire correspondre les produits dans votre catalogue. Configurez la façon de les identifier : Champ de référence : Où trouver la référence produit de la marque

Champ SKU Shopify
Metafield (précisez lequel)
Tags (avec préfixe, par exemple ref:ABC123)

Extraction du produit master : Comment dériver l’identifiant produit master des SKUs de variante

Exemple : Si les SKUs de variante sont ABC123-S, ABC123-M, ABC123-L, la référence produit master est ABC123
Règle : Prendre les 6 premiers caractères / Diviser par séparateur et prendre la première partie / Regex personnalisée

Configurez cela dans Kleep Dashboard → Paramètres → Références produits. Notes de personnalisation

D’autres variantes de placement/mise en page ne sont pas fournies au-delà de l’ajustement des sélecteurs et du CSS
Pour modifier l’apparence (couleurs, espacement, polices, etc.), collez votre CSS dans le champ « Input custom CSS styles » dans les paramètres Kleep App Embed

12. Checklist de mise en production

Avant la mise en production, vérifiez les points suivants : Affichage du bouton

Bouton visible sur au moins 3 pages produits
Bouton fonctionnel sur bureau ET mobile
Pas de conflits CSS (bouton non masqué ou mal aligné)
Pas de problèmes de Cumulative Layout Shift (CLS) — le bouton ne provoque pas de saut de page
Thèmes Vintage uniquement : Commit référencé dans le contrôle de version

Qualité des données

>98% des produits disposent d’un guide des tailles mappé
<1% des variantes ont des mesures manquantes
0 SKU orphelin (produits sans mapping de catégorie)

Tracking

Les 5 événements se déclenchent correctement
Parcours utilisateur complet tracké (bouton → recommandation → panier)
Payloads validés

Performance

Erreurs JS < 1%
Latence API P95 < 500ms
Monitoring en place

Parcours utilisateur

Le guide des tailles s’ouvre correctement
Les recommandations s’affichent correctement
L’ajout au panier fonctionne depuis le guide des tailles
Les produits similaires s’affichent (si activés)
Responsive sur tous les appareils

✅ Une fois tous les éléments vérifiés, notifiez votre CSM Kleep pour la validation QA finale avant la mise en production.

13. Dépannage

Le bouton n’apparaît pas

☑️ Vérifiez que le Kleep App Embed est activé (interrupteur ON)
☑️ Assurez-vous d’avoir enregistré les modifications du thème
☑️ Videz le cache de votre navigateur et rechargez la page
☑️ Vérifiez que le produit dispose de variantes de taille configurées

Les Produits Similaires n’apparaissent pas

☑️ Vérifiez que le mode n’est pas réglé sur « Désactivé » dans les paramètres
☑️ Les boutons n’apparaissent que lorsqu’une variante est en rupture de stock
☑️ Pour les modes « personnalisé », vérifiez que vous avez ajouté un App Block

La recherche ne fonctionne pas

☑️ Vérifiez que « Activer la recherche personnalisée » est activé dans l’App Embed
☑️ Assurez-vous d’avoir ajouté le bloc Kleep Search au template de recherche
☑️ Vérifiez que la recherche native est masquée

Je ne trouve pas les App Blocks Kleep Si vous ne voyez pas les blocs Kleep dans l’onglet « Apps » lors du clic sur « Ajouter un bloc », votre thème est probablement un thème Vintage. Référez-vous aux sections 11-12 pour des instructions d’installation alternatives. Problèmes de mapping des données

☑️ Vérifiez que vos données produits contiennent les champs attendus (tags, metafields, etc.)
☑️ Vérifiez les mappings dans Kleep Dashboard → Paramètres → Data Mapping
☑️ Relancez le scan produit pour actualiser les valeurs détectées

Événements non déclenchés

☑️ Vérifiez la console du navigateur pour les erreurs JavaScript
☑️ Vérifiez qu’aucun bloqueur de publicité ou extension de confidentialité ne bloque les requêtes Kleep
☑️ Testez en mode navigation privée

Contacter le support Si vous rencontrez des problèmes non répertoriés ici, contactez l’équipe Kleep :

📧 Email : support@kleep.ai

Merci d’utiliser Kleep !

Notre équipe est là pour vous aider avec l’installation et l’optimisation de votre guide des tailles.---

Cookies & confidentialité des données

Kleep est entièrement conditionné par le consentement du visiteur : le script ne se charge qu’après que le consentement a été collecté via votre CMP, et vous devez conditionner son chargement en conséquence. Pour la liste complète des traceurs, les données traitées, les finalités et bases légales, l’hébergement, les sous-traitants et la sécurité, consultez Cookies, CMP & confidentialité des données.

​Vue d’ensemble du processus d’intégration

​Onboarding

​Installation & tests

​Post-intégration

​1. Fonctionnalités

​2. Fonctionnalité Produits Similaires

​3. Fonctionnalité Kleep Search

​4. Intégration des retours (optionnel)

​5. Tracking des événements & analytics

​6. Personnalisation CSS

​7. Environnements multiples

​7.5 Bouton CTA & Produits Similaires — Guide d’installation complet

​8. Thèmes Vintage - Configuration du guide des tailles

​9. Thèmes Vintage - Configuration des Produits Similaires

​10. Traductions (i18n)

​11. Référence technique

​12. Checklist de mise en production

​13. Dépannage

​Merci d’utiliser Kleep !

​Cookies & confidentialité des données

Vue d’ensemble du processus d’intégration

Onboarding

Installation & tests

Post-intégration

1. Fonctionnalités

2. Fonctionnalité Produits Similaires

3. Fonctionnalité Kleep Search

4. Intégration des retours (optionnel)

5. Tracking des événements & analytics

6. Personnalisation CSS

7. Environnements multiples

7.5 Bouton CTA & Produits Similaires — Guide d’installation complet

8. Thèmes Vintage - Configuration du guide des tailles

9. Thèmes Vintage - Configuration des Produits Similaires

10. Traductions (i18n)

11. Référence technique

12. Checklist de mise en production

13. Dépannage

Merci d’utiliser Kleep !

Cookies & confidentialité des données