> ## 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-knapp och liknande produkter
## Integrationsguide för Shopify V2
Det här avsnittet visar hur du lägger till Kleep AI Storleksguide i din Shopify-butik.
Följ vår Tango-tutorial för att lägga till Kleep-knappen i din butik på Online Store 2.0-teman.
## Integrationsguide för Shopify V1
## 1. Storleksguide
Det här avsnittet visar hur du lägger till Kleep AI Storleksguide i din Shopify-kodbas.
Se den steg-för-steg Tango-tutorialen för att installera Kleep i en Shopify V1-butik.
### Steg
**Steg 1: Aktivera App Embed**
Se till att Kleep-appen är aktiverad i dina App Embeds.
**Steg 2: Rendera knapp-snippeten**
Klistra in följande kod där du vill att Kleep ska visas. Den måste vara en del av `Product info`-blocket i mappen `snippets`.
```jsx theme={null}
{% render 'kleep-button', cms: section.settings %}
```
**Steg 3: Skapa knapp-snippetfilen**
Skapa en ny fil med namnet `kleep-button.liquid` i din mapp `snippets`. Lägg in följande innehåll:
```jsx theme={null}
```
**Steg 4: Lägg till inställningsschemaalternativ**
Lägg till följande alternativ i ditt inställningsschema i slutet av sidan:
```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
}
```
För att lägga till egna CSS-stilar:
* För att ändra utseendet (färger, avstånd, teckensnitt, osv.), klistra in din CSS i rutan **"Indata för anpassade CSS-stilar"** i Kleep App Embed-inställningarna.
Till exempel:
**Steg 5: Lägg till engelska översättningar**
Lägg till engelska översättningar i dina temaspråk.
```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"
}
}
}
```
**Steg 6: Lägg till översättningar för andra språk**
Lägg till andra översättningar i dina temaspråk.
```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. Validera uppdateringar i Shopify Theme Customize-området. Konfigurera visuella inställningar inom produktinformationsblockets inställningar.
2. Om du vill lägga till en sekundär knapp behöver du skapa en ny fil med namnet `kleep-secondary-button.liquid` i din mapp `snippets`. Lägg in följande innehåll:
```
```
Klistra in följande kod där du vill att Kleep ska visas. Den måste vara en del av `Product info`-blocket i mappen `snippets`.
```jsx theme={null}
{% render 'kleep-secondary-button', cms: section.settings %}
```
## 2. Liknande produkter
***
### Installera "Liknande produkter" för V1 Shopify-teman
I det här fallet måste du lägga till en Liquid-snippet manuellt.
### Steg 1 - Skapa en snippet
Skapa:
`snippets/kleep-similar-button.liquid`
Infoga följande kod:
```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 %}
```
### Steg 2 - Rendera snippeten i produktmallen
Infoga den här raden var du än vill att knappen ska visas:
```jsx theme={null}
{% render 'kleep-similar-button' %}
```
Typisk placering: under variantväljarna eller nära formuläret Lägg i varukorg.
### Steg 3 - Aktivera rätt läge för V1-teman
Eftersom V1-teman inte kan infoga OS2.0-block måste widgeten använda ett av:
* `custom_buttons`
* `popup+custom`
* `button+custom`
### **Installera "Liknande produkter" för V2-butiker (Online Store 2.0)**
Moderna Shopify-teman stöder app embeds och anpassade block. Inga kodändringar krävs.
### Steg 1 — Aktivera Kleep App Embed
1. Gå till **Online Store → Themes → Customize**.
2. Öppna avsnittet **App embeds**.
3. Aktivera **Kleep App.**
4. Spara temat.
Detta aktiverar kärnsskriptet som hanterar logiken för liknande produkter.
Hitta sedan **"Visa rekommenderade produkter"**
### Steg 2 — Välj visningsläge för liknande produkter
Välj hur liknande produkter ska visas på produktsidan i Kleep-widgetkonfigurationen:
* `disabled` – stänger av funktionen helt
* `popup` – lägger automatiskt till en popup ovanför variant-/storleksväljare på datorn och ersätter standardknappen på mobilen
* `button` – infogar automatiskt en CTA-knapp nära Lägg i varukorg-området när den valda varianten är slut i lager
* `custom_buttons` – inaktiverar all automatisk placering; handlaren måste manuellt lägga till ett eller flera "Kleep Similar Button"-block
* `popup+custom` – behåller den automatiska popupen och aktiverar även anpassade knappar som lagts till i temat
* `button+custom` – behåller den automatiska CTA-knappen och aktiverar även anpassade knappar som lagts till i temat
Spara sedan temat, så visas det omedelbart i din butik (Produktsidan).
**Steg 3 — Lägg till anpassade knappar (endast för custom\_buttons, popup+custom, button+custom)**
Om ditt valda läge inkluderar anpassade knappar:
1. Öppna **Online Store → Customize**.
2. Gå till mallen **Product page**.
3. Klicka på **Add Block** i önskat avsnitt.
4. Välj **Kleep Similar Button**.
5. Spara temat.
Anpassade knappar visas bara när den valda varianten är slut i lager.
## Lägga till flera knappar för "Liknande produkter" (primär och sekundär)
Du kan lägga till hur många knappar för liknande produkter som helst på produktsidan.
Detta fungerar för både OS 2.0-teman och V1- / äldre teman.
## Aktivera ett läge som stöder anpassade knappar
För att tillåta flera knappar måste widgeten vara inställd på ett av:
* custom\_buttons
* popup+custom
* button+custom
Dessa lägen aktiverar manuell placering, så handlare kan infoga så många knappar som behövs.
## För Online Store 2.0 (moderna teman)
OS 2.0-teman gör det möjligt att lägga till knappar visuellt via Theme Editor.
Steg:
* Gå till Online Store → Customize
* Öppna mallen Product page
* Klicka på Add block → Kleep Similar Button
* Lägg till knappen var du vill
* Upprepa om du vill ha 2+ knappar på sidan
Varje knapp visas automatiskt bara när den valda varianten är slut i lager.
## För V1- / äldre teman
Äldre teman stöder inte block, men du kan rendera snippeten flera gånger.
Infoga den här snippeten var du vill ha en knapp:
`{% render 'kleep-similar-button' %}`
För att skapa flera knappar, placera helt enkelt den här koden på olika ställen i produktmallen.
Varje snippet-anrop skapar en ytterligare knapp.
### Sammanfattning
För att lägga till flera knappar för liknande produkter:
Aktivera ett läge med anpassade knappar → lägg till flera OS 2.0-block eller flera snippet-anrop → alla knappar fungerar automatiskt när varianten är slut i lager.
***
**CTA-placering på PDP**
Placeringen definieras av DOM-väljare inuti `KleepSDK.getConstants().`
`targetProductInfoBlockQueries` – var produktinformationen finns. Det är en array av väljare som pekar på huvudbehållaren för produktdetaljer (titel, pris, storlekar, osv.). Skriptet itererar genom dessa väljare och använder den första det hittar som infogningspunkt för CTA eller popup-fönster.
`targetVariantQueries` – var storleks-/variantalternativ finns: När produktinformationsblocket har hittats söker skriptet inuti det efter variantelement (som storleksväljare). Varje variant-\
**Steg 2: Rendera knapp-snippeten**
Klistra in följande kod där du vill att Kleep ska visas. Den måste vara en del av `Product info`-blocket i mappen `snippets`.
```jsx theme={null}
{% render 'kleep-button', cms: section.settings %}
```
**Steg 3: Skapa knapp-snippetfilen**
Skapa en ny fil med namnet `kleep-button.liquid` i din mapp `snippets`. Lägg in följande innehåll:
**Steg 5: Lägg till engelska översättningar**
Lägg till engelska översättningar i dina temaspråk.
Hitta sedan **"Visa rekommenderade produkter"**
### Steg 2 — Välj visningsläge för liknande produkter
Välj hur liknande produkter ska visas på produktsidan i Kleep-widgetkonfigurationen:
* `disabled` – stänger av funktionen helt
* `popup` – lägger automatiskt till en popup ovanför variant-/storleksväljare på datorn och ersätter standardknappen på mobilen
* `button` – infogar automatiskt en CTA-knapp nära Lägg i varukorg-området när den valda varianten är slut i lager
* `custom_buttons` – inaktiverar all automatisk placering; handlaren måste manuellt lägga till ett eller flera "Kleep Similar Button"-block
* `popup+custom` – behåller den automatiska popupen och aktiverar även anpassade knappar som lagts till i temat
* `button+custom` – behåller den automatiska CTA-knappen och aktiverar även anpassade knappar som lagts till i temat
Spara sedan temat, så visas det omedelbart i din butik (Produktsidan).
**Steg 3 — Lägg till anpassade knappar (endast för custom\_buttons, popup+custom, button+custom)**
Om ditt valda läge inkluderar anpassade knappar:
1. Öppna **Online Store → Customize**.
2. Gå till mallen **Product page**.
3. Klicka på **Add Block** i önskat avsnitt.
4. Välj **Kleep Similar Button**.
5. Spara temat.
Anpassade knappar visas bara när den valda varianten är slut i lager.
## Lägga till flera knappar för "Liknande produkter" (primär och sekundär)
Du kan lägga till hur många knappar för liknande produkter som helst på produktsidan.
Detta fungerar för både OS 2.0-teman och V1- / äldre teman.
## Aktivera ett läge som stöder anpassade knappar
För att tillåta flera knappar måste widgeten vara inställd på ett av:
* custom\_buttons
* popup+custom
* button+custom
Dessa lägen aktiverar manuell placering, så handlare kan infoga så många knappar som behövs.
## För Online Store 2.0 (moderna teman)
OS 2.0-teman gör det möjligt att lägga till knappar visuellt via Theme Editor.
Steg:
* Gå till Online Store → Customize
* Öppna mallen Product page
* Klicka på Add block → Kleep Similar Button
* Lägg till knappen var du vill
* Upprepa om du vill ha 2+ knappar på sidan
Varje knapp visas automatiskt bara när den valda varianten är slut i lager.
## För V1- / äldre teman
Äldre teman stöder inte block, men du kan rendera snippeten flera gånger.
Infoga den här snippeten var du vill ha en knapp:
`{% render 'kleep-similar-button' %}`
För att skapa flera knappar, placera helt enkelt den här koden på olika ställen i produktmallen.
Varje snippet-anrop skapar en ytterligare knapp.
### Sammanfattning
För att lägga till flera knappar för liknande produkter:
Aktivera ett läge med anpassade knappar → lägg till flera OS 2.0-block eller flera snippet-anrop → alla knappar fungerar automatiskt när varianten är slut i lager.
***
**CTA-placering på PDP**
Placeringen definieras av DOM-väljare inuti `KleepSDK.getConstants().`
`targetProductInfoBlockQueries` – var produktinformationen finns. Det är en array av väljare som pekar på huvudbehållaren för produktdetaljer (titel, pris, storlekar, osv.). Skriptet itererar genom dessa väljare och använder den första det hittar som infogningspunkt för CTA eller popup-fönster.
`targetVariantQueries` – var storleks-/variantalternativ finns: När produktinformationsblocket har hittats söker skriptet inuti det efter variantelement (som storleksväljare). Varje variant-\