> ## 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 Integrationsguide

**Den här guiden leder dig genom installationen av Kleep i din Shopify-butik. Kleep erbjuder tre huvudfunktioner: en intelligent storleksguide (Kleep Sizing), liknande produktrekommendationer (Kleep Similar Products) och en optimerad produktsökning (Kleep Search).**

## Översikt över integrationsprocessen

Här är vad du kan förvänta dig från kontraktssignering till lansering och därefter. Den end-to-end-integration tar vanligtvis cirka **5–6 veckor**.

### Onboarding

<Steps>
  <Step title="Kontrakt signerat & fakturering konfigurerad">
    När kontraktet är signerat startar din Kleep-representant faktureringen via GoCardless: [Konfigurera autogiro →](https://pay.gocardless.com/BRT000352V7T67Q).
  </Step>

  <Step title="Onboarding-kickoff-möte">
    Ett kort samtal med din Kleep-representant för att komma överens om tidslinje, tekniska kontakter och eventuella butiksspecifika krav innan installationen börjar.
  </Step>

  <Step title="Fyll i onboarding-formuläret">
    Efter kickoffen ber vi dig dela några uppgifter om ditt företag, fakturering, butiksmiljöer och returkonfiguration så att vi kan förbereda integrationen.

    **[Fyll i vårt onboarding-formulär →](https://ihu3s9tz3r8.typeform.com/to/fYQw9zJ5)**

    Det tar ungefär 5 minuter. När det har skickats in granskar vårt team dina svar och bekräftar nästa steg inom 1 arbetsdag.
  </Step>

  <Step title="Dela din Shopify-URL och samarbetskod">
    Skicka din butiksadress (t.ex. `your-store.myshopify.com`) tillsammans med din samarbetsförfrågningskod så att vi kan begära åtkomst till din butik.

    <Note>
      **Flera Shopify-butiker?** Om du har flera Shopify-instanser (t.ex. olika regioner eller varumärken), skicka oss en samarbetskod för **varje butik** — vi behöver en kod per butik.
    </Note>

    <Tip>
      Osäker på var du hittar dessa? I din Shopify-admin går du till **Inställningar → Användare och behörigheter** — din `myshopify.com`-URL visas längst upp, och **Samarbetsförfrågningskoden** finns under avsnittet *Samarbetspartners*. Se Shopifys hjälpartikel om [samarbetskonton](https://help.shopify.com/en/manual/your-account/staff-accounts/collaborator-accounts) för mer information.
    </Tip>
  </Step>

  <Step title="Godkänn vår samarbetsförfrågan">
    Vi skickar en samarbetsåtkomstförfrågan från vårt Shopify Partner-konto. Godkänn den från **Inställningar → Användare och behörigheter → Samarbetspartners** i din Shopify-admin.
  </Step>

  <Step title="Installera Kleep-appen i varje butik">
    När vi har samarbetsåtkomst skickar vi dig en appinstallationslänk **för varje butik**. Du måste installera Kleep-appen separat på varje Shopify-butik där du vill aktivera Kleep.
  </Step>

  <Step title="Välj CTA-placering">
    Granska våra föreslagna positioner för knappen "Hitta min storlek" och välj den som passar din butik: [CTA-positionering Figma →](https://www.figma.com/design/DvsqgNPSjVPVPLjKV2efAY/KLEEP-CTA-POSITIONING-SUGGESTIONS?node-id=0-1\&p=f\&t=92MwlxQkzlfAYyk5-0).
  </Step>
</Steps>

### Installation och testning

<Steps>
  <Step title="Vi installerar Kleep på ett duplicerat tema">
    Vårt team duplicerar ditt nuvarande Shopify-tema och installerar Kleep på duplikatet, så att din live-butik förblir orörd under testningen.
  </Step>

  <Step title="Förhandsgranskning och feedback">
    Vi skickar dig en privat förhandsgransningslänk för att testa integrationen end-to-end och dela eventuell feedback eller justeringar.
  </Step>

  <Step title="Lansering">
    När du har godkänt publicerar vi Kleep på ditt live-tema.
  </Step>
</Steps>

### Efter integrationen

<Steps>
  <Step title="Åtkomst till klientdashboard">
    Vi tillhandahåller inloggningsuppgifter för ditt team för att komma åt [Kleep Dashboard](https://dashboard.kleep.ai), där du kan övervaka Kleeps nyckeltal i realtid.
  </Step>

  <Step title="Fit Feedback aktiverat">
    Vi aktiverar [Fit Feedback](/sv/dashboard/fit-feedback) i din dashboard så att ditt team kan förfina Kleeps storleksrekommendationer med hjälp av verkliga anpassningsdata.
  </Step>
</Steps>

## 1. Funktionaliteter

Kleep integreras i din butik genom att installera en anpassad app som skapats i förväg. Det gör det möjligt att:

1. Lägga till vår CTA "Hitta min storlek" på dina produktsidor
2. Anpassa dess gränssnitt direkt i temaredigeraren

Vår app skapar också automatiserade flöden av produkt-, order- och returdata för att hålla sig uppdaterad. Dessa data hämtas dagligen.

Vid installation skapar appen en WebPixel som används för att spåra flera mätvärden från vilka vi beräknar lösningens ROI.

## 2. Funktionen Liknande produkter

Liknande produkter föreslår alternativa produkter när en storlek är slutsåld. Den här funktionen ökar konverteringen genom att erbjuda relevanta alternativ till kunder.

**Tillgängliga visningslägen**

| Läge                         | Beskrivning                                                  |
| ---------------------------- | ------------------------------------------------------------ |
| **Popup (auto)**             | Automatisk popup vid storlekshover (desktop) / knapp (mobil) |
| **Knapp (auto)**             | Automatisk CTA-knapp nära kundvagn när slutsåld              |
| **Endast anpassade knappar** | Du placerar knappar manuellt via temaredigeraren             |
| **Popup + anpassad**         | Automatisk popup + ytterligare anpassade knappar             |
| **Knapp + anpassad**         | Automatisk knapp + ytterligare anpassade knappar             |

**Konfiguration**

**Steg 1: Välj visningsläge**

I Kleep App Embed-inställningarna hittar du alternativet **"Visa rekommenderade produkter"** och väljer önskat läge från rullgardinsmenyn.

<img src="https://mintcdn.com/kleepai/A9OHiEXCm7A82FUt/images/shopify/Screenshot_2025-12-09_at_11.48.24.png?fit=max&auto=format&n=A9OHiEXCm7A82FUt&q=85&s=71a8da20dfbd06b799dbca4a765df6ad" alt="Screenshot_2025-12-09_at_11.48.24.png" width="764" height="688" data-path="images/shopify/Screenshot_2025-12-09_at_11.48.24.png" />

Val av visningsläge för liknande produkter

**Lägga till anpassade knappar (för anpassade lägen)**

Om du har valt ett läge med "anpassad" kan du lägga till knappar på specifika platser:

1. Gå till **Produktsida**-mallen i temaredigeraren
2. I önskat avsnitt, klicka på **Lägg till block**
3. Klicka på fliken **Appar** och välj **"Kleep Similar Button"**
4. Placera blocket där du vill ha det och spara

<img src="https://mintcdn.com/kleepai/A9OHiEXCm7A82FUt/images/shopify/image.png?fit=max&auto=format&n=A9OHiEXCm7A82FUt&q=85&s=702709e1425b0491e6fc7304f4bc159b" alt="image.png" width="1232" height="1370" data-path="images/shopify/image.png" />

Lägg till Kleep Similar Button-block

<Tip>
  Knappar för liknande produkter visas bara när en variant är slut i lager. Det är normalt om du inte ser dem på alla produkter.
</Tip>

**Lägga till flera knappar**

Du kan lägga till valfritt antal knappar för liknande produkter på produktsidan. För att tillåta flera knappar måste widgeten vara inställd på ett av: `custom_buttons`, `popup+custom`, eller `button+custom`.

För OS 2.0-teman:

* Gå till **Onlinebutik → Anpassa**
* Öppna mallen **Produktsida**
* Klicka på **Lägg till block → Kleep Similar Button**
* Upprepa om du vill ha 2+ knappar på sidan

Varje knapp visas automatiskt bara när den valda varianten är slut i lager.

***

## 3. Kleep Search-funktionen

Kleep Search ersätter den inbyggda Shopify-sökningen med en optimerad sökning med storleksfilter och personliga rekommendationer.

**Steg 1: Aktivera anpassad sökning**

I Kleep App Embed-inställningarna, aktivera alternativet **"Aktivera anpassad sökning"**.

<img src="https://mintcdn.com/kleepai/A9OHiEXCm7A82FUt/images/shopify/Screenshot_2025-07-28_at_17.17.44.png?fit=max&auto=format&n=A9OHiEXCm7A82FUt&q=85&s=fe4dd72d40e2509386943c6e06a7a74b" alt="Screenshot_2025-07-28_at_17.17.44.png" width="670" height="352" data-path="images/shopify/Screenshot_2025-07-28_at_17.17.44.png" />

Aktivera anpassad sökning

**Steg 2: Öppna sökmallen**

I temaredigeraren klickar du på rullgardinsmenyn längst upp (standard är "Startsida") och väljer **"Sök"** från mallistan.

<img src="https://mintcdn.com/kleepai/A9OHiEXCm7A82FUt/images/shopify/Screenshot_2025-07-28_at_17.18.59.png?fit=max&auto=format&n=A9OHiEXCm7A82FUt&q=85&s=76395c46acc49c26150ab7a7d08cb4ec" alt="Screenshot_2025-07-28_at_17.18.59.png" width="866" height="1312" data-path="images/shopify/Screenshot_2025-07-28_at_17.18.59.png" />

Välj sökmall

**Steg 3: Dölj den inbyggda sökningen**

I mallavsnittet döljer eller tar du bort det inbyggda **"Sökresultat"**-blocket genom att klicka på ögon-ikonen.

<img src="https://mintcdn.com/kleepai/A9OHiEXCm7A82FUt/images/shopify/Screenshot_2025-07-28_at_17.19.32.png?fit=max&auto=format&n=A9OHiEXCm7A82FUt&q=85&s=a4b655a4d77c40f100179263320f0a5f" alt="Screenshot_2025-07-28_at_17.19.32.png" width="712" height="726" data-path="images/shopify/Screenshot_2025-07-28_at_17.19.32.png" />

Dölj inbyggd sökning

**Steg 4: Lägg till Kleep Search-blocket**

Klicka på **Lägg till avsnitt**, sedan i fliken **Appar**, välj **"Search"** (kleep-dev).

<img src="https://mintcdn.com/kleepai/A9OHiEXCm7A82FUt/images/shopify/Screenshot_2025-07-28_at_17.19.48.png?fit=max&auto=format&n=A9OHiEXCm7A82FUt&q=85&s=3b174132b77b5679a051bcc58668374d" alt="Screenshot_2025-07-28_at_17.19.48.png" width="1270" height="656" data-path="images/shopify/Screenshot_2025-07-28_at_17.19.48.png" />

Lägg till Kleep Search-block

**Steg 5: Konfigurera alternativ**

Klicka på det sökblock du lade till för att komma åt inställningar: antal resultat, rutnät/listvisning, sökfördröjning, etc.

<img src="https://mintcdn.com/kleepai/A9OHiEXCm7A82FUt/images/shopify/Screenshot_2025-08-13_at_13.29.19.png?fit=max&auto=format&n=A9OHiEXCm7A82FUt&q=85&s=ba48a7ba9d4dc8f7531fe8ca0224f663" alt="Screenshot_2025-08-13_at_13.29.19.png" width="316" height="654" data-path="images/shopify/Screenshot_2025-08-13_at_13.29.19.png" />

Konfigurationsalternativ för sökning

## 4. Returintegration (valfritt)

Om du använder en plattform för returhantering kan Kleep integrera returdata för att förbättra storleksrekommendationer.

**Leverantörer av returer som stöds**

* Global-e
* Aftership
* Fast Return
* Return Go
* Annan (kontakta oss)

**Konfiguration**

1. I Kleep Dashboard, gå till **Inställningar → Returer**
2. Välj din returfyleverantör
3. Följ de leverantörsspecifika instruktionerna för att ansluta ditt konto

<Note>
  Om din leverantör inte finns listad, kontakta oss på [support@kleep.ai](mailto:support@kleep.ai) — vi kan konfigurera en anpassad integration via SFTP eller API.
</Note>

## 5. Händelsespårning och analys

Kleep spårar automatiskt användarinteraktioner för analys. Se till att spårningen fungerar korrekt innan lansering.

**Händelser som spåras**

| Händelse                 | Beskrivning                                          |
| ------------------------ | ---------------------------------------------------- |
| `kleep_button_click`     | Användaren klickade på storleksguideknappen          |
| `kleep_drawer_open`      | Storleksguidelådan öppnades                          |
| `kleep_size_recommended` | En storleksrekommendation visades                    |
| `kleep_add_to_cart`      | Användaren lade till produkt i kundvagnen från Kleep |
| `kleep_similar_click`    | Användaren klickade på en liknande produkt           |

**Verifiering**

För att verifiera att händelser utlöses korrekt:

1. Öppna webbläsarens Utvecklarverktyg (F12)
2. Gå till fliken **Nätverk**
3. Filtrera på "kleep"
4. Interagera med storleksguideknappen
5. Du bör se API-anrop för varje händelse

<Warning>
  **Innan lansering:** Se till att minst 5 händelser utlöses och att nyttolasterna är giltiga. Genomför en fullständig användarresa (knapptryckning → storleksrekommendation → lägg i kundvagn) för att validera integrationen.
</Warning>

## 6. CSS-anpassning

Du kan anpassa utseendet på Kleep-element (knappar, popups, sökning) genom att lägga till anpassad CSS.

**Var du lägger till CSS**

I Kleep App Embed-inställningarna hittar du ett fält **"Ange anpassade CSS-stilar"**. Klistra in din anpassade CSS där.

<img src="https://mintcdn.com/kleepai/A9OHiEXCm7A82FUt/images/shopify/Screenshot_2025-08-13_at_13.25.30.png?fit=max&auto=format&n=A9OHiEXCm7A82FUt&q=85&s=ccffae57f877aff1babb42797a3f11ad" alt="Screenshot_2025-08-13_at_13.25.30.png" width="310" height="366" data-path="images/shopify/Screenshot_2025-08-13_at_13.25.30.png" />

Fält för anpassad CSS

**Exempel på anpassning**

<Accordion title="Kod">
  ```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;
  }
  ```
</Accordion>

## 7. Flera miljöer

Om du har flera Shopify-miljöer (dev, staging, produktion) behöver du konfigurera Kleep för var och en.

**Konfiguration för varje miljö**

1. **Produktionsbutik** — Huvudbutik, fullt konfigurerad
2. **Staging/Dev-butiker** — För testning innan push till produktion

För varje miljö:

1. Installera Kleep-appen
2. Aktivera App Embed
3. Kontakta din Kleep CSM för att länka miljön till ditt konto

<Tip>
  Testa alltid ändringar på staging innan du tillämpar dem i produktion.
</Tip>

**Miljöspecifika URL:er**

Ge din Kleep CSM:

* Produktions-URL: `https://www.yourbrand.com`
* Staging-URL: `https://staging.yourbrand.com` (om tillämpligt)
* Dev-URL: `https://dev.yourbrand.com` (om tillämpligt)

## 7.5 CTA-knapp och liknande produkter — Fullständig installationsguide

För den fullständiga tekniska referensen om hur du installerar Kleep CTA-knappen och funktionen Liknande produkter (inklusive all Liquid-kod, inställningsschema och konfiguration av sekundär knapp), se den dedikerade guiden nedan:

[CTA-knapp och liknande produkter — Fullständig installationsguide](/sv/cms/cta-button)

***

## 8. Vintage-teman — Konfiguration av storleksguide

Vintage-teman (även kallade "äldre" eller skapade före Online Store 2.0) stöder inte App Blocks. Installation kräver Liquid-kodändringar.

<Warning>
  Det här avsnittet kräver kunskaper om Shopify-utveckling (Liquid).
</Warning>

**Förutsättningar**

* Åtkomst till temakodsredigeraren (**Onlinebutik → Teman → Redigera kod**)
* Kleep App Embed måste vara aktiverat i din Shopify-admin (**Onlinebutik → Teman → Anpassa → Appinbäddningar → Kleep**)

**Steg 1: Aktivera App Embed**

I din Shopify-admin, gå till **Onlinebutik → Teman → Anpassa → Appinbäddningar** och aktivera Kleep-appen.

**Steg 2: Anropa kodfragmentet**

Klistra in följande kod där du vill att Kleep ska visas. Det måste vara en del av `Product info`-blocket i mappen `snippets`:

<Accordion title="Kod">
  ```jsx theme={null}
  {% render 'kleep-button', cms: section.settings %}
  ```
</Accordion>

**Steg 3: Skapa knappkodfragmentet**

Skapa en ny fil med namnet `kleep-button.liquid` i din `snippets`-mapp. Lägg följande innehåll inuti:

<Accordion title="Kod">
  ```jsx theme={null}
  <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>
  ```
</Accordion>

**Steg 4: Lägg till inställningsschema**

Lägg till följande alternativ i ditt inställningsschema i slutet av avsnittsfilen:

<Accordion title="Kod">
  ```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
      }
  ```
</Accordion>

**Steg 5: Validera**

Validera uppdateringarna i Shopifys temaanpassningsområde. Konfigurera visuella element inom inställningarna för produktinformationsblocket.

**Valfritt: Sekundär knapp**

Om du vill lägga till en sekundär knapp, skapa en ny fil med namnet `kleep-secondary-button.liquid` i din `snippets`-mapp:

<Accordion title="Kod">
  ```jsx theme={null}
  <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>
  ```
</Accordion>

Klistra in följande kod där du vill att Kleep ska visas. Det måste vara en del av `Product info`-blocket i mappen `snippets`.

<Accordion title="Kod">
  ```jsx theme={null}
  {% render 'kleep-secondary-button', cms: section.settings %}
  ```
</Accordion>

***

## 9. Vintage-teman — Konfiguration av liknande produkter

**Steg 1: Skapa kodfragmentet**

Skapa en fil `snippets/kleep-similar-button.liquid` med följande kod:

<Accordion title="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 %}
      
      <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>
  ```
</Accordion>

**Steg 2: Rendera kodfragmentet**

Infoga den här raden var du vill att knappen ska visas:

<Accordion title="Kod">
  ```jsx theme={null}
  {% render 'kleep-similar-button' %}
  ```
</Accordion>

Typisk placering: under variantväljarna eller nära formuläret Lägg i kundvagn.

**Steg 3: Aktivera rätt läge**

Eftersom vintage-teman inte kan infoga OS 2.0-block måste widgeten använda ett av:

* `custom_buttons`
* `popup+custom`
* `button+custom`

**Lägga till flera knappar**

För att skapa flera knappar, placera helt enkelt kodfragmentkoden på olika ställen i produktmallen:

<Accordion title="Kod">
  ```jsx theme={null}
  {% render 'kleep-similar-button' %}
  ```
</Accordion>

Varje kodfragmentanrop skapar en ytterligare knapp. Varje knapp visas automatiskt bara när den valda varianten är slut i lager.

***

## 10. Översättningar (i18n)

Lägg till följande översättningar i temats lokalfiler.

**Engelska (`en.json`)**

<Accordion title="Kod">
  ```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"
            }
          }
        }
      }
  ```
</Accordion>

**Franska (`fr.json`)**

<Accordion title="Kod">
  ```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"
            }
          }
        }
      }
  ```
</Accordion>

**Italienska (`it.json`)**

<Accordion title="Kod">
  ```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"
        }
      }
    }
  }
  ```
</Accordion>

**Tyska (`de.json`)**

<Accordion title="Kod">
  ```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"
        }
      }
    }
  }
  ```
</Accordion>

**Spanska (`es.json`)**

<Accordion title="Kod">
  ```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"
        }
      }
    }
  }
  ```
</Accordion>

**Japanska (`ja.json`)**

<Accordion title="Kod">
  ```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": "商品を見る"
        }
      }
    }
  }
  ```
</Accordion>

**Koreanska (`ko.json`)**

<Accordion title="Kod">
  ```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": "상품 보기"
        }
      }
    }
  }
  ```
</Accordion>

**Portugisiska (`pt.json`)**

<Accordion title="Kod">
  ```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"
        }
      }
    }
  }
  ```
</Accordion>

***

## 11. Teknisk referens

**CTA-plats på PDP**

Platsen definieras av DOM-selektorer inuti `KleepSDK.getConstants()`:

* **`targetProductInfoBlockQueries`** – Array av selektorer som pekar på huvudbehållaren för produktdetaljer (titel, pris, storlekar, etc.). Skriptet itererar genom dessa selektorer och använder den första det hittar som infogningspunkt för CTA eller popups.
* **`targetVariantQueries`** – Var storleks-/variantalternativ finns. När produktinformationsblocket hittats söker skriptet inuti det efter variantelement (som storleksväljare). Varje variant `<label>` (eller motsvarande) blir ett mål för att bifoga popup-CTA.

**Popup vs. Knapp (Desktop vs. Mobil)**

Enhetstyp detekteras med `checkIfMobile()`:

Den här funktionen kontrollerar webbläsarens `navigator.userAgent`-sträng mot en lista med mobila enheter (t.ex. iPhone, Android, iPad).

* **Desktop**: CTA visas som hoverPopups bredvid variantetiketterna
* **Mobil**: Skriptet ersätter hoverPopups med en enda knapp, eftersom hoverinteraktioner inte fungerar på pekskärmar

**Konfiguration av produktreferens**

Kleep använder produktreferenser för att matcha produkter i din katalog. Konfigurera hur du identifierar dem:

**Referensfält:** Var varumärkets produktreferens finns

* Shopify SKU-fält
* Metafält (ange vilket)
* Taggar (med prefix, t.ex. `ref:ABC123`)

**Extraktion av huvudprodukt:** Hur man härleder huvud-produkt-ID:t från variant-SKU:er

* Exempel: Om variant-SKU:er är `ABC123-S`, `ABC123-M`, `ABC123-L`, är huvudproduktreferensen `ABC123`
* Regel: Ta de första 6 tecknen / Dela vid och ta den första delen / Anpassat regex

Konfigurera detta i **Kleep Dashboard → Inställningar → Produktreferenser**.

**Anpassningsanteckningar**

* Inga andra varianter av placering/layout tillhandahålls utöver att justera selektorer och CSS
* För att ändra utseende (färger, avstånd, teckensnitt, etc.), klistra in din CSS i rutan **"Ange anpassade CSS-stilar"** i Kleep App Embed-inställningarna

***

## 12. Checklista inför lansering

Innan lansering, verifiera följande:

**Knappvisning**

* [ ] &#x20;Knapp synlig på minst 3 produktsidor
* [ ] &#x20;Knapp fungerar på desktop OCH mobil
* [ ] &#x20;Inga CSS-konflikter (knapp inte dold eller feljusterad)
* [ ] &#x20;Inga Cumulative Layout Shift (CLS)-problem — knapp orsakar inte sidshopp
* [ ] &#x20;**Endast vintage-teman:** Commit refererad i versionshantering

**Datakvalitet**

* [ ] &#x20;\>98% av produkterna har en storleksguide mappad
* [ ] &#x20;\<1% av varianterna saknar mätningar
* [ ] &#x20;0 föräldralösa SKU:er (produkter utan kategorimarkering)

**Spårning**

* [ ] &#x20;Alla 5 händelser utlöses korrekt
* [ ] &#x20;Fullständig användarresa spårad (knapp → rekommendation → kundvagn)
* [ ] &#x20;Nyttolaster validerade

**Prestanda**

* [ ] &#x20;JS-fel \< 1%
* [ ] &#x20;API-latens P95 \< 500ms
* [ ] &#x20;Övervakning på plats

**Användarresa**

* [ ] &#x20;Storleksguide öppnas korrekt
* [ ] &#x20;Rekommendationer visas korrekt
* [ ] &#x20;Lägg i kundvagn fungerar från storleksguiden
* [ ] &#x20;Liknande produkter visas (om aktiverat)
* [ ] &#x20;Responsiv på alla enheter

> ✅ När alla punkter är avbockade, meddela din Kleep CSM för slutlig QA-validering innan lansering.

***

## 13. Felsökning

**Knappen visas inte**

* ☑️ Verifiera att Kleep App Embed är aktiverat (växla PÅ)
* ☑️ Se till att du har sparat temaändringarna
* ☑️ Rensa webbläsarens cache och ladda om sidan
* ☑️ Kontrollera att produkten har storleksvarianter konfigurerade

**Liknande produkter visas inte**

* ☑️ Kontrollera att läget inte är inställt på "Inaktiverad" i inställningarna
* ☑️ Knappar visas bara när en variant är slut i lager
* ☑️ För "anpassade" lägen, verifiera att du har lagt till ett App Block

**Sökning fungerar inte**

* ☑️ Verifiera att "Aktivera anpassad sökning" är aktiverat i App Embed
* ☑️ Se till att du har lagt till Kleep Search-blocket i sökmallen
* ☑️ Kontrollera att den inbyggda sökningen är dold

**Jag hittar inte Kleep App Blocks**

Om du inte ser Kleep-block på fliken "Appar" när du klickar på "Lägg till block" är ditt tema troligen ett vintage-tema. Se avsnitten 11–12 för alternativa installationsinstruktioner.

**Problem med datamappning**

* ☑️ Kontrollera att dina produktdata innehåller förväntade fält (taggar, metafält, etc.)
* ☑️ Verifiera mappningar i **Kleep Dashboard → Inställningar → Datamappning**
* ☑️ Kör om produktskanningen för att uppdatera detekterade värden

**Händelser utlöses inte**

* ☑️ Kontrollera webbläsarkonsolen för JavaScript-fel
* ☑️ Verifiera att inga annonsblockerare eller integritetstillägg blockerar Kleep-förfrågningar
* ☑️ Testa i inkognitoläge

**Kontakta support**

Om du stöter på problem som inte listas här, kontakta Kleep-teamet:

* 📧 **E-post:** [support@kleep.ai](mailto:support@kleep.ai)

***

### Tack för att du använder Kleep! 🎉

Vårt team finns här för att hjälpa dig med installation och optimering av din storleksguide.---

## Cookies och dataintegritet

Kleep styrs helt av besökarens samtycke: skriptet laddas bara **efter** att samtycke har samlats in via din CMP, och du måste villkora laddningen därefter. För den fullständiga listan över spårare, behandlad data, ändamål och rättsliga grunder, hosting, underbiträden och säkerhet, se [Cookies, CMP och dataintegritet](/sv/cookie-consent).