Shopify: CTA-Schaltfläche & ähnliche Produkte

Shopify V2 Integrationsleitfaden

Dieser Abschnitt zeigt, wie Sie Kleep KI-Größenberatung zu Ihrem Shopify-Shop hinzufügen.

Schritt-für-Schritt-Video-Walkthrough

Folgen Sie unserem Tango-Tutorial, um die Kleep-Schaltfläche zu Ihrem Shop in Online Store 2.0-Themes hinzuzufügen.

Shopify V1 Integrationsleitfaden

1. Größenberatung

Dieser Abschnitt zeigt, wie Sie Kleep KI-Größenberatung zu Ihrer Shopify-Codebasis hinzufügen.

Bevorzugen Sie einen visuellen Walkthrough?

Sehen Sie sich das Schritt-für-Schritt-Tango-Tutorial zur Installation von Kleep in einem Shopify V1-Shop an.

Schritte

Schritt 1: App Embed aktivieren Stellen Sie sicher, dass die Kleep-App in Ihren App Embeds aktiviert ist.

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

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

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

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

Kleep-Schaltfläche

<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: Schema-Optionen für Einstellungen hinzufügen Fügen Sie folgende Optionen am Ende der Seite zu Ihrem Einstellungsschema hinzu:

Shopify-Optionen

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

So fügen Sie eigene CSS-Stile hinzu:

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.

Zum Beispiel:

Schritt 5: Englische Übersetzungen hinzufügen Fügen Sie englische Übersetzungen zu den Locales Ihres Themes hinzu.

Übersetzungen

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

Schritt 6: Weitere Sprachen-Übersetzungen hinzufügen Fügen Sie weitere Übersetzungen zu den Locales Ihres Themes hinzu.

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

Überprüfen Sie die Updates im Shopify Theme Customize-Bereich. Konfigurieren Sie visuelle Einstellungen in den Einstellungen des Produktinformationsblocks.
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. Fügen Sie folgenden Inhalt ein:

Code der sekundären Schaltfläche

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

Render-Snippet

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

2. Ähnliche Produkte

„Ähnliche Produkte” für V1 Shopify-Themes installieren

In diesem Fall müssen Sie ein Liquid-Snippet manuell hinzufügen.

Schritt 1 - Snippet erstellen

Erstellen Sie: snippets/kleep-similar-button.liquid Fügen Sie folgenden Code ein:

Snippet für ähnliche Produkte-Schaltfläche

{% 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 im Produkt-Template rendern

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

Render-Snippet

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

Typische Platzierung: unter den Variantenselektoren oder in der Nähe des „In den Warenkorb”-Formulars.

Schritt 3 - Den richtigen Modus für V1-Themes aktivieren

Da V1-Themes keine OS2.0-Blöcke einfügen können, muss das Widget einen der folgenden Modi verwenden:

custom_buttons
popup+custom
button+custom

„Ähnliche Produkte” für V2-Stores (Online Store 2.0) installieren

Moderne Shopify-Themes unterstützen App Embeds und benutzerdefinierte Blöcke. Keine Code-Änderungen erforderlich.

Schritt 1 — Kleep App Embed aktivieren

Gehen Sie zu Online Store → Themes → Customize.
Öffnen Sie den Abschnitt App embeds.
Aktivieren Sie die Kleep App.
Theme speichern.

Dadurch wird das Kernscript aktiviert, das die Logik für ähnliche Produkte verwaltet.

Suchen Sie als Nächstes nach „Empfohlene Produkte anzeigen”

Schritt 2 — Anzeigemodus für ähnliche Produkte auswählen

Wählen Sie in der Kleep-Widget-Konfiguration, wie ähnliche Produkte auf der Produktseite angezeigt werden sollen:

disabled – deaktiviert die Funktion vollständig
popup – fügt automatisch ein Popup über Varianten-/Größenselektoren auf Desktop ein und ersetzt die Standardschaltfläche auf Mobil
button – fügt automatisch eine CTA-Schaltfläche in der Nähe des Warenkorbs ein, wenn die ausgewählte Variante nicht vorrätig ist
custom_buttons – deaktiviert alle automatischen Platzierungen; der Händler muss eine oder mehrere „Kleep Similar Button”-Blöcke manuell hinzufügen
popup+custom – behält das automatische Popup und aktiviert zusätzlich benutzerdefinierte Schaltflächen im Theme
button+custom – behält die automatische CTA-Schaltfläche und aktiviert zusätzlich benutzerdefinierte Schaltflächen im Theme

Speichern Sie anschließend das Theme, und es wird sofort in Ihrem Shop (Produktseite) angezeigt. Schritt 3 — Benutzerdefinierte Schaltflächen hinzufügen (nur für custom_buttons, popup+custom, button+custom) Wenn Ihr ausgewählter Modus benutzerdefinierte Schaltflächen enthält:

Öffnen Sie Online Store → Customize.
Gehen Sie zum Template der Produktseite.
Klicken Sie im gewünschten Abschnitt auf Block hinzufügen.
Wählen Sie Kleep Similar Button.
Theme speichern.

Benutzerdefinierte Schaltflächen werden nur angezeigt, wenn die ausgewählte Variante nicht vorrätig ist.

Mehrere Schaltflächen für „Ähnliche Produkte” hinzufügen (primär & sekundär)

Sie können beliebig viele Schaltflächen für ähnliche Produkte auf der Produktseite hinzufügen. Dies funktioniert sowohl für OS 2.0-Themes als auch für V1/Legacy-Themes.

Einen Modus aktivieren, der benutzerdefinierte Schaltflächen unterstützt

Um mehrere Schaltflächen zu ermöglichen, muss das Widget auf einen der folgenden Modi eingestellt sein:

custom_buttons
popup+custom
button+custom

Diese Modi aktivieren die manuelle Platzierung, sodass Händler so viele Schaltflächen wie nötig einfügen können.

Für Online Store 2.0 (moderne Themes)

OS 2.0-Themes ermöglichen das visuelle Hinzufügen von Schaltflächen über den Theme-Editor. Schritte:

Gehen Sie zu Online Store → Customize
Öffnen Sie das Produktseiten-Template
Klicken Sie auf Block hinzufügen → Kleep Similar Button
Fügen Sie die Schaltfläche an beliebiger Stelle ein
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.

Für V1 / Legacy-Themes

Legacy-Themes unterstützen keine Blöcke, aber Sie können das Snippet mehrmals rendern. Fügen Sie dieses Snippet an jeder Stelle ein, wo eine Schaltfläche erscheinen soll: {% render 'kleep-similar-button' %} Um mehrere Schaltflächen zu erstellen, platzieren Sie diesen Code einfach an verschiedenen Stellen im Produkt-Template. Jeder Snippet-Aufruf erstellt eine zusätzliche Schaltfläche.

Zusammenfassung

Um mehrere Schaltflächen für ähnliche Produkte hinzuzufügen: Aktivieren Sie einen Modus mit benutzerdefinierten Schaltflächen → fügen Sie mehrere OS 2.0-Blöcke oder mehrere Snippet-Aufrufe hinzu → alle Schaltflächen funktionieren automatisch, wenn die Variante nicht vorrätig ist.

CTA-Position auf dem PDP Die Position wird durch DOM-Selektoren in KleepSDK.getConstants() definiert. targetProductInfoBlockQueries – wo sich die Produktinformationen befinden. Dies ist ein 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) Wir erkennen den Gerätetyp mit checkIfMobile(): Diese Funktion überprüft den navigator.userAgent-String des Browsers gegen eine Liste mobiler Geräte (z. B. iPhone, Android, iPad).

Auf Desktop wird der CTA als Hover-Popups neben den Variantenbeschriftungen angezeigt.
Auf Mobil ersetzt das Skript Hover-Popups durch eine einzelne Schaltfläche, da Hover-Interaktionen auf Touchscreens nicht funktionieren.

Anpassung

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.

3. Suche

Hinweis: Sie müssen keinen Theme-Code ändern, um die Kleep-Suche in Shopify V1 einzurichten. Öffnen Sie den Theme-Editor, schalten Sie das Kleep App Embed ein, aktivieren Sie die benutzerdefinierte Suche und ersetzen Sie dann den Standard-Suchblock durch den Kleep-Suchblock. 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. All dies wird im Folgenden beschrieben Theme-Editor öffnen Gehen Sie zu Online Store > Themes, suchen Sie das zu bearbeitende Theme und klicken Sie auf Customize. Kleep App Embed aktivieren Öffnen Sie den Abschnitt App embeds. Suchen Sie die Kleep-App und schalten Sie sie ein. Benutzerdefinierte Suche aktivieren (optional) Aktivieren Sie in den Kleep-Einstellungen „Enable custom search”.

Standardsuche ersetzen Öffnen Sie im Theme-Editor das Such-Template (navigieren Sie zur Such-Seiten-Vorlage).

Entfernen oder verbergen Sie den Standard-Suchabschnitt im Theme.

Fügen Sie den Kleep-Suchblock (aus dem Apps-Tab) hinzu und platzieren Sie ihn dort, wo die Standardsuche war.

Theme-Änderungen speichern. Die Suchfunktion ist als Liquid-Abschnitt innerhalb der App integriert, nicht als separater Liquid-Code. Die Aktivierung wird gesteuert durch:

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

Dadurch wird sichergestellt, dass nur bestimmte Shops (Domains) die Suchfunktion aktivieren können.Layout und Stile

Die Umschaltung zwischen Raster- und Listenansicht erfolgt nur über die Einstellung products_search_grid_layout in der App.

Gehen Sie dazu zur bereits hinzugefügten Suche und auf der rechten Seite sehen Sie die Konfigurationsoption.

Zusätzliche Stile (Schriften, Farben, Abstände) werden von uns im Code auf Shop-Basis implementiert, falls erforderlich.
Die gesamte Funktionalität ist an diesen Liquid-Abschnitt gebunden und wird über kleep_enable_custom_search in der App aktiviert, nicht durch das Hinzufügen von Liquid-Code zu den Theme-Einstellungen.
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.

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.

​Shopify V2 Integrationsleitfaden

Schritt-für-Schritt-Video-Walkthrough

​Shopify V1 Integrationsleitfaden

​1. Größenberatung

Bevorzugen Sie einen visuellen Walkthrough?

​Schritte

​2. Ähnliche Produkte

​„Ähnliche Produkte” für V1 Shopify-Themes installieren

​Schritt 1 - Snippet erstellen

​Schritt 2 - Snippet im Produkt-Template rendern

​Schritt 3 - Den richtigen Modus für V1-Themes aktivieren

​„Ähnliche Produkte” für V2-Stores (Online Store 2.0) installieren

​Schritt 1 — Kleep App Embed aktivieren

​Schritt 2 — Anzeigemodus für ähnliche Produkte auswählen

​Mehrere Schaltflächen für „Ähnliche Produkte” hinzufügen (primär & sekundär)

​Einen Modus aktivieren, der benutzerdefinierte Schaltflächen unterstützt

​Für Online Store 2.0 (moderne Themes)

​Für V1 / Legacy-Themes

​Zusammenfassung

​3. Suche

​Cookies & Datenschutz