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

Kontrakt underskrevet & fakturering opsat

Når kontrakten er underskrevet, starter din Kleep-repræsentant fakturering via GoCardless: Opsæt direkte debitering →.

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.

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

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.

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.

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 for flere detaljer.

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.

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.

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

Installation & testning

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.

Forhåndsvisning & feedback

Vi sender dig et privat forhåndsvisningslink til at teste integrationen fra ende til anden og dele eventuel feedback eller justeringer.

Go-live

Når du har godkendt, udgiver vi Kleep på dit live-tema.

Post-integration

Klientdashboard-adgang

Vi klargør legitimationsoplysninger til dit team for at få adgang til Kleep Dashboard, hvor du kan overvåge Kleep-præstations-KPI’er i realtid.

Fit Feedback aktiveret

Vi aktiverer Fit Feedback i dit dashboard, så dit team kan forfine Kleeps størrelsesanbefalinger ved hjælp af virkelige pasformsdata.

1. Funktionaliteter

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

Tilføje vores CTA “Find min størrelse” på dine produktsider
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.

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:

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

Tilføj Kleep Similar Button-blok

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

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

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.

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.

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

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.

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

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

Hvis din leverandør ikke er på listen, bedes du kontakte os på support@kleep.ai — vi kan opsætte en brugerdefineret integration via SFTP eller API.

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:

Åbn din browsers Udviklerværktøjer (F12)
Gå til fanen Network
Filtrer efter “kleep”
Interagér med størrelsesguideknappen
Du bør se API-kald for hver hændelse

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.

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.

Brugerdefineret CSS-felt Eksempel på tilpasning

Kode

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

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ø

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

For hvert miljø:

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

Test altid ændringer i staging inden du anvender dem i produktion.

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

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.

Dette afsnit kræver Shopify-udviklerviden (Liquid).

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:

Kode

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

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

Kode

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

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

Kode

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

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:

Kode

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

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

Kode

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

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

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

Kode

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

Trin 2: Gengiv snippettet Indsæt denne linje, hvor du ønsker knappen at vises:

Kode

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

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:

Kode

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

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)

Kode

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

Fransk (fr.json)

Kode

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

Italiensk (it.json)

Kode

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

Tysk (de.json)

Kode

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

Spansk (es.json)

Kode

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

Japansk (ja.json)

Kode

{
  "kleep": {
    "button": {
      "text": {
        "without_hash": "自分に合うサイズを探す",
        "with_hash": "好みのサイズ"
      }
    },
    "recommended": {
      "text": {
        "btn": "類似商品を見る",
        "hint": "サイズがありません",
        "link": "類似商品を見る"
      }
    },
    "search": {
      "text": {
        "inputPlaceholder": "検索...",
        "productsBlockTitle": "商品",
        "clearButton": "クリア"
      }
    },
    "searchPage": {
      "text": {
        "header": "検索結果",
        "query": "検索結果",
        "submit": "検索",
        "input": "ストアを検索",
        "viewProduct": "商品を見る"
      }
    }
  }
}

Koreansk (ko.json)

Kode

{
  "kleep": {
    "button": {
      "text": {
        "without_hash": "내 이상적인 사이즈 찾기",
        "with_hash": "추천 사이즈"
      }
    },
    "recommended": {
      "text": {
        "btn": "유사한 상품 보기",
        "hint": "사용 불가",
        "link": "유사한 상품 보기"
      }
    },
    "search": {
      "text": {
        "inputPlaceholder": "검색...",
        "productsBlockTitle": "상품",
        "clearButton": "지우기"
      }
    },
    "searchPage": {
      "text": {
        "header": "검색 결과",
        "query": "다음에 대한 결과",
        "submit": "검색",
        "input": "매장 검색",
        "viewProduct": "상품 보기"
      }
    }
  }
}

Portugisisk (pt.json)

Kode

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

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

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

Datakvalitet

>98% af produkter har en størrelsesguide kortlagt
<1% af varianter har manglende mål
0 forældreløse SKU’er (produkter uden kategorikortlægning)

Sporing

Alle 5 hændelser udløses korrekt
Komplet brugerrejse sporet (knap → anbefaling → kurv)
Payloads valideret

Ydeevne

JS-fejl < 1%
API-latenstid P95 < 500ms
Overvågning på plads

Brugerrejse

Størrelsesguide åbner korrekt
Anbefalinger vises korrekt
Læg i kurv fungerer fra størrelsesguiden
Lignende produkter vises (hvis aktiveret)
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

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.

​Oversigt over integrationsprocessen

​Onboarding

​Installation & testning

​Post-integration

​1. Funktionaliteter

​2. Funktionen Lignende Produkter

​3. Kleep Search-funktionen

​4. Returintegraton (valgfri)

​5. Hændelsessporing & Analyse

​6. CSS-tilpasning

​7. Flere miljøer

​7.5 CTA-knap & Lignende Produkter — Fuld installationsguide

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

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

​10. Oversættelser (i18n)

​11. Teknisk reference

​12. Go-live tjekliste

​13. Fejlfinding

​Tak fordi du bruger Kleep! 🎉

​Cookies og databeskyttelse

Oversigt over integrationsprocessen

Onboarding

Installation & testning

Post-integration

1. Funktionaliteter

2. Funktionen Lignende Produkter

3. Kleep Search-funktionen

4. Returintegraton (valgfri)

5. Hændelsessporing & Analyse

6. CSS-tilpasning

7. Flere miljøer

7.5 CTA-knap & Lignende Produkter — Fuld installationsguide

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

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

10. Oversættelser (i18n)

11. Teknisk reference

12. Go-live tjekliste

13. Fejlfinding

Tak fordi du bruger Kleep! 🎉

Cookies og databeskyttelse