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

**Denne guide guider dig igennem installation af Kleep på din Shopify-butik. Kleep tilbyder tre hovedfunktioner: en intelligent størrelsesguide (Kleep Sizing), anbefalinger af lignende produkter (Kleep Similar Products) og en optimeret produktsøgning (Kleep Search).**

## Oversigt over integrationsprocessen

Her er, hvad du kan forvente fra kontraktunderskrivelse til go-live og derefter. Den samlede integration tager typisk ca. **5–6 uger**.

### Onboarding

<Steps>
  <Step title="Kontrakt underskrevet & fakturering opsat">
    Når kontrakten er underskrevet, starter din Kleep-repræsentant fakturering via GoCardless: [Opsæt direkte debitering →](https://pay.gocardless.com/BRT000352V7T67Q).
  </Step>

  <Step title="Onboarding-kickoff-møde">
    Et kort møde med din Kleep-repræsentant for at tilpasse tidsplan, tekniske kontakter og eventuelle butiksspecifikke krav inden installation begynder.
  </Step>

  <Step title="Udfyld onboarding-formularen">
    Efter kickoff vil vi bede dig om at dele et par oplysninger om din virksomhed, fakturering, butiksmiljøer og returopsætning, så vi kan forberede integrationen.

    **[Udfyld vores onboarding-formular →](https://ihu3s9tz3r8.typeform.com/to/fYQw9zJ5)**

    Det tager ca. 5 minutter. Når den er indsendt, vil vores team gennemgå dine svar og bekræfte de næste trin inden for 1 arbejdsdag.
  </Step>

  <Step title="Del din Shopify URL & samarbejdsanmodningskode">
    Send os din butiksadresse (f.eks. `your-store.myshopify.com`) sammen med din samarbejdsanmodningskode, så vi kan anmode om adgang til din butik.

    <Note>
      **Flere Shopify-butikker?** Hvis du har flere Shopify-instanser (f.eks. forskellige regioner eller brands), bedes du sende os en samarbejdskode til **hver butik** — vi har brug for én kode pr. butik.
    </Note>

    <Tip>
      Er du usikker på, hvor du finder disse? I din Shopify-admin skal du gå til **Settings → Users and permissions** — din `myshopify.com`-URL vises øverst, og **Collaborator request code** er angivet under sektionen *Collaborators*. Se Shopifys hjælpeartikel om [samarbejdskonti](https://help.shopify.com/en/manual/your-account/staff-accounts/collaborator-accounts) for flere detaljer.
    </Tip>
  </Step>

  <Step title="Acceptér vores samarbejdsanmodning">
    Vi sender en samarbejdsadgangsanmodning fra vores Shopify Partner-konto. Godkend den fra **Settings → Users and permissions → Collaborators** i din Shopify-admin.
  </Step>

  <Step title="Installer Kleep-appen på hver butik">
    Når vi har samarbejdsadgang, sender vi dig et app-installationslink **til hver butik**. Du skal installere Kleep-appen separat på alle Shopify-butikker, hvor du ønsker Kleep aktiveret.
  </Step>

  <Step title="Vælg CTA-placering">
    Gennemgå vores foreslåede placeringer af "Find min størrelse"-knappen og vælg den, der passer til din butiksfacade: [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 & testning

<Steps>
  <Step title="Vi installerer Kleep på et duplikeret tema">
    Vores team duplikerer dit nuværende Shopify-tema og installerer Kleep på duplikatet, så din live butiksfacade forbliver uberørt, mens du tester.
  </Step>

  <Step title="Forhåndsvisning & feedback">
    Vi sender dig et privat forhåndsvisningslink til at teste integrationen fra ende til anden og dele eventuel feedback eller justeringer.
  </Step>

  <Step title="Go-live">
    Når du har godkendt, udgiver vi Kleep på dit live-tema.
  </Step>
</Steps>

### Post-integration

<Steps>
  <Step title="Klientdashboard-adgang">
    Vi klargør legitimationsoplysninger til dit team for at få adgang til [Kleep Dashboard](https://dashboard.kleep.ai), hvor du kan overvåge Kleep-præstations-KPI'er i realtid.
  </Step>

  <Step title="Fit Feedback aktiveret">
    Vi aktiverer [Fit Feedback](/da/dashboard/fit-feedback) i dit dashboard, så dit team kan forfine Kleeps størrelsesanbefalinger ved hjælp af virkelige pasformsdata.
  </Step>
</Steps>

## 1. Funktionaliteter

Kleep integreres i din butik ved at installere en brugerdefineret app, der er oprettet på forhånd. Den giver mulighed for at:

1. Tilføje vores CTA "Find min størrelse" på dine produktsider
2. Tilpasse dens UI direkte i temaredigeringsværktøjet

Vores app opretter også automatiserede flows af produkter, ordrer og returdata for at holde sig opdateret. Disse data hentes dagligt.

Ved installation opretter appen en WebPixel, som bruges til at spore flere metrikker, som vi bruger til at beregne løsningens ROI.

## 2. Funktionen Lignende Produkter

Lignende Produkter foreslår alternative produkter, når en størrelse er udsolgt. Denne funktion øger konverteringer ved at tilbyde relevante alternativer til kunder.

**Tilgængelige visningstilstande**

| Tilstand                         | Beskrivelse                                                    |
| -------------------------------- | -------------------------------------------------------------- |
| **Popup (auto)**                 | Automatisk popup ved størrelses-hover (desktop) / knap (mobil) |
| **Knap (auto)**                  | Automatisk CTA-knap nær kurv ved udsolgt                       |
| **Kun brugerdefinerede knapper** | Du placerer manuelt knapper via temaredigeringsværktøjet       |
| **Popup + brugerdefineret**      | Automatisk popup + ekstra brugerdefinerede knapper             |
| **Knap + brugerdefineret**       | Automatisk knap + ekstra brugerdefinerede knapper              |

**Konfiguration**

**Trin 1: Vælg visningstilstand**

I Kleep App Embed-indstillingerne skal du finde indstillingen **"Show recommended products"** og vælge den ønskede tilstand fra rullemenuen.

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

Valg af tilstand for Lignende Produkter

**Tilføjelse af brugerdefinerede knapper (til brugerdefinerede tilstande)**

Hvis du har valgt en tilstand med "custom", kan du tilføje knapper på specifikke steder:

1. Gå til skabelonen **Produktside** i temaredigeringsværktøjet
2. I den ønskede sektion skal du klikke på **Tilføj blok**
3. Klik på fanen **Apps** og vælg **"Kleep Similar Button"**
4. Placer blokken, hvor du ønsker den, og gem

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

Tilføj Kleep Similar Button-blok

<Tip>
  Knapper til Lignende Produkter vises kun, når en variant er udsolgt. Det er normalt, hvis du ikke ser dem på alle produkter.
</Tip>

**Tilføjelse af flere knapper**

Du kan tilføje et vilkårligt antal Lignende Produkter-knapper på produktsiden. For at tillade flere knapper skal widgetten indstilles til én af: `custom_buttons`, `popup+custom` eller `button+custom`.

Til OS 2.0-temaer:

* Gå til **Online Store → Customize**
* Åbn skabelonen **Produktside**
* Klik på **Tilføj blok → Kleep Similar Button**
* Gentag, hvis du ønsker 2+ knapper på siden

Alle knapper vises automatisk kun, når den valgte variant er udsolgt.

***

## 3. Kleep Search-funktionen

Kleep Search erstatter den native Shopify-søgning med en optimeret søgning med størrelsesfiltre og personaliserede anbefalinger.

**Trin 1: Aktivér brugerdefineret søgning**

I Kleep App Embed-indstillingerne skal du aktivere indstillingen **"Enable custom search"**.

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

Aktivér brugerdefineret søgning

**Trin 2: Adgang til søgeskabelonen**

I temaredigeringsværktøjet skal du klikke på rullemenuerne øverst (standard er "Home page") og vælge **"Search"** fra skabelonlisten.

<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ælg søgeskabelon

**Trin 3: Skjul den native søgning**

I skabelonsektionen skal du skjule eller fjerne den native **"Search results"**-blok ved at klikke på øjeikonet.

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

Skjul native søgning

**Trin 4: Tilføj Kleep Search-blokken**

Klik på **Tilføj sektion**, og vælg derefter i fanen **Apps** **"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" />

Tilføj Kleep Search-blok

**Trin 5: Konfigurér indstillinger**

Klik på den søgeblok du tilføjede for at få adgang til indstillinger: antal resultater, gitter-/listevisning, søgeforsinkelse osv.

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

Søgekonfigurationsindstillinger

## 4. Returintegraton (valgfri)

Hvis du bruger en returhåndteringsplatform, kan Kleep integrere returdata for at forbedre størrelsesanbefalinger.

**Understøttede returleverandører**

* Global-e
* Aftership
* Fast Return
* Return Go
* Andet (kontakt os)

**Konfiguration**

1. I Kleep Dashboard skal du gå til **Settings → Returns**
2. Vælg din returleverandør
3. Følg de leverandørspecifikke instruktioner for at forbinde din konto

<Note>
  Hvis din leverandør ikke er på listen, bedes du kontakte os på [support@kleep.ai](mailto:support@kleep.ai) — vi kan opsætte en brugerdefineret integration via SFTP eller API.
</Note>

## 5. Hændelsessporing & Analyse

Kleep sporer automatisk brugerinteraktioner til analyse. Sørg for, at sporing fungerer korrekt inden go-live.

**Sporte hændelser**

| Hændelse                 | Beskrivelse                               |
| ------------------------ | ----------------------------------------- |
| `kleep_button_click`     | Bruger klikkede på størrelsesguideknappen |
| `kleep_drawer_open`      | Størrelsesguide-skuffe åbnet              |
| `kleep_size_recommended` | En størrelsesanbefaling blev vist         |
| `kleep_add_to_cart`      | Bruger lagde produkt i kurv fra Kleep     |
| `kleep_similar_click`    | Bruger klikkede på et lignende produkt    |

**Verifikation**

For at verificere at hændelser udløses korrekt:

1. Åbn din browsers Udviklerværktøjer (F12)
2. Gå til fanen **Network**
3. Filtrer efter "kleep"
4. Interagér med størrelsesguideknappen
5. Du bør se API-kald for hver hændelse

<Warning>
  **Inden go-live:** Sørg for, at mindst 5 hændelser udløses, og at payloads er gyldige. Gennemfør én fuld brugerrejse (knapklik → størrelsesanbefaling → læg i kurv) for at validere integrationen.
</Warning>

## 6. CSS-tilpasning

Du kan tilpasse udseendet af Kleep-elementer (knapper, popups, søgning) ved at tilføje brugerdefineret CSS.

**Hvor du tilføjer CSS**

I Kleep App Embed-indstillingerne finder du et felt **"Input custom CSS styles"**. Indsæt din brugerdefinerede CSS der.

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

Brugerdefineret CSS-felt

**Eksempel på tilpasning**

<Accordion title="Kode">
  ```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. Flere miljøer

Hvis du har flere Shopify-miljøer (dev, staging, produktion), skal du konfigurere Kleep for hvert.

**Opsætning for hvert miljø**

1. **Produktionsbutik** — Hovedbutik, fuldt konfigureret
2. **Staging/Dev-butikker** — Til testning inden udrulning til produktion

For hvert miljø:

1. Installer Kleep-appen
2. Aktivér App Embed
3. Kontakt din Kleep CSM for at linke miljøet til din konto

<Tip>
  Test altid ændringer i staging inden du anvender dem i produktion.
</Tip>

**Miljøspecifikke URL'er**

Angiv følgende til din Kleep CSM:

* Produktions-URL: `https://www.yourbrand.com`
* Staging-URL: `https://staging.yourbrand.com` (hvis relevant)
* Dev-URL: `https://dev.yourbrand.com` (hvis relevant)

## 7.5 CTA-knap & Lignende Produkter — Fuld installationsguide

For den komplette tekniske reference til installation af Kleep CTA-knappen og funktionen Lignende Produkter (inkl. al Liquid-kode, indstillingsskema og opsætning af sekundær knap), se den dedikerede guide nedenfor:

[CTA-knap & Lignende Produkter — Fuld installationsguide](/da/cms/cta-button)

***

## 8. Vintage-temaer - Opsætning af størrelsesguide

Vintage-temaer (også kaldet "legacy" eller oprettet inden Online Store 2.0) understøtter ikke App-blokke. Installation kræver Liquid-kodemodifikationer.

<Warning>
  Dette afsnit kræver Shopify-udviklerviden (Liquid).
</Warning>

**Forudsætninger**

* Adgang til temakodeeditoren (**Online Store → Themes → Edit code**)
* Kleep App Embed skal være aktiveret i din Shopify-admin (**Online Store → Themes → Customize → App embeds → Kleep**)

**Trin 1: Aktivér App Embed**

I din Shopify-admin skal du gå til **Online Store → Themes → Customize → App embeds** og slå Kleep-appen til.

**Trin 2: Kald snippettet**

Indsæt følgende kode, hvor du ønsker Kleep at vises. Det skal være en del af `Product info`-blokken i mappen `snippets`:

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

**Trin 3: Opret knapsnippettet**

Opret en ny fil med navnet `kleep-button.liquid` i din mappe `snippets`. Indsæt følgende indhold:

<Accordion title="Kode">
  ```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>

**Trin 4: Tilføj indstillingsskema**

Tilføj følgende valg til dit indstillingsskema i slutningen af sektionsfilen:

<Accordion title="Kode">
  ```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>

**Trin 5: Validér**

Validér opdateringer i Shopify Theme Customize-området. Konfigurér visuelle elementer i produktinformationsblokindstillingerne.

**Valgfrit: Sekundær knap**

Hvis du vil tilføje en sekundær knap, skal du oprette en ny fil med navnet `kleep-secondary-button.liquid` i din mappe `snippets`:

<Accordion title="Kode">
  ```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>

Indsæt følgende kode, hvor du ønsker Kleep at vises. Det skal være en del af `Product info`-blokken i mappen `snippets`.

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

***

## 9. Vintage-temaer - Opsætning af Lignende Produkter

**Trin 1: Opret snippettet**

Opret en fil `snippets/kleep-similar-button.liquid` med følgende kode:

<Accordion title="Kode">
  ```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>

**Trin 2: Gengiv snippettet**

Indsæt denne linje, hvor du ønsker knappen at vises:

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

Typisk placering: under variantsvælgerne eller nær formularen Læg i kurv.

**Trin 3: Aktivér den korrekte tilstand**

Da vintage-temaer ikke kan indsætte OS 2.0-blokke, skal widgetten bruge én af:

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

**Tilføjelse af flere knapper**

For at oprette flere knapper skal du blot placere snippetkoden på forskellige steder i produktskabelonen:

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

Hvert snippet-kald opretter en ekstra knap. Alle knapper vises automatisk kun, når den valgte variant er udsolgt.

***

## 10. Oversættelser (i18n)

Tilføj følgende oversættelser til dine temaets lokaliseringsfiler.

**Engelsk (`en.json`)**

<Accordion title="Kode">
  ```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>

**Fransk (`fr.json`)**

<Accordion title="Kode">
  ```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>

**Italiensk (`it.json`)**

<Accordion title="Kode">
  ```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>

**Tysk (`de.json`)**

<Accordion title="Kode">
  ```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>

**Spansk (`es.json`)**

<Accordion title="Kode">
  ```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>

**Japansk (`ja.json`)**

<Accordion title="Kode">
  ```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>

**Koreansk (`ko.json`)**

<Accordion title="Kode">
  ```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>

**Portugisisk (`pt.json`)**

<Accordion title="Kode">
  ```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 reference

**CTA-placering på PDP**

Placeringen er defineret af DOM-selektorer inde i `KleepSDK.getConstants()`:

* **`targetProductInfoBlockQueries`** – Array af selektorer, der peger på den overordnede container med produktdetaljer (titel, pris, størrelser osv.). Scriptet itererer gennem disse selektorer og bruger den første det finder som indsætningspunkt for CTA'en eller popups.
* **`targetVariantQueries`** – Hvor størrelses-/variantvalg er. Når produktinformationsblokken er fundet, søger scriptet inde i den efter variantelementer (som størrelsessvælgere). Hver variant `<label>` (eller tilsvarende) bliver et mål for tilknytning af popup-CTA'en.

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

Enhedstype registreres ved hjælp af `checkIfMobile()`:

Denne funktion tjekker browserens `navigator.userAgent`-streng mod en liste over mobilenheder (f.eks. iPhone, Android, iPad).

* **Desktop**: CTA'en vises som hover-popups ved siden af variantetiketterne
* **Mobil**: Scriptet erstatter hover-popups med en enkelt knap, da hover-interaktioner ikke fungerer på touchskærme

**Produktreferencekonfiguration**

Kleep bruger produktreferencer til at matche produkter på tværs af dit katalog. Konfigurér, hvordan du identificerer dem:

**Referencefelt:** Hvor brandets produktreference findes

* Shopify SKU-felt
* Metafelt (angiv hvilket)
* Tags (med præfiks, f.eks. `ref:ABC123`)

**Masterproduktekstraktion:** Sådan udleder du masterprodukt-ID'et fra variant-SKU'er

* Eksempel: Hvis variant-SKU'er er `ABC123-S`, `ABC123-M`, `ABC123-L`, er masterproduktreferencen `ABC123`
* Regel: Tag de første 6 tegn / Del ved og tag første del / Brugerdefineret regex

Konfigurér dette i **Kleep Dashboard → Settings → Product References**.

**Bemærkninger om tilpasning**

* Andre varianter af placering/layout er ikke tilgængelige ud over justering af selektorer og CSS
* For at ændre udseendet (farver, afstand, skrifttyper osv.) skal du indsætte din CSS i boksen **"Input custom CSS styles"** i Kleep App Embed-indstillingerne

***

## 12. Go-live tjekliste

Inden go-live skal du verificere følgende:

**Knapvisning**

* [ ] &#x20;Knap synlig på mindst 3 produktsider
* [ ] &#x20;Knap fungerer på desktop OG mobil
* [ ] &#x20;Ingen CSS-konflikter (knap ikke skjult eller fejljusteret)
* [ ] &#x20;Ingen Cumulative Layout Shift (CLS)-problemer — knap forårsager ikke sidehop
* [ ] &#x20;**Kun vintage-temaer:** Commit refereret i versionsstyring

**Datakvalitet**

* [ ] &#x20;\>98% af produkter har en størrelsesguide kortlagt
* [ ] &#x20;\<1% af varianter har manglende mål
* [ ] &#x20;0 forældreløse SKU'er (produkter uden kategorikortlægning)

**Sporing**

* [ ] &#x20;Alle 5 hændelser udløses korrekt
* [ ] &#x20;Komplet brugerrejse sporet (knap → anbefaling → kurv)
* [ ] &#x20;Payloads valideret

**Ydeevne**

* [ ] &#x20;JS-fejl \< 1%
* [ ] &#x20;API-latenstid P95 \< 500ms
* [ ] &#x20;Overvågning på plads

**Brugerrejse**

* [ ] &#x20;Størrelsesguide åbner korrekt
* [ ] &#x20;Anbefalinger vises korrekt
* [ ] &#x20;Læg i kurv fungerer fra størrelsesguiden
* [ ] &#x20;Lignende produkter vises (hvis aktiveret)
* [ ] &#x20;Responsivt på alle enheder

> ✅ Når alle punkter er tjekket, skal du underrette din Kleep CSM om endelig QA-validering inden go-live.

***

## 13. Fejlfinding

**Knappen vises ikke**

* ☑️ Verificér at Kleep App Embed er aktiveret (slå TIL)
* ☑️ Sørg for at du gemte temaændringerne
* ☑️ Ryd din browsercache og genindlæs siden
* ☑️ Tjek at produktet har størrelsevarianter konfigureret

**Lignende Produkter vises ikke**

* ☑️ Tjek at tilstanden ikke er indstillet til "Disabled" i indstillingerne
* ☑️ Knapper vises kun, når en variant er udsolgt
* ☑️ Til "custom"-tilstande skal du verificere at du har tilføjet en App-blok

**Søgning fungerer ikke**

* ☑️ Verificér at "Enable custom search" er aktiveret i App Embed
* ☑️ Sørg for at du har tilføjet Kleep Search-blokken til søgeskabelonen
* ☑️ Tjek at den native søgning er skjult

**Jeg kan ikke finde Kleep App-blokke**

Hvis du ikke ser Kleep-blokke i fanen "Apps", når du klikker på "Tilføj blok", er dit tema sandsynligvis et vintage-tema. Se afsnit 11-12 for alternative installationsinstruktioner.

**Datakortlægningsproblemer**

* ☑️ Tjek at dine produktdata indeholder de forventede felter (tags, metafelter osv.)
* ☑️ Verificér kortlægninger i **Kleep Dashboard → Settings → Data Mapping**
* ☑️ Kør produktscanningen igen for at opdatere registrerede værdier

**Hændelser udløses ikke**

* ☑️ Tjek browserkonsollen for JavaScript-fejl
* ☑️ Verificér at ingen annonceblokere eller privatlivsudvidelser blokerer Kleep-anmodninger
* ☑️ Test i inkognitotilstand

**Kontakt support**

Hvis du støder på problemer, der ikke er angivet her, bedes du kontakte Kleep-teamet:

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

***

### Tak fordi du bruger Kleep! 🎉

Vores team er her for at hjælpe dig med installation og optimering af din størrelsesguide.---

## Cookies og databeskyttelse

Kleep er fuldt ud styret af besøgenes samtykke: scriptet indlæses kun **efter** samtykke er indsamlet via din CMP, og du skal betinge dets indlæsning derefter. For den komplette liste over trackere, behandlede data, formål og retsgrundlag, hosting, underbehandlere og sikkerhed, se [Cookies, CMP & Databeskyttelse](/da/cookie-consent).