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

Kontrakt signerat & fakturering konfigurerad

När kontraktet är signerat startar din Kleep-representant faktureringen via GoCardless: Konfigurera autogiro →.

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.

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

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.

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.

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 för mer information.

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.

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.

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

Installation och testning

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.

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.

Lansering

När du har godkänt publicerar vi Kleep på ditt live-tema.

Efter integrationen

Åtkomst till klientdashboard

Vi tillhandahåller inloggningsuppgifter för ditt team för att komma åt Kleep Dashboard, där du kan övervaka Kleeps nyckeltal i realtid.

Fit Feedback aktiverat

Vi aktiverar Fit Feedback i din dashboard så att ditt team kan förfina Kleeps storleksrekommendationer med hjälp av verkliga anpassningsdata.

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:

Lägga till vår CTA “Hitta min storlek” på dina produktsidor
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.

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:

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

Lägg till Kleep Similar Button-block

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.

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

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.

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.

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

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.

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

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

Om din leverantör inte finns listad, kontakta oss på support@kleep.ai — vi kan konfigurera en anpassad integration via SFTP eller API.

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:

Öppna webbläsarens Utvecklarverktyg (F12)
Gå till fliken Nätverk
Filtrera på “kleep”
Interagera med storleksguideknappen
Du bör se API-anrop för varje händelse

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.

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.

Fält för anpassad CSS Exempel på anpassning

Kod

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

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

För varje miljö:

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

Testa alltid ändringar på staging innan du tillämpar dem i produktion.

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

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.

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

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:

Kod

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

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

Kod

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

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

Kod

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

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:

Kod

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

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.

Kod

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

9. Vintage-teman — Konfiguration av liknande produkter

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

Kod

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

Steg 2: Rendera kodfragmentet Infoga den här raden var du vill att knappen ska visas:

Kod

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

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:

Kod

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

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)

Kod

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

Franska (fr.json)

Kod

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

Italienska (it.json)

Kod

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

Tyska (de.json)

Kod

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

Spanska (es.json)

Kod

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

Japanska (ja.json)

Kod

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

Koreanska (ko.json)

Kod

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

Portugisiska (pt.json)

Kod

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

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

Datakvalitet

>98% av produkterna har en storleksguide mappad
<1% av varianterna saknar mätningar
0 föräldralösa SKU:er (produkter utan kategorimarkering)

Spårning

Alla 5 händelser utlöses korrekt
Fullständig användarresa spårad (knapp → rekommendation → kundvagn)
Nyttolaster validerade

Prestanda

JS-fel < 1%
API-latens P95 < 500ms
Övervakning på plats

Användarresa

Storleksguide öppnas korrekt
Rekommendationer visas korrekt
Lägg i kundvagn fungerar från storleksguiden
Liknande produkter visas (om aktiverat)
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

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.

​Översikt över integrationsprocessen

​Onboarding

​Installation och testning

​Efter integrationen

​1. Funktionaliteter

​2. Funktionen Liknande produkter

​3. Kleep Search-funktionen

​4. Returintegration (valfritt)

​5. Händelsespårning och analys

​6. CSS-anpassning

​7. Flera miljöer

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

​8. Vintage-teman — Konfiguration av storleksguide

​9. Vintage-teman — Konfiguration av liknande produkter

​10. Översättningar (i18n)

​11. Teknisk referens

​12. Checklista inför lansering

​13. Felsökning

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

​Cookies och dataintegritet

Översikt över integrationsprocessen

Onboarding

Installation och testning

Efter integrationen

1. Funktionaliteter

2. Funktionen Liknande produkter

3. Kleep Search-funktionen

4. Returintegration (valfritt)

5. Händelsespårning och analys

6. CSS-anpassning

7. Flera miljöer

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

8. Vintage-teman — Konfiguration av storleksguide

9. Vintage-teman — Konfiguration av liknande produkter

10. Översättningar (i18n)

11. Teknisk referens

12. Checklista inför lansering

13. Felsökning

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

Cookies och dataintegritet