> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kleep.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# 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
Sobald der Vertrag unterzeichnet ist, startet Ihr Kleep-Ansprechpartner die Abrechnung über GoCardless: [Lastschrift einrichten →](https://pay.gocardless.com/BRT000352V7T67Q).
Ein kurzes Gespräch mit Ihrem Kleep-Ansprechpartner, um Zeitplan, technische Ansprechpartner und shopspezifische Anforderungen vor der Installation abzustimmen.
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 →](https://ihu3s9tz3r8.typeform.com/to/fYQw9zJ5)**
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.
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](https://help.shopify.com/en/manual/your-account/staff-accounts/collaborator-accounts).
Wir senden eine Mitarbeiter-Zugriffsanfrage von unserem Shopify-Partner-Konto. Genehmigen Sie diese unter **Einstellungen → Benutzer und Berechtigungen → Mitarbeiter** in Ihrem Shopify-Admin.
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.
Ü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 →](https://www.figma.com/design/DvsqgNPSjVPVPLjKV2efAY/KLEEP-CTA-POSITIONING-SUGGESTIONS?node-id=0-1\&p=f\&t=92MwlxQkzlfAYyk5-0).
### Installation & Tests
Unser Team dupliziert Ihr aktuelles Shopify-Theme und installiert Kleep auf dem Duplikat, damit Ihr Live-Storefront unberührt bleibt, während Sie testen.
Wir senden Ihnen einen privaten Vorschau-Link, um die Integration vollständig zu testen und Feedback oder notwendige Anpassungen zu teilen.
Sobald Sie zustimmen, veröffentlichen wir Kleep in Ihrem Live-Theme.
### Nach der Integration
Wir stellen Anmeldedaten für Ihr Team bereit, um auf das [Kleep Dashboard](https://dashboard.kleep.ai) zuzugreifen, wo Sie die Kleep-Leistungs-KPIs in Echtzeit überwachen können.
Wir aktivieren [Fit Feedback](/de/dashboard/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:
1. Unseren CTA „Meine Größe finden" auf Ihren Produktseiten hinzufügen
2. 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:
1. Gehen Sie zum **Produktseiten**-Template im Theme-Editor
2. Klicken Sie im gewünschten Abschnitt auf **Block hinzufügen**
3. Klicken Sie auf den **Apps**-Tab und wählen Sie **„Kleep Similar Button"**
4. 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**
1. Gehen Sie im Kleep Dashboard zu **Einstellungen → Retouren**
2. Wählen Sie Ihren Retouren-Anbieter
3. Folgen Sie den anbieterspezifischen Anweisungen, um Ihr Konto zu verbinden
Wenn Ihr Anbieter nicht aufgeführt ist, kontaktieren Sie uns unter [support@kleep.ai](mailto: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:
1. Öffnen Sie die Entwicklertools Ihres Browsers (F12)
2. Gehen Sie zum Tab **Netzwerk**
3. Filtern Sie nach „kleep"
4. Interagieren Sie mit der Größenratgeber-Schaltfläche
5. 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**
```css theme={null}
.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**
1. **Produktions-Shop** — Hauptshop, vollständig konfiguriert
2. **Staging-/Entwicklungs-Shops** — Zum Testen vor der Veröffentlichung in der Produktion
Für jede Umgebung:
1. Kleep-App installieren
2. App Embed aktivieren
3. 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](/de/cms/cta-button)
***
## 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:
```jsx theme={null}
{% 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:
```jsx theme={null}
```
**Schritt 4: Einstellungsschema hinzufügen**
Fügen Sie folgende Optionen am Ende der Abschnittsdatei zu Ihrem Einstellungsschema hinzu:
```json theme={null}
{
"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`:
```jsx theme={null}
```
Fügen Sie folgenden Code dort ein, wo Kleep erscheinen soll. Er muss Teil des `Product info`-Blocks im Ordner `snippets` sein.
```jsx theme={null}
{% 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:
```jsx theme={null}
{% 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 %}
```
**Schritt 2: Snippet rendern**
Fügen Sie diese Zeile dort ein, wo die Schaltfläche erscheinen soll:
```jsx theme={null}
{% 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:
```jsx theme={null}
{% 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`)**
```json theme={null}
{
"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`)**
```json theme={null}
{
"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`)**
```json theme={null}
{
"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`)**
```json theme={null}
{
"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`)**
```json theme={null}
{
"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`)**
```json theme={null}
{
"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`)**
```json theme={null}
{
"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`)**
```json theme={null}
{
"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-`
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:
1. Gehen Sie zum **Produktseiten**-Template im Theme-Editor
2. Klicken Sie im gewünschten Abschnitt auf **Block hinzufügen**
3. Klicken Sie auf den **Apps**-Tab und wählen Sie **„Kleep Similar Button"**
4. Positionieren Sie den Block wie gewünscht und speichern Sie
Kleep Similar Button-Block hinzufügen
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**
1. Gehen Sie im Kleep Dashboard zu **Einstellungen → Retouren**
2. Wählen Sie Ihren Retouren-Anbieter
3. Folgen Sie den anbieterspezifischen Anweisungen, um Ihr Konto zu verbinden
Benutzerdefiniertes CSS-Feld
**Anpassungsbeispiel**