> ## 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: CTA-Schaltfläche & ähnliche Produkte
## Shopify V2 Integrationsleitfaden
Dieser Abschnitt zeigt, wie Sie Kleep KI-Größenberatung zu Ihrem Shopify-Shop hinzufügen.
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.
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.
**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.
```jsx theme={null}
{% 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:
```jsx theme={null}
```
**Schritt 4: Schema-Optionen für Einstellungen hinzufügen**
Fügen Sie folgende Optionen am Ende der Seite zu Ihrem Einstellungsschema hinzu:
```jsx 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": "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.
```jsx 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"
}
}
}
```
**Schritt 6: Weitere Sprachen-Übersetzungen hinzufügen**
Fügen Sie weitere Übersetzungen zu den Locales Ihres Themes hinzu.
```jsx 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"
}
}
}
```
```jsx 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"
}
}
}
```
```jsx 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"
}
}
}
```
```jsx 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"
}
}
}
```
```jsx 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": "商品を見る"
}
}
}
```
```jsx 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": "상품 보기"
}
}
}
```
```jsx 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"
}
}
}
```
1. Überprüfen Sie die Updates im Shopify Theme Customize-Bereich. Konfigurieren Sie visuelle Einstellungen in den Einstellungen des Produktinformationsblocks.
2. 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:
```
```
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 %}
```
## 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:
```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 im Produkt-Template 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 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
1. Gehen Sie zu **Online Store → Themes → Customize**.
2. Öffnen Sie den Abschnitt **App embeds**.
3. Aktivieren Sie die **Kleep App.**
4. 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:
1. Öffnen Sie **Online Store → Customize**.
2. Gehen Sie zum Template der **Produktseite**.
3. Klicken Sie im gewünschten Abschnitt auf **Block hinzufügen**.
4. Wählen Sie **Kleep Similar Button**.
5. 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-\
**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.
```jsx theme={null}
{% 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:
**Schritt 5: Englische Übersetzungen hinzufügen**
Fügen Sie englische Übersetzungen zu den Locales Ihres Themes hinzu.
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:
1. Öffnen Sie **Online Store → Customize**.
2. Gehen Sie zum Template der **Produktseite**.
3. Klicken Sie im gewünschten Abschnitt auf **Block hinzufügen**.
4. Wählen Sie **Kleep Similar Button**.
5. 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-\