Shopify Integratiehandleiding

Deze handleiding begeleidt u bij het installeren van Kleep in uw Shopify-winkel. Kleep biedt drie hoofdfuncties: een intelligente maatgids (Kleep Sizing), aanbevelingen voor vergelijkbare producten (Kleep Similar Products), en een geoptimaliseerde zoekfunctie (Kleep Search).

Overzicht van het integratieproces

Dit is wat u kunt verwachten van het ondertekenen van het contract tot live gaan en daarna. De volledige integratie duurt doorgaans ongeveer 5–6 weken.

Onboarding

Contract ondertekend en facturering ingesteld

Zodra het contract is ondertekend, start uw Kleep-vertegenwoordiger de facturering via GoCardless: Directe incasso instellen →.

Onboarding-startvergadering

Een kort gesprek met uw Kleep-vertegenwoordiger om de tijdlijn, technische contactpersonen en eventuele winkelspecifieke vereisten vóór de installatie af te stemmen.

Vul het onboardingformulier in

Na de startvergadering vragen we u enkele details te delen over uw bedrijf, facturering, winkelomgevingen en retouropstelling, zodat we de integratie kunnen voorbereiden.Vul ons onboardingformulier in →Het duurt ongeveer 5 minuten. Na indiening beoordeelt ons team uw antwoorden en bevestigt de volgende stappen binnen 1 werkdag.

Deel uw Shopify-URL en samenwerkingscode

Stuur ons uw winkeladres (bijv. your-store.myshopify.com) samen met uw samenwerkingsverzoekcode zodat wij toegang tot uw winkel kunnen aanvragen.

Meerdere Shopify-winkels? Als u meerdere Shopify-instanties heeft (bijv. verschillende regio’s of merken), stuur ons dan een samenwerkingscode voor elke winkel — we hebben één code per winkel nodig.

Weet u niet waar u deze kunt vinden? Ga in uw Shopify-beheerder naar Instellingen → Gebruikers en machtigingen — uw myshopify.com-URL staat bovenaan en de Samenwerkingsverzoekcode staat vermeld onder de sectie Medewerkers. Zie het helpartikel van Shopify over samenwerkingsaccounts voor meer details.

Accepteer ons samenwerkingsverzoek

We sturen een samenwerkingstoegangsverzoek vanuit ons Shopify Partner-account. Keur het goed via Instellingen → Gebruikers en machtigingen → Medewerkers in uw Shopify-beheerder.

Installeer de Kleep-app op elke winkel

Zodra we samenwerkingstoegang hebben, sturen we u een app-installatielink voor elke winkel. U moet de Kleep-app afzonderlijk installeren op elke Shopify-winkel waar u Kleep wilt inschakelen.

Kies de CTA-plaatsing

Bekijk onze voorgestelde posities voor de knop “Vind mijn maat” en kies de positie die past bij uw winkel: CTA-positionering Figma →.

Installatie en testen

Wij installeren Kleep op een gedupliceerd thema

Ons team dupliceert uw huidige Shopify-thema en installeert Kleep op het duplicaat, zodat uw live winkel onaangeroerd blijft terwijl u test.

Voorbeeld en feedback

We sturen u een privé-voorbeeldlink om de integratie van begin tot eind te testen en eventuele feedback of aanpassingen te delen.

Live gaan

Zodra u akkoord gaat, publiceren we Kleep op uw live thema.

Na de integratie

Toegang tot het klantdashboard

We verstrekken inloggegevens aan uw team voor toegang tot het Kleep Dashboard, waar u de KPI’s van Kleep in real time kunt bewaken.

Fit Feedback ingeschakeld

We activeren Fit Feedback in uw dashboard zodat uw team de maataanbevelingen van Kleep kan verfijnen met behulp van echte pasgegevens.

1. Functionaliteiten

Kleep wordt in uw winkel geïntegreerd door een aangepaste app te installeren die vooraf is aangemaakt. Het maakt het mogelijk om:

Onze CTA “Vind mijn maat” toe te voegen aan uw productpagina’s
De UI rechtstreeks aan te passen in de Thema-editor

Onze app creëert ook geautomatiseerde stromen van producten-, bestel- en retourdata om up-to-date te blijven. Deze gegevens worden dagelijks opgehaald. Bij installatie maakt de app een WebPixel aan dat wordt gebruikt om meerdere statistieken bij te houden waaruit we de ROI van de oplossing afleiden.

2. Functie Vergelijkbare Producten

Vergelijkbare Producten stelt alternatieve producten voor wanneer een maat niet op voorraad is. Deze functie verhoogt conversies door klanten relevante alternatieven aan te bieden. Beschikbare weergavemodi

Modus	Beschrijving
Popup (auto)	Automatische popup bij maat-hover (desktop) / knop (mobiel)
Button (auto)	Automatische CTA-knop bij winkelwagen bij uitverkoop
Custom buttons only	U plaatst handmatig knoppen via de thema-editor
Popup + custom	Automatische popup + extra aangepaste knoppen
Button + custom	Automatische knop + extra aangepaste knoppen

Configuratie Stap 1: Kies de weergavemodus Zoek in de instellingen van de Kleep App Embed de optie “Aanbevolen producten weergeven” en selecteer de gewenste modus in het vervolgkeuzemenu.

Modusselectie Vergelijkbare Producten Aangepaste knoppen toevoegen (voor aangepaste modi) Als u een modus met “custom” hebt gekozen, kunt u knoppen op specifieke locaties toevoegen:

Ga naar het sjabloon Productpagina in de thema-editor
Klik in de gewenste sectie op Blok toevoegen
Klik op het tabblad Apps en selecteer “Kleep Similar Button”
Positioneer het blok waar u het wilt en sla op

Kleep Similar Button-blok toevoegen

Knoppen voor Vergelijkbare Producten verschijnen alleen wanneer een variant niet op voorraad is. Het is normaal als u ze niet op alle producten ziet.

Meerdere knoppen toevoegen U kunt elk gewenst aantal knoppen voor Vergelijkbare Producten toevoegen aan de productpagina. Om meerdere knoppen toe te staan, moet de widget zijn ingesteld op een van: custom_buttons, popup+custom, of button+custom. Voor OS 2.0-thema’s:

Ga naar Online Store → Customize
Open het sjabloon Productpagina
Klik op Blok toevoegen → Kleep Similar Button
Herhaal als u 2+ knoppen op de pagina wilt

Elke knop verschijnt automatisch alleen wanneer de geselecteerde variant niet op voorraad is.

3. Kleep Zoekfunctie

Kleep Search vervangt de standaard Shopify-zoekfunctie door een geoptimaliseerde zoekfunctie met maatfilters en gepersonaliseerde aanbevelingen. Stap 1: Aangepaste zoekfunctie inschakelen Schakel in de instellingen van de Kleep App Embed de optie “Aangepaste zoekfunctie inschakelen” in.

Aangepaste zoekfunctie inschakelen Stap 2: Toegang tot het zoeksjabloon Klik in de thema-editor op het vervolgkeuzemenu bovenaan (standaard “Startpagina”) en selecteer “Zoeken” uit de sjabloonlijst.

Zoeksjabloon selecteren Stap 3: Verberg de standaard zoekfunctie Verberg of verwijder in de sectie Sjabloon het native blok “Zoekresultaten” door op het oogpictogram te klikken.

Standaard zoekfunctie verbergen Stap 4: Voeg het Kleep-zoekblok toe Klik op Sectie toevoegen en selecteer daarna op het tabblad Apps de optie “Search” (kleep-dev).

Kleep-zoekblok toevoegen Stap 5: Opties configureren Klik op het zoekblok dat u hebt toegevoegd om toegang te krijgen tot de instellingen: aantal resultaten, raster-/lijstweergave, zoekvertraging, enz.

Opties voor zoekconfiguratie

4. Retourintegratie (Optioneel)

Als u een platform voor retourbeheer gebruikt, kan Kleep retourgegevens integreren om maataanbevelingen te verbeteren. Ondersteunde retouraanbieders

Global-e
Aftership
Fast Return
Return Go
Andere (neem contact met ons op)

Configuratie

Ga in het Kleep Dashboard naar Instellingen → Retouren
Selecteer uw retouraanbieder
Volg de aanbiedersspecifieke instructies om uw account te verbinden

Als uw aanbieder niet in de lijst staat, neem dan contact met ons op via support@kleep.ai — we kunnen een aangepaste integratie instellen via SFTP of API.

5. Gebeurtenisregistratie en analyse

Kleep volgt automatisch gebruikersinteracties voor analyses. Zorg ervoor dat de tracking correct werkt vóór het live gaan. Bijgehouden gebeurtenissen

Gebeurtenis	Beschrijving
`kleep_button_click`	Gebruiker klikte op de maatgidsknop
`kleep_drawer_open`	Maatgids-drawer geopend
`kleep_size_recommended`	Een maataanbeveling werd weergegeven
`kleep_add_to_cart`	Gebruiker voegde product toe aan winkelwagen vanuit Kleep
`kleep_similar_click`	Gebruiker klikte op een vergelijkbaar product

Verificatie Om te controleren of gebeurtenissen correct worden geactiveerd:

Open de Ontwikkelaarstools van uw browser (F12)
Ga naar het tabblad Netwerk
Filter op “kleep”
Interageer met de maatgidsknop
U zou API-aanroepen moeten zien voor elke gebeurtenis

Vóór live gaan: Zorg ervoor dat minstens 5 gebeurtenissen worden geactiveerd en dat de payloads geldig zijn. Voltooi één volledige gebruikersreis (knop klikken → maataanbeveling → aan winkelwagen toevoegen) om de integratie te valideren.

6. CSS-aanpassing

U kunt het uiterlijk van Kleep-elementen (knoppen, popups, zoekfunctie) aanpassen door aangepaste CSS toe te voegen. Waar CSS toevoegen In de instellingen van de Kleep App Embed vindt u een veld “Aangepaste CSS-stijlen invoeren”. Plak uw aangepaste CSS daar.

Veld voor aangepaste CSS Voorbeeldaanpassing

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

Als u meerdere Shopify-omgevingen heeft (dev, staging, productie), moet u Kleep voor elke omgeving configureren. Instelling per omgeving

Productiewinkel — Hoofdwinkel, volledig geconfigureerd
Staging-/Dev-winkels — Voor testen vóór implementatie in productie

Voor elke omgeving:

Installeer de Kleep-app
Schakel de App Embed in
Neem contact op met uw Kleep CSM om de omgeving aan uw account te koppelen

Test altijd wijzigingen in staging voordat u ze toepast in productie.

Omgevingsspecifieke URL’s Geef uw Kleep CSM op:

Productie-URL: https://www.yourbrand.com
Staging-URL: https://staging.yourbrand.com (indien van toepassing)
Dev-URL: https://dev.yourbrand.com (indien van toepassing)

7.5 CTA-knop en vergelijkbare producten — volledige installatiehandleiding

Voor de volledige technische referentie over het installeren van de Kleep CTA-knop en de functie Vergelijkbare Producten (inclusief alle Liquid-code, instellingsschema en instelling van de secundaire knop), raadpleegt u de speciale handleiding hieronder: CTA-knop en vergelijkbare producten — volledige installatiehandleiding

8. Klassieke thema’s — Installatiehandleiding maatgids

Klassieke thema’s (ook wel “legacy” of aangemaakt vóór Online Store 2.0) ondersteunen geen App Blocks. Installatie vereist aanpassingen aan de Liquid-code.

Voor deze sectie is kennis van Shopify-ontwikkeling (Liquid) vereist.

Vereisten

Toegang tot de themacode-editor (Online Store → Thema’s → Code bewerken)
Kleep App Embed moet zijn ingeschakeld in uw Shopify-beheerder (Online Store → Thema’s → Aanpassen → App embeds → Kleep)

Stap 1: Schakel de App Embed in Ga in uw Shopify-beheerder naar Online Store → Thema’s → Aanpassen → App embeds en schakel de Kleep-app in. Stap 2: Roep het fragment aan Plak de volgende code op de plek waar u Kleep wilt weergeven. Het moet deel uitmaken van het blok Product info in de map snippets:

Code

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

Stap 3: Maak het knopfragment Maak een nieuw bestand genaamd kleep-button.liquid in uw map snippets. Voeg de volgende inhoud in:

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>

Stap 4: Instellingsschema toevoegen Voeg de volgende opties toe aan uw Instellingsschema aan het einde van het sectiebestand:

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
    }

Stap 5: Valideren Valideer updates in het gebied Shopify Thema aanpassen. Configureer visuele elementen in de instellingen van het productinformatieblok. Optioneel: Secundaire knop Als u een secundaire knop wilt toevoegen, maakt u een nieuw bestand genaamd kleep-secondary-button.liquid in uw map 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>

Plak de volgende code op de plek waar u Kleep wilt weergeven. Het moet deel uitmaken van het blok Product info in de map snippets.

Code

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

9. Klassieke thema’s — Instelling Vergelijkbare Producten

Stap 1: Maak het fragment Maak een bestand snippets/kleep-similar-button.liquid met de volgende code:

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>

Stap 2: Render het fragment Voeg deze regel in op de plek waar u de knop wilt weergeven:

Code

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

Typische plaatsing: onder de variantselectoren of in de buurt van het formulier Aan winkelwagen toevoegen. Stap 3: Schakel de juiste modus in Omdat klassieke thema’s geen OS 2.0-blokken kunnen invoegen, moet de widget een van de volgende modi gebruiken:

custom_buttons
popup+custom
button+custom

Meerdere knoppen toevoegen Om meerdere knoppen te maken, plaatst u de fragmentcode op verschillende plaatsen in het productsjabloon:

Code

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

Elke fragmentaanroep maakt een extra knop aan. Elke knop verschijnt automatisch alleen wanneer de geselecteerde variant niet op voorraad is.

10. Vertalingen (i18n)

Voeg de volgende vertalingen toe aan uw thema-locatiebestanden. Engels (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"
          }
        }
      }
    }

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

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

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

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

Japans (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": "商品を見る"
      }
    }
  }
}

Koreaans (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": "상품 보기"
      }
    }
  }
}

Portugees (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. Technische referentie

CTA-locatie op de PDP De locatie wordt gedefinieerd door DOM-selectors binnen KleepSDK.getConstants():

targetProductInfoBlockQueries – Array van selectors die verwijzen naar de hoofdcontainer van productdetails (titel, prijs, maten, enz.). Het script doorloopt deze selectors en gebruikt de eerste die het vindt als invoegpunt voor de CTA of popups.
targetVariantQueries – Waar de maat-/variantopties zich bevinden. Zodra het productinformatieblok is gevonden, zoekt het script erin naar variantelementen (zoals maatselectoren). Elke variant <label> (of equivalent) wordt een doel voor het koppelen van de popup-CTA.

Popup vs. Knop (desktop vs. mobiel) Het apparaattype wordt gedetecteerd met checkIfMobile(): Deze functie controleert de navigator.userAgent-string van de browser aan de hand van een lijst met mobiele apparaten (bijv. iPhone, Android, iPad).

Desktop: De CTA wordt weergegeven als hover-popups naast de variantlabels
Mobiel: Het script vervangt hover-popups door een enkele knop, omdat hover-interacties niet werken op aanraakschermen

Configuratie van productverwijzing Kleep gebruikt productverwijzingen om producten in uw catalogus te koppelen. Configureer hoe u ze kunt identificeren: Verwijzingsveld: Waar de productverwijzing van het merk te vinden is

Shopify SKU-veld
Metaveld (geef aan welk)
Tags (met voorvoegsel, bijv. ref:ABC123)

Extractie van hoofdproduct: Hoe het hoofdproduct-ID af te leiden van variant-SKU’s

Voorbeeld: Als variant-SKU’s ABC123-S, ABC123-M, ABC123-L zijn, is de hoofdproductverwijzing ABC123
Regel: Neem eerste 6 tekens / Splits op en neem eerste deel / Aangepaste regex

Configureer dit in Kleep Dashboard → Instellingen → Productverwijzingen. Aanpassingsnotities

Andere varianten van plaatsing/lay-out worden niet aangeboden buiten het aanpassen van selectors en CSS
Om het uiterlijk te wijzigen (kleuren, afstand, lettertypen, enz.), plak uw CSS in het vak “Aangepaste CSS-stijlen invoeren” in de instellingen van de Kleep App Embed

12. Controlelijst voor live gaan

Verifieer het volgende voordat u live gaat: Knopweergave

Knop zichtbaar op minstens 3 productpagina’s
Knop werkt op desktop EN mobiel
Geen CSS-conflicten (knop niet verborgen of verschoven)
Geen Cumulative Layout Shift (CLS)-problemen — knop veroorzaakt geen paginaverschuiving
Alleen klassieke thema’s: Commit verwezen in versiebeheer

Datakwaliteit

>98% van de producten heeft een maatgids toegewezen
<1% van de varianten heeft ontbrekende metingen
0 wezen-SKU’s (producten zonder categorietoewijzing)

Registratie

Alle 5 gebeurtenissen worden correct geactiveerd
Volledige gebruikersreis bijgehouden (knop → aanbeveling → winkelwagen)
Payloads gevalideerd

Prestaties

JS-fouten < 1%
API-latentie P95 < 500ms
Monitoring aanwezig

Gebruikersreis

Maatgids opent correct
Aanbevelingen worden correct weergegeven
Aan winkelwagen toevoegen werkt vanuit maatgids
Vergelijkbare producten weergegeven (indien ingeschakeld)
Responsief op alle apparaten

✅ Zodra alle items zijn aangevinkt, informeer uw Kleep CSM voor definitieve QA-validatie vóór live gaan.

13. Probleemoplossing

De knop verschijnt niet

☑️ Controleer of de Kleep App Embed is ingeschakeld (schakel AAN)
☑️ Zorg ervoor dat u de themawijzigingen hebt opgeslagen
☑️ Wis uw browsercache en laad de pagina opnieuw
☑️ Controleer of het product maatvariant heeft geconfigureerd

Vergelijkbare producten verschijnen niet

☑️ Controleer of de modus niet is ingesteld op “Uitgeschakeld” in de instellingen
☑️ Knoppen verschijnen alleen wanneer een variant niet op voorraad is
☑️ Voor “aangepaste” modi, controleer of u een App Block hebt toegevoegd

Zoeken werkt niet

☑️ Controleer of “Aangepaste zoekfunctie inschakelen” is ingeschakeld in de App Embed
☑️ Zorg ervoor dat u het Kleep-zoekblok hebt toegevoegd aan het zoeksjabloon
☑️ Controleer of de standaard zoekfunctie verborgen is

Ik kan de Kleep App Blocks niet vinden Als u geen Kleep-blokken ziet op het tabblad “Apps” wanneer u op “Blok toevoegen” klikt, is uw thema waarschijnlijk een klassiek thema. Raadpleeg secties 11-12 voor alternatieve installatie-instructies. Problemen met gegevensmapping

☑️ Controleer of uw productgegevens de verwachte velden bevatten (tags, metavelden, enz.)
☑️ Controleer de koppelingen in Kleep Dashboard → Instellingen → Gegevensmapping
☑️ Voer de productscan opnieuw uit om gedetecteerde waarden te vernieuwen

Gebeurtenissen worden niet geactiveerd

☑️ Controleer de browserconsole op JavaScript-fouten
☑️ Controleer of geen advertentieblokkers of privacyextensies Kleep-verzoeken blokkeren
☑️ Test in incognitomodus

Neem contact op met ondersteuning Als u problemen ondervindt die hier niet vermeld staan, neem dan contact op met het Kleep-team:

📧 E-mail: support@kleep.ai

Bedankt voor het gebruik van Kleep! 🎉

Ons team staat klaar om u te helpen met de installatie en optimalisatie van uw maatgids.---

Cookies en gegevensprivacy

Kleep is volledig afhankelijk van de toestemming van bezoekers: het script laadt alleen nadat toestemming is verzameld via uw CMP, en u moet het laden daarvan dienovereenkomstig conditioneren. Zie Cookies, CMP & Gegevensprivacy voor de volledige lijst van trackers, de verwerkte gegevens, de doeleinden en rechtsgrondslagen, hosting, subverwerkers en beveiliging.

​Overzicht van het integratieproces

​Onboarding

​Installatie en testen

​Na de integratie

​1. Functionaliteiten

​2. Functie Vergelijkbare Producten

​3. Kleep Zoekfunctie

​4. Retourintegratie (Optioneel)

​5. Gebeurtenisregistratie en analyse

​6. CSS-aanpassing

​7. Meerdere omgevingen

​7.5 CTA-knop en vergelijkbare producten — volledige installatiehandleiding

​8. Klassieke thema’s — Installatiehandleiding maatgids

​9. Klassieke thema’s — Instelling Vergelijkbare Producten

​10. Vertalingen (i18n)

​11. Technische referentie

​12. Controlelijst voor live gaan

​13. Probleemoplossing

​Bedankt voor het gebruik van Kleep! 🎉

​Cookies en gegevensprivacy

Overzicht van het integratieproces

Onboarding

Installatie en testen

Na de integratie

1. Functionaliteiten

2. Functie Vergelijkbare Producten

3. Kleep Zoekfunctie

4. Retourintegratie (Optioneel)

5. Gebeurtenisregistratie en analyse

6. CSS-aanpassing

7. Meerdere omgevingen

7.5 CTA-knop en vergelijkbare producten — volledige installatiehandleiding

8. Klassieke thema’s — Installatiehandleiding maatgids

9. Klassieke thema’s — Instelling Vergelijkbare Producten

10. Vertalingen (i18n)

11. Technische referentie

12. Controlelijst voor live gaan

13. Probleemoplossing

Bedankt voor het gebruik van Kleep! 🎉

Cookies en gegevensprivacy