Shopify: CTA-knop en vergelijkbare producten

Shopify V2 Integratiehandleiding

In deze sectie wordt uitgelegd hoe u Kleep AI Sizing aan uw Shopify-winkel toevoegt.

Stapsgewijze video-walkthrough

Volg onze Tango-tutorial om de Kleep-knop aan uw winkel toe te voegen op Online Store 2.0-thema’s.

Shopify V1 Integratiehandleiding

1. Maatbepaling

In deze sectie wordt uitgelegd hoe u Kleep AI Sizing aan uw Shopify-codebase toevoegt.

Liever een visuele walkthrough?

Bekijk de stapsgewijze Tango-tutorial voor het installeren van Kleep in een Shopify V1-winkel.

Stappen

Stap 1: Schakel de App Embed in Zorg ervoor dat de Kleep-app is geactiveerd in uw App-embeds.

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

Stap 2: Render het knopfragment Plak de volgende code op de plek waar u Kleep wilt laten verschijnen. Dit moet deel uitmaken van het Product info-blok in de map snippets.

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

Stap 3: Maak het knopfragmentbestand Maak een nieuw bestand aan met de naam kleep-button.liquid in uw map snippets. Zet de volgende inhoud erin:

Kleep-knop

<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: Voeg opties toe aan het instellingsschema Voeg de volgende opties toe aan uw instellingsschema aan het einde van de pagina:

Shopify-opties

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

Om uw eigen CSS-stijlen toe te voegen:

Om het uiterlijk te wijzigen (kleuren, afstand, lettertypen, etc.), plak uw CSS in het vak “Voer aangepaste CSS-stijlen in” in de Kleep App Embed-instellingen.

Bijvoorbeeld:

Stap 5: Voeg Engelse vertalingen toe Voeg Engelse vertalingen toe aan uw themalocales.

Vertalingen

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

Stap 6: Voeg andere taalvertalingen toe Voeg andere vertalingen toe aan uw themalocales.

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

Valideer de updates in het Shopify Thema Aanpassen-gebied. Configureer de visuele elementen in de instellingen van het productinformatieblok.
Als u een secundaire knop wilt toevoegen, moet u een nieuw bestand aanmaken met de naam kleep-secondary-button.liquid in uw map snippets. Zet de volgende inhoud erin:

Code secundaire knop

<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 laten verschijnen. Dit moet deel uitmaken van het Product info-blok in de map snippets.

Fragment renderen

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

2. Vergelijkbare producten

Installeer “Vergelijkbare producten” voor V1 Shopify-thema’s

In dit geval moet u handmatig een Liquid-fragment toevoegen.

Stap 1 - Maak een fragment

Maak: snippets/kleep-similar-button.liquid Voeg de volgende code in:

Fragment vergelijkbare knop

{% 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 in de productsjabloon

Voeg deze regel in op de plek waar u de knop wilt laten verschijnen:

Fragment renderen

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

Typische plaatsing: onder de variantselectoren of nabij het formulier ‘Aan winkelwagen toevoegen’.

Stap 3 - Schakel de juiste modus in voor V1-thema’s

Omdat V1-thema’s geen OS2.0-blokken kunnen invoegen, moet de widget een van de volgende modi gebruiken:

custom_buttons
popup+custom
button+custom

Installeer “Vergelijkbare producten” voor V2 (Online Store 2.0)-winkels

Moderne Shopify-thema’s ondersteunen app-embeds en aangepaste blokken. Er zijn geen codewijzigingen vereist.

Stap 1 — Schakel de Kleep App Embed in

Ga naar Online Store → Themes → Customize.
Open de sectie App embeds.
Schakel de Kleep App in.
Sla het thema op.

Dit activeert het kernscript dat de logica van vergelijkbare producten beheert.

Zoek vervolgens de “Aanbevolen producten weergeven”

Stap 2 — Selecteer de weergavemodus voor vergelijkbare producten

Kies in de Kleep-widgetconfiguratie hoe vergelijkbare producten op de productpagina moeten verschijnen:

disabled – schakelt de functie volledig uit
popup – voegt automatisch een popup toe boven variant-/maatselectoren op desktop, en vervangt de standaardknop op mobiel
button – voegt automatisch een CTA-knop in nabij het gebied ‘Aan winkelwagen toevoegen’ wanneer de geselecteerde variant uitverkocht is
custom_buttons – schakelt alle automatische plaatsing uit; de handelaar moet handmatig een of meer “Kleep Vergelijkbare Knop”-blokken toevoegen
popup+custom – behoudt de automatische popup en schakelt ook eventuele aangepaste knoppen in het thema in
button+custom – behoudt de automatische CTA-knop en schakelt ook eventuele aangepaste knoppen in het thema in

Sla daarna gewoon het thema op en het verschijnt onmiddellijk in uw winkel (productpagina). Stap 3 — Aangepaste knoppen toevoegen (alleen voor custom_buttons, popup+custom, button+custom) Als uw geselecteerde modus aangepaste knoppen omvat:

Open Online Store → Customize.
Ga naar de sjabloon Productpagina.
Klik in de gewenste sectie op Blok toevoegen.
Selecteer Kleep Vergelijkbare Knop.
Sla het thema op.

Aangepaste knoppen verschijnen alleen wanneer de geselecteerde variant uitverkocht is.

Meerdere knoppen “Vergelijkbare producten” toevoegen (primair en secundair)

U kunt elk gewenst aantal knoppen voor vergelijkbare producten op de productpagina toevoegen. Dit werkt voor zowel OS 2.0-thema’s als V1 / klassieke thema’s.

Schakel een modus in die aangepaste knoppen ondersteunt

Om meerdere knoppen mogelijk te maken, moet de widget zijn ingesteld op een van:

custom_buttons
popup+custom
button+custom

Deze modi activeren handmatige plaatsing, zodat handelaren zoveel knoppen kunnen invoegen als nodig.

Voor Online Store 2.0 (moderne thema’s)

OS 2.0-thema’s bieden de mogelijkheid om knoppen visueel toe te voegen via de Thema-editor. Stappen:

Ga naar Online Store → Customize
Open de sjabloon Productpagina
Klik op Blok toevoegen → Kleep Vergelijkbare Knop
Voeg de knop toe op de gewenste locatie
Herhaal dit als u 2+ knoppen op de pagina wilt

Elke knop verschijnt automatisch alleen wanneer de geselecteerde variant uitverkocht is.

Voor V1 / klassieke thema’s

Klassieke thema’s ondersteunen geen blokken, maar u kunt het fragment meerdere keren renderen. Voeg dit fragment in op de plek waar u een knop wilt: {% render 'kleep-similar-button' %} Om meerdere knoppen te maken, plaatst u deze code eenvoudig op verschillende locaties van de productsjabloon. Elke aanroep van het fragment maakt een extra knop aan.

Samenvatting

Om meerdere knoppen voor vergelijkbare producten toe te voegen: Schakel een modus met aangepaste knoppen in → voeg meerdere OS 2.0-blokken of meerdere fragmentaanroepen toe → alle knoppen werken automatisch wanneer de variant uitverkocht is.

CTA-locatie op de PDP De locatie wordt bepaald door DOM-selectoren in KleepSDK.getConstants(). targetProductInfoBlockQueries – waar de productinformatie zich bevindt. Dit is een reeks selectoren die verwijzen naar de hoofdcontainer van productdetails (titel, prijs, maten, etc.). Het script itereert door deze selectoren 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 daarin naar variantelementen (zoals maatselectoren). Elk variant-<label> (of equivalent) wordt een doelwit voor het koppelen van de popup-CTA. Popup vs. Knop (desktop vs. mobiel) Wij detecteren het apparaattype met checkIfMobile(): Deze functie vergelijkt de navigator.userAgent-string van de browser met een lijst van mobiele apparaten (bijv. iPhone, Android, iPad).

Op desktop wordt de CTA weergegeven als hover-popups naast de variantlabels.
Op mobiel vervangt het script hover-popups door een enkele knop, omdat hover-interacties niet werken op touchscreens.

Aanpassing

Er zijn geen andere varianten van plaatsing/indeling beschikbaar buiten het aanpassen van de selectoren en CSS.
Om het uiterlijk te wijzigen (kleuren, afstand, lettertypen, etc.), plak uw CSS in het vak “Voer aangepaste CSS-stijlen in” in de Kleep App Embed-instellingen.

3. Zoekfunctie

Opmerking: U hoeft geen themacode te wijzigen om de Kleep Zoekfunctie in Shopify V1 in te stellen. Open de Thema-editor, schakel de Kleep App Embed in, activeer Aangepaste zoekfunctie en vervang vervolgens het standaard zoekblok door het Kleep Zoekblok. Om het uiterlijk te wijzigen (kleuren, afstand, lettertypen, etc.), plak uw CSS in het vak “Voer aangepaste CSS-stijlen in” in de Kleep App Embed-instellingen. Al deze zaken worden hieronder beschreven Open de thema-editor Ga naar Online winkel > Thema’s, zoek het thema dat u wilt bewerken en klik op Aanpassen. Kleep App Embed inschakelen Open de sectie App-embeds. Zoek de Kleep-app en schakel deze in. Aangepaste zoekfunctie inschakelen (optioneel) Schakel in de Kleep-instellingen “Aangepaste zoekfunctie inschakelen” in.

Vervang de standaard zoekfunctie Open in de thema-editor het zoeksjabloon (navigeer naar het paginasjabloon Zoeken).

Verwijder of verberg de standaard zoeksectie uit het thema.

Voeg het Kleep Zoekblok toe (vanuit het tabblad Apps) en plaats het waar de standaard zoekfunctie stond.

Sla de themawijzigingen op. De zoekfunctie is geïntegreerd als een Liquid-sectie in de app, niet als afzonderlijke Liquid-code. Activering wordt bepaald door:

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

Dit zorgt ervoor dat alleen specifieke winkels (domeinen) de zoekfunctie kunnen inschakelen.Indeling en stijlen

De raster- versus lijstweergave wordt alleen geschakeld via de instelling products_search_grid_layout in de app.

Ga hiervoor naar de zoekfunctie die u al hebt toegevoegd en aan de rechterkant ziet u de optie om deze te configureren

Extra stijlen (lettertypen, kleuren, afstand) worden door ons in de code geïmplementeerd, per winkel, indien nodig.
Alle functionaliteit is gekoppeld aan deze Liquid-sectie en ingeschakeld via kleep_enable_custom_search in de app, niet door Liquid-code toe te voegen aan de thema-instellingen.
Om het uiterlijk te wijzigen (kleuren, afstand, lettertypen, etc.), plak uw CSS in het vak “Voer aangepaste CSS-stijlen in” in de Kleep App Embed-instellingen.

Cookies en gegevensprivacy

Kleep is volledig afhankelijk van de toestemming van de bezoeker: het script wordt pas geladen nadat de toestemming is verzameld via uw CMP, en u dient het laden hiervan dienovereenkomstig te conditioneren. Raadpleeg Cookies, CMP & Gegevensprivacy voor de volledige lijst van trackers, de verwerkte gegevens, de doeleinden en rechtsgrondslagen, hosting, subverwerkers en beveiliging.

​Shopify V2 Integratiehandleiding

Stapsgewijze video-walkthrough

​Shopify V1 Integratiehandleiding

​1. Maatbepaling

Liever een visuele walkthrough?

​Stappen

​2. Vergelijkbare producten

​Installeer “Vergelijkbare producten” voor V1 Shopify-thema’s

​Stap 1 - Maak een fragment

​Stap 2 - Render het fragment in de productsjabloon

​Stap 3 - Schakel de juiste modus in voor V1-thema’s

​Installeer “Vergelijkbare producten” voor V2 (Online Store 2.0)-winkels

​Stap 1 — Schakel de Kleep App Embed in

​Stap 2 — Selecteer de weergavemodus voor vergelijkbare producten

​Meerdere knoppen “Vergelijkbare producten” toevoegen (primair en secundair)

​Schakel een modus in die aangepaste knoppen ondersteunt

​Voor Online Store 2.0 (moderne thema’s)

​Voor V1 / klassieke thema’s

​Samenvatting

​3. Zoekfunctie

​Cookies en gegevensprivacy