Shopify : Bouton CTA & Produits Similaires

Guide d’intégration Shopify V2

Cette section montre comment ajouter Kleep AI Sizing à votre boutique Shopify.

Tutoriel vidéo étape par étape

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.

Vous préférez un tutoriel visuel ?

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.

Capture d'écran 2025-08-13 à 14.29.30.png

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

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

Bouton Kleep

<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 les options du schéma des paramètres Ajoutez les options suivantes à votre schéma Settings à la fin de la page :

Options Shopify

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

Traductions

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

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

Validez les mises à jour dans la zone Personnaliser le thème Shopify. Configurez les visuels dans les paramètres du bloc d’informations produit.
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 :

Code du bouton secondaire

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

Snippet d'inclusion

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

Snippet du bouton similaire

{% 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 dans le template produit

Insérez cette ligne à l’endroit où vous souhaitez que le bouton apparaisse :

Snippet d'inclusion

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

Accédez à Online Store → Themes → Customize.
Ouvrez la section App embeds.
Activez l’application Kleep.
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 :

Ouvrez Online Store → Customize.
Accédez au template Page produit.
Dans la section souhaitée, cliquez sur Ajouter un bloc.
Sélectionnez Kleep Similar Button.
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 <label> de variante (ou équivalent) devient une cible pour rattacher le CTA popup. Popup vs. Bouton (Bureau vs. Mobile) Nous détectons le type d’appareil en utilisant checkIfMobile() : Cette fonction vérifie la chaîne navigator.userAgent du navigateur par rapport à une liste d’appareils mobiles (par exemple, iPhone, Android, iPad).

Sur bureau, le CTA s’affiche sous forme de popups au survol à côté des libellés de variante.
Sur mobile, le script remplace les popups au survol par un seul bouton, car les interactions au survol ne fonctionnent pas sur les écrans tactiles.

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 » des paramètres Kleep App Embed.

3. Recherche

Remarque : Vous n’avez pas besoin de modifier le code du thème pour configurer la Kleep Search dans Shopify V1. Ouvrez l’éditeur de thème, activez le Kleep App Embed, activez la Recherche personnalisée, puis remplacez le bloc de recherche par défaut par le bloc Kleep Search. Pour modifier l’apparence (couleurs, espacement, polices, etc.), collez votre CSS dans le champ « Input custom CSS styles » des paramètres Kleep App Embed. Tout cela est décrit ci-dessous Ouvrir l’éditeur de thème Accédez à Online Store > Themes, trouvez le thème que vous souhaitez modifier, et cliquez sur Customize. Activer le Kleep App Embed Ouvrez la section App embeds. Trouvez l’application Kleep et activez-la. Activer la recherche personnalisée (optionnel) Dans les paramètres Kleep, activez « Activer la recherche personnalisée ».

Remplacer la recherche par défaut Dans l’éditeur de thème, ouvrez le template Recherche (accédez au template de la page de recherche).

Supprimez ou masquez la section de recherche par défaut du thème.

Ajoutez le bloc Kleep Search (depuis l’onglet Apps) et placez-le à l’emplacement de la recherche par défaut.

Enregistrez les modifications du thème. La fonctionnalité de recherche est intégrée comme une section Liquid dans l’application, et non comme du code Liquid séparé. L’activation est contrôlée par :

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

Cela garantit que seules des boutiques spécifiques (domaines) peuvent activer la fonctionnalité de recherche.Mise en page et styles

La vue grille ou liste est basculée uniquement via le paramètre products_search_grid_layout dans l’application.

Pour ce faire, accédez à la recherche que vous avez déjà ajoutée et sur la droite, vous verrez l’option de configuration

Les styles supplémentaires (polices, couleurs, espacement) sont implémentés par nous dans le code, au cas par cas, si nécessaire.
Toutes les fonctionnalités sont liées à cette section Liquid et activées via kleep_enable_custom_search dans l’application, et non en ajoutant du code Liquid aux paramètres du thème.
Pour modifier l’apparence (couleurs, espacement, polices, etc.), collez votre CSS dans le champ « Input custom CSS styles » des paramètres Kleep App Embed.

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.

​Guide d’intégration Shopify V2

Tutoriel vidéo étape par étape

​Guide d’intégration Shopify V1

​1. Guide des tailles

Vous préférez un tutoriel visuel ?

​Étapes

​2. Produits Similaires

​Installer « Produits Similaires » pour les thèmes Shopify V1

​Étape 1 - Créer un snippet

​Étape 2 - Inclure le snippet dans le template produit

​Étape 3 - Activer le bon mode pour les thèmes V1

​Installer « Produits Similaires » pour les boutiques V2 (Online Store 2.0)

​Étape 1 — Activer le Kleep App Embed

​Étape 2 — Sélectionner le mode d’affichage des Produits Similaires

​Ajouter plusieurs boutons « Produits Similaires » (Primaire & Secondaire)

​Activer un mode qui prend en charge les boutons personnalisés

​Pour Online Store 2.0 (Thèmes modernes)

​Pour les thèmes V1 / Legacy

​Récapitulatif

​3. Recherche

​Cookies & confidentialité des données