Shopify Integrationsleitfaden

Dieser Leitfaden führt Sie durch die Installation von Kleep in Ihrem Shopify-Shop. Kleep bietet drei Hauptfunktionen: einen intelligenten Größenratgeber (Kleep Sizing), ähnliche Produktempfehlungen (Kleep Similar Products) und eine optimierte Produktsuche (Kleep Search).

Überblick über den Integrationsprozess

Hier ist, was Sie von der Vertragsunterzeichnung bis zum Go-Live und darüber hinaus erwarten können. Die Ende-zu-Ende-Integration dauert in der Regel ca. 5–6 Wochen.

Onboarding

Vertrag unterzeichnet & Abrechnung eingerichtet

Sobald der Vertrag unterzeichnet ist, startet Ihr Kleep-Ansprechpartner die Abrechnung über GoCardless: Lastschrift einrichten →.

Onboarding-Kickoff-Meeting

Ein kurzes Gespräch mit Ihrem Kleep-Ansprechpartner, um Zeitplan, technische Ansprechpartner und shopspezifische Anforderungen vor der Installation abzustimmen.

Onboarding-Formular ausfüllen

Nach dem Kickoff bitten wir Sie, einige Details zu Ihrem Unternehmen, der Abrechnung, den Shop-Umgebungen und der Retouren-Einrichtung zu teilen, damit wir die Integration vorbereiten können.Unser Onboarding-Formular ausfüllen →Es dauert ca. 5 Minuten. Nach dem Absenden überprüft unser Team Ihre Antworten und bestätigt die nächsten Schritte innerhalb von 1 Werktag.

Shopify-URL & Mitarbeiter-Code teilen

Senden Sie uns Ihre Shop-Adresse (z. B. your-store.myshopify.com) zusammen mit Ihrem Mitarbeiter-Anforderungscode, damit wir Zugang zu Ihrem Shop anfordern können.

Mehrere Shopify-Shops? Wenn Sie mehrere Shopify-Instanzen haben (z. B. verschiedene Regionen oder Marken), senden Sie uns bitte einen Mitarbeiter-Code für jeden Shop — wir benötigen einen Code pro Shop.

Nicht sicher, wo Sie diese finden? Gehen Sie in Ihrem Shopify-Admin zu Einstellungen → Benutzer und Berechtigungen — Ihre myshopify.com-URL wird oben angezeigt, und der Mitarbeiter-Anforderungscode ist im Abschnitt Mitarbeiter aufgeführt. Weitere Details finden Sie im Shopify-Hilfeartikel zu Mitarbeiter-Konten.

Unsere Mitarbeiter-Anfrage akzeptieren

Wir senden eine Mitarbeiter-Zugriffsanfrage von unserem Shopify-Partner-Konto. Genehmigen Sie diese unter Einstellungen → Benutzer und Berechtigungen → Mitarbeiter in Ihrem Shopify-Admin.

Die Kleep-App in jedem Shop installieren

Sobald wir Mitarbeiterzugriff haben, senden wir Ihnen einen App-Installationslink für jeden Shop. Sie müssen die Kleep-App separat in jedem Shopify-Shop installieren, in dem Kleep aktiviert sein soll.

CTA-Platzierung wählen

Überprüfen Sie unsere vorgeschlagenen Positionen für die Schaltfläche „Meine Größe finden” und wählen Sie die passende für Ihren Storefront: CTA-Positionierung Figma →.

Installation & Tests

Wir installieren Kleep auf einem doppelten Theme

Unser Team dupliziert Ihr aktuelles Shopify-Theme und installiert Kleep auf dem Duplikat, damit Ihr Live-Storefront unberührt bleibt, während Sie testen.

Vorschau & Feedback

Wir senden Ihnen einen privaten Vorschau-Link, um die Integration vollständig zu testen und Feedback oder notwendige Anpassungen zu teilen.

Go-Live

Sobald Sie zustimmen, veröffentlichen wir Kleep in Ihrem Live-Theme.

Nach der Integration

Zugang zum Kunden-Dashboard

Wir stellen Anmeldedaten für Ihr Team bereit, um auf das Kleep Dashboard zuzugreifen, wo Sie die Kleep-Leistungs-KPIs in Echtzeit überwachen können.

Fit Feedback aktiviert

Wir aktivieren Fit Feedback in Ihrem Dashboard, damit Ihr Team die Größenempfehlungen von Kleep anhand realer Passformdaten verfeinern kann.

1. Funktionsumfang

Kleep wird in Ihrem Shop durch die Installation einer vorbereiteten benutzerdefinierten App integriert. Damit können Sie:

Unseren CTA „Meine Größe finden” auf Ihren Produktseiten hinzufügen
Die UI direkt im Theme-Editor anpassen

Unsere App erstellt außerdem automatisierte Datenflüsse für Produkte, Bestellungen und Retouren, um stets aktuell zu bleiben. Diese Daten werden täglich abgerufen. Bei der Installation erstellt die App einen WebPixel, der zur Verfolgung mehrerer Metriken verwendet wird, aus denen wir den ROI der Lösung ableiten.

2. Funktion „Ähnliche Produkte”

Ähnliche Produkte schlägt alternative Produkte vor, wenn eine Größe nicht vorrätig ist. Diese Funktion steigert Conversions, indem Kunden relevante Alternativen angeboten werden. Verfügbare Anzeigemodi

Modus	Beschreibung
Popup (automatisch)	Automatisches Popup beim Hover über Größe (Desktop) / Schaltfläche (Mobil)
Schaltfläche (automatisch)	Automatische CTA-Schaltfläche in Warenkorbähe bei Nichtverfügbarkeit
Nur benutzerdefinierte Schaltflächen	Sie platzieren Schaltflächen manuell über den Theme-Editor
Popup + benutzerdefiniert	Automatisches Popup + zusätzliche benutzerdefinierte Schaltflächen
Schaltfläche + benutzerdefiniert	Automatische Schaltfläche + zusätzliche benutzerdefinierte Schaltflächen

Konfiguration Schritt 1: Anzeigemodus wählen Suchen Sie in den Kleep App Embed-Einstellungen die Option „Empfohlene Produkte anzeigen” und wählen Sie den gewünschten Modus aus dem Dropdown-Menü.

Auswahl des Anzeigemodus für ähnliche Produkte Benutzerdefinierte Schaltflächen hinzufügen (für benutzerdefinierte Modi) Wenn Sie einen Modus mit „benutzerdefiniert” gewählt haben, können Sie Schaltflächen an bestimmten Positionen hinzufügen:

Gehen Sie zum Produktseiten-Template im Theme-Editor
Klicken Sie im gewünschten Abschnitt auf Block hinzufügen
Klicken Sie auf den Apps-Tab und wählen Sie „Kleep Similar Button”
Positionieren Sie den Block wie gewünscht und speichern Sie

Kleep Similar Button-Block hinzufügen

Schaltflächen für ähnliche Produkte erscheinen nur, wenn eine Variante nicht vorrätig ist. Es ist normal, wenn Sie sie nicht bei allen Produkten sehen.

Mehrere Schaltflächen hinzufügen Sie können beliebig viele Schaltflächen für ähnliche Produkte auf der Produktseite hinzufügen. Um mehrere Schaltflächen zu ermöglichen, muss das Widget auf einen der folgenden Modi eingestellt sein: custom_buttons, popup+custom oder button+custom. Für OS 2.0-Themes:

Gehen Sie zu Online Store → Customize
Öffnen Sie das Produktseiten-Template
Klicken Sie auf Block hinzufügen → Kleep Similar Button
Wiederholen Sie dies, wenn Sie 2+ Schaltflächen auf der Seite wünschen

Jede Schaltfläche erscheint automatisch nur, wenn die ausgewählte Variante nicht vorrätig ist.

3. Kleep-Suchfunktion

Kleep Search ersetzt die native Shopify-Suche durch eine optimierte Suche mit Größenfiltern und personalisierten Empfehlungen. Schritt 1: Benutzerdefinierte Suche aktivieren Aktivieren Sie in den Kleep App Embed-Einstellungen die Option „Enable custom search”.

Benutzerdefinierte Suche aktivieren Schritt 2: Such-Template aufrufen Klicken Sie im Theme-Editor auf das Dropdown-Menü oben (Standard: „Startseite”) und wählen Sie „Search” aus der Template-Liste.

Such-Template auswählen Schritt 3: Native Suche verbergen Verbergen oder entfernen Sie im Template-Abschnitt den nativen „Search results”-Block durch Klick auf das Augensymbol.

Native Suche verbergen Schritt 4: Kleep-Suchblock hinzufügen Klicken Sie auf Abschnitt hinzufügen und wählen Sie dann im Apps-Tab „Search” (kleep-dev).

Kleep-Suchblock hinzufügen Schritt 5: Optionen konfigurieren Klicken Sie auf den hinzugefügten Suchblock, um auf die Einstellungen zuzugreifen: Anzahl der Ergebnisse, Raster-/Listenansicht, Suchverzögerung usw.

Suchkonfigurationsoptionen

4. Retouren-Integration (optional)

Wenn Sie eine Retourenmanagement-Plattform verwenden, kann Kleep Retourendaten integrieren, um Größenempfehlungen zu verbessern. Unterstützte Retouren-Anbieter

Global-e
Aftership
Fast Return
Return Go
Sonstige (kontaktieren Sie uns)

Konfiguration

Gehen Sie im Kleep Dashboard zu Einstellungen → Retouren
Wählen Sie Ihren Retouren-Anbieter
Folgen Sie den anbieterspezifischen Anweisungen, um Ihr Konto zu verbinden

Wenn Ihr Anbieter nicht aufgeführt ist, kontaktieren Sie uns unter support@kleep.ai — wir können eine benutzerdefinierte Integration über SFTP oder API einrichten.

5. Ereignis-Tracking & Analytics

Kleep verfolgt automatisch Benutzerinteraktionen für Analytics. Stellen Sie sicher, dass das Tracking vor dem Go-Live korrekt funktioniert. Verfolgte Ereignisse

Ereignis	Beschreibung
`kleep_button_click`	Benutzer hat die Größenratgeber-Schaltfläche geklickt
`kleep_drawer_open`	Größenratgeber-Drawer geöffnet
`kleep_size_recommended`	Eine Größenempfehlung wurde angezeigt
`kleep_add_to_cart`	Benutzer hat Produkt über Kleep dem Warenkorb hinzugefügt
`kleep_similar_click`	Benutzer hat auf ein ähnliches Produkt geklickt

Überprüfung So überprüfen Sie, ob Ereignisse korrekt ausgelöst werden:

Öffnen Sie die Entwicklertools Ihres Browsers (F12)
Gehen Sie zum Tab Netzwerk
Filtern Sie nach „kleep”
Interagieren Sie mit der Größenratgeber-Schaltfläche
Sie sollten API-Aufrufe für jedes Ereignis sehen

Vor dem Go-Live: Stellen Sie sicher, dass mindestens 5 Ereignisse ausgelöst werden und die Payloads gültig sind. Führen Sie eine vollständige Benutzerreise durch (Schaltflächen-Klick → Größenempfehlung → In den Warenkorb), um die Integration zu validieren.

6. CSS-Anpassung

Sie können das Erscheinungsbild von Kleep-Elementen (Schaltflächen, Popups, Suche) durch benutzerdefiniertes CSS anpassen. Wo Sie CSS hinzufügen In den Kleep App Embed-Einstellungen finden Sie ein Feld „Input custom CSS styles”. Fügen Sie dort Ihr benutzerdefiniertes CSS ein.

Benutzerdefiniertes CSS-Feld Anpassungsbeispiel

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

Wenn Sie mehrere Shopify-Umgebungen haben (Entwicklung, Staging, Produktion), müssen Sie Kleep für jede einzeln konfigurieren. Einrichtung für jede Umgebung

Produktions-Shop — Hauptshop, vollständig konfiguriert
Staging-/Entwicklungs-Shops — Zum Testen vor der Veröffentlichung in der Produktion

Für jede Umgebung:

Kleep-App installieren
App Embed aktivieren
Ihren Kleep-CSM kontaktieren, um die Umgebung mit Ihrem Konto zu verknüpfen

Testen Sie Änderungen immer zuerst im Staging, bevor Sie sie in der Produktion anwenden.

Umgebungsspezifische URLs Teilen Sie Ihrem Kleep-CSM Folgendes mit:

Produktions-URL: https://www.yourbrand.com
Staging-URL: https://staging.yourbrand.com (falls zutreffend)
Entwicklungs-URL: https://dev.yourbrand.com (falls zutreffend)

7.5 CTA-Schaltfläche & ähnliche Produkte — Vollständiger Installationsleitfaden

Die vollständige technische Referenz für die Installation der Kleep-CTA-Schaltfläche und der Funktion „Ähnliche Produkte” (einschließlich des gesamten Liquid-Codes, des Einstellungsschemas und der Einrichtung der sekundären Schaltfläche) finden Sie im dedizierten Leitfaden: CTA-Schaltfläche & ähnliche Produkte — Vollständiger Installationsleitfaden

8. Vintage-Themes - Größenratgeber einrichten

Vintage-Themes (auch „Legacy” genannt oder vor Online Store 2.0 erstellt) unterstützen keine App-Blöcke. Die Installation erfordert Liquid-Code-Änderungen.

Dieser Abschnitt erfordert Shopify-Entwicklungskenntnisse (Liquid).

Voraussetzungen

Zugriff auf den Theme-Code-Editor (Online Store → Themes → Code bearbeiten)
Kleep App Embed muss in Ihrem Shopify-Admin aktiviert sein (Online Store → Themes → Customize → App embeds → Kleep)

Schritt 1: App Embed aktivieren Gehen Sie in Ihrem Shopify-Admin zu Online Store → Themes → Customize → App embeds und aktivieren Sie die Kleep-App. Schritt 2: Snippet aufrufen Fügen Sie folgenden Code dort ein, wo Kleep erscheinen soll. Er muss Teil des Product info-Blocks im Ordner snippets sein:

Code

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

Schritt 3: Button-Snippet erstellen Erstellen Sie eine neue Datei mit dem Namen kleep-button.liquid in Ihrem Ordner snippets. Fügen Sie folgenden Inhalt ein:

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>

Schritt 4: Einstellungsschema hinzufügen Fügen Sie folgende Optionen am Ende der Abschnittsdatei zu Ihrem Einstellungsschema hinzu:

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
    }

Schritt 5: Validieren Überprüfen Sie die Updates im Shopify Theme Customize-Bereich. Konfigurieren Sie visuelle Einstellungen in den Einstellungen des Produktinformationsblocks. Optional: Sekundäre Schaltfläche Wenn Sie eine sekundäre Schaltfläche hinzufügen möchten, erstellen Sie eine neue Datei mit dem Namen kleep-secondary-button.liquid in Ihrem Ordner 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>

Fügen Sie folgenden Code dort ein, wo Kleep erscheinen soll. Er muss Teil des Product info-Blocks im Ordner snippets sein.

Code

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

9. Vintage-Themes - Ähnliche Produkte einrichten

Schritt 1: Snippet erstellen Erstellen Sie eine Datei snippets/kleep-similar-button.liquid mit folgendem 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>

Schritt 2: Snippet rendern Fügen Sie diese Zeile dort ein, wo die Schaltfläche erscheinen soll:

Code

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

Typische Platzierung: unter den Variantenselektoren oder in der Nähe des „In den Warenkorb”-Formulars. Schritt 3: Den richtigen Modus aktivieren Da Vintage-Themes keine OS 2.0-Blöcke einfügen können, muss das Widget einen der folgenden Modi verwenden:

custom_buttons
popup+custom
button+custom

Mehrere Schaltflächen hinzufügen Um mehrere Schaltflächen zu erstellen, platzieren Sie den Snippet-Code einfach an verschiedenen Stellen im Produkt-Template:

Code

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

Jeder Snippet-Aufruf erstellt eine zusätzliche Schaltfläche. Jede Schaltfläche erscheint automatisch nur, wenn die ausgewählte Variante nicht vorrätig ist.

10. Übersetzungen (i18n)

Fügen Sie folgende Übersetzungen zu den Locale-Dateien Ihres Themes hinzu. Englisch (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"
          }
        }
      }
    }

Französisch (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"
          }
        }
      }
    }

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

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

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

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

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

Portugiesisch (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 Referenz

CTA-Position auf dem PDP Die Position wird durch DOM-Selektoren in KleepSDK.getConstants() definiert:

targetProductInfoBlockQueries — Array von Selektoren, die auf den Hauptcontainer mit Produktdetails (Titel, Preis, Größen usw.) zeigen. Das Skript iteriert durch diese Selektoren und verwendet den ersten gefundenen als Einfügepunkt für den CTA oder Popups.
targetVariantQueries — Wo sich Größen-/Variantenoptionen befinden. Sobald der Produktinformationsblock gefunden wurde, sucht das Skript darin nach Variantenelementen (wie Größenselektoren). Jedes Varianten-<label> (oder Äquivalent) wird zum Ziel für das Anhängen des Popup-CTA.

Popup vs. Schaltfläche (Desktop vs. Mobil) Der Gerätetyp wird mit checkIfMobile() erkannt: Diese Funktion überprüft den navigator.userAgent-String des Browsers gegen eine Liste mobiler Geräte (z. B. iPhone, Android, iPad).

Desktop: Der CTA wird als Hover-Popups neben den Variantenbeschriftungen angezeigt
Mobil: Das Skript ersetzt Hover-Popups durch eine einzelne Schaltfläche, da Hover-Interaktionen auf Touchscreens nicht funktionieren

Produktreferenz-Konfiguration Kleep verwendet Produktreferenzen, um Produkte in Ihrem Katalog abzugleichen. Konfigurieren Sie, wie diese identifiziert werden: Referenzfeld: Wo die Produktreferenz der Marke zu finden ist

Shopify-SKU-Feld
Metafeld (geben Sie an, welches)
Tags (mit Präfix, z. B. ref:ABC123)

Master-Produkt-Extraktion: Wie die Master-Produkt-ID aus Varianten-SKUs abgeleitet wird

Beispiel: Wenn Varianten-SKUs ABC123-S, ABC123-M, ABC123-L sind, ist die Master-Produktreferenz ABC123
Regel: Erste 6 Zeichen nehmen / Nach aufteilen und ersten Teil nehmen / Benutzerdefinierter regulärer Ausdruck

Konfigurieren Sie dies unter Kleep Dashboard → Einstellungen → Produktreferenzen. Anpassungshinweise

Andere Varianten der Platzierung/des Layouts werden nicht angeboten, abgesehen von der Anpassung der Selektoren und des CSS
Um das Erscheinungsbild zu ändern (Farben, Abstände, Schriften usw.), fügen Sie Ihr CSS in das Feld „Input custom CSS styles” in den Kleep App Embed-Einstellungen ein

12. Go-Live-Checkliste

Überprüfen Sie vor dem Go-Live folgendes: Schaltflächenanzeige

Schaltfläche auf mindestens 3 Produktseiten sichtbar
Schaltfläche funktioniert auf Desktop UND Mobil
Keine CSS-Konflikte (Schaltfläche nicht verborgen oder falsch ausgerichtet)
Keine Cumulative Layout Shift (CLS)-Probleme — Schaltfläche verursacht keinen Seitensprung
Nur Vintage-Themes: Commit in der Versionskontrolle referenziert

Datenqualität

>98 % der Produkte haben eine zugeordnete Größentabelle
<1 % der Varianten haben fehlende Maße
0 verwaiste SKUs (Produkte ohne Kategorie-Zuordnung)

Tracking

Alle 5 Ereignisse werden korrekt ausgelöst
Vollständige Benutzerreise getrackt (Schaltfläche → Empfehlung → Warenkorb)
Payloads validiert

Performance

JS-Fehler < 1 %
API-Latenz P95 < 500 ms
Monitoring eingerichtet

Benutzerreise

Größenratgeber öffnet sich korrekt
Empfehlungen werden korrekt angezeigt
In den Warenkorb funktioniert über den Größenratgeber
Ähnliche Produkte werden angezeigt (falls aktiviert)
Responsiv auf allen Geräten

✅ Sobald alle Punkte überprüft sind, benachrichtigen Sie Ihren Kleep-CSM für die finale QA-Validierung vor dem Go-Live.

13. Fehlerbehebung

Die Schaltfläche erscheint nicht

☑️ Überprüfen Sie, ob das Kleep App Embed aktiviert ist (Schalter EIN)
☑️ Stellen Sie sicher, dass Sie die Theme-Änderungen gespeichert haben
☑️ Leeren Sie Ihren Browser-Cache und laden Sie die Seite neu
☑️ Prüfen Sie, ob das Produkt Größenvarianten konfiguriert hat

Ähnliche Produkte erscheinen nicht

☑️ Prüfen Sie, ob der Modus in den Einstellungen nicht auf „Deaktiviert” gesetzt ist
☑️ Schaltflächen erscheinen nur, wenn eine Variante nicht vorrätig ist
☑️ Überprüfen Sie für „benutzerdefinierte” Modi, ob Sie einen App-Block hinzugefügt haben

Suche funktioniert nicht

☑️ Überprüfen Sie, ob „Enable custom search” im App Embed aktiviert ist
☑️ Stellen Sie sicher, dass Sie den Kleep-Suchblock zum Such-Template hinzugefügt haben
☑️ Prüfen Sie, ob die native Suche verborgen ist

Ich kann die Kleep-App-Blöcke nicht finden Wenn Sie keine Kleep-Blöcke im „Apps”-Tab beim Klick auf „Block hinzufügen” sehen, ist Ihr Theme wahrscheinlich ein Vintage-Theme. Weitere Installationsanweisungen finden Sie in den Abschnitten 11–12. Datenzuordnungsprobleme

☑️ Prüfen Sie, ob Ihre Produktdaten die erwarteten Felder enthalten (Tags, Metafelder usw.)
☑️ Überprüfen Sie die Zuordnungen unter Kleep Dashboard → Einstellungen → Datenzuordnung
☑️ Führen Sie den Produktscan erneut aus, um erkannte Werte zu aktualisieren

Ereignisse werden nicht ausgelöst

☑️ Überprüfen Sie die Browser-Konsole auf JavaScript-Fehler
☑️ Prüfen Sie, ob keine Werbeblocker oder Datenschutz-Erweiterungen Kleep-Anfragen blockieren
☑️ Testen Sie im Inkognito-Modus

Support kontaktieren Wenn Sie auf hier nicht aufgeführte Probleme stoßen, kontaktieren Sie das Kleep-Team:

📧 E-Mail: support@kleep.ai

Vielen Dank für die Nutzung von Kleep! 🎉

Unser Team steht Ihnen bei der Installation und Optimierung Ihres Größenratgebers zur Verfügung.---

Cookies & Datenschutz

Kleep wird vollständig durch die Besuchereinwilligung gesteuert: Das Skript wird erst nach der Einwilligung durch Ihre CMP geladen, und Sie müssen das Laden entsprechend bedingen. Die vollständige Liste der Tracker, der verarbeiteten Daten, der Zwecke und Rechtsgrundlagen, des Hostings, der Unterauftragsverarbeiter und der Sicherheit finden Sie unter Cookies, CMP & Datenschutz.

Willkommen

CMS

Mobil

Dashboard

Daten

Datenschutz

Shopify Integrationsleitfaden

Überblick über den Integrationsprozess

Onboarding

Installation & Tests

Nach der Integration

1. Funktionsumfang

2. Funktion „Ähnliche Produkte”

3. Kleep-Suchfunktion

4. Retouren-Integration (optional)

5. Ereignis-Tracking & Analytics

6. CSS-Anpassung

7. Mehrere Umgebungen

7.5 CTA-Schaltfläche & ähnliche Produkte — Vollständiger Installationsleitfaden

8. Vintage-Themes - Größenratgeber einrichten

9. Vintage-Themes - Ähnliche Produkte einrichten

10. Übersetzungen (i18n)

11. Technische Referenz

12. Go-Live-Checkliste

13. Fehlerbehebung

Vielen Dank für die Nutzung von Kleep! 🎉

Cookies & Datenschutz

​Überblick über den Integrationsprozess

​Onboarding

​Installation & Tests

​Nach der Integration

​1. Funktionsumfang

​2. Funktion „Ähnliche Produkte”

​3. Kleep-Suchfunktion

​4. Retouren-Integration (optional)

​5. Ereignis-Tracking & Analytics

​6. CSS-Anpassung

​7. Mehrere Umgebungen

​7.5 CTA-Schaltfläche & ähnliche Produkte — Vollständiger Installationsleitfaden

​8. Vintage-Themes - Größenratgeber einrichten

​9. Vintage-Themes - Ähnliche Produkte einrichten

​10. Übersetzungen (i18n)

​11. Technische Referenz

​12. Go-Live-Checkliste

​13. Fehlerbehebung

​Vielen Dank für die Nutzung von Kleep! 🎉

​Cookies & Datenschutz

Überblick über den Integrationsprozess

Onboarding

Installation & Tests

Nach der Integration

1. Funktionsumfang

2. Funktion „Ähnliche Produkte”

3. Kleep-Suchfunktion

4. Retouren-Integration (optional)

5. Ereignis-Tracking & Analytics

6. CSS-Anpassung

7. Mehrere Umgebungen

7.5 CTA-Schaltfläche & ähnliche Produkte — Vollständiger Installationsleitfaden

8. Vintage-Themes - Größenratgeber einrichten

9. Vintage-Themes - Ähnliche Produkte einrichten

10. Übersetzungen (i18n)

11. Technische Referenz

12. Go-Live-Checkliste

13. Fehlerbehebung

Vielen Dank für die Nutzung von Kleep! 🎉

Cookies & Datenschutz