Shopify: CTA-knapp och liknande produkter

Integrationsguide för Shopify V2

Det här avsnittet visar hur du lägger till Kleep AI Storleksguide i din Shopify-butik.

Steg-för-steg videogenomgång

Följ vår Tango-tutorial för att lägga till Kleep-knappen i din butik på Online Store 2.0-teman.

Integrationsguide för Shopify V1

1. Storleksguide

Det här avsnittet visar hur du lägger till Kleep AI Storleksguide i din Shopify-kodbas.

Föredrar du en visuell genomgång?

Se den steg-för-steg Tango-tutorialen för att installera Kleep i en Shopify V1-butik.

Steg

Steg 1: Aktivera App Embed Se till att Kleep-appen är aktiverad i dina App Embeds.

Capture d'écran 2025-08-13 à 14.29.30.png

Steg 2: Rendera knapp-snippeten Klistra in följande kod där du vill att Kleep ska visas. Den måste vara en del av Product info-blocket i mappen snippets.

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

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

Kleep-knapp

<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ällningsschemaalternativ Lägg till följande alternativ i ditt inställningsschema i slutet av sidan:

Shopify-alternativ

{
  "type": "header",
  "content": "Button text",
      "info": "If you enable this feature, the button text you enter will be replaced for all languages in your store"
    },
    {
      "type": "checkbox",
      "default": false,
      "id": "custom_button_text_toggle",
      "label": "Enable custom button text"
    },
    {
      "type": "text",
      "id": "custom_find_size_text",
      "label": "Find my best size text",
      "info": "What text will display instead of \"Find my best size\"?"
    },
    {
      "type": "text",
      "id": "custom_recommended_size_text",
      "label": "Recommended size text",
      "info": "What text will display instead of \"Recommended size\"?"
    },
    {
      "type": "header",
      "content": "Image"
    },
    {
      "type": "url",
      "id": "image_url",
      "label": "Url Image"
    },
    {
      "type": "range",
      "id": "image_size",
      "min": 0,
      "max": 80,
      "step": 2,
      "unit": "px",
      "label": "Image size (square)",
      "default": 20
    },
    {
      "type": "header",
      "content": "CSS Styles"
    },
    {
      "type": "checkbox",
      "default": true,
      "id": "default_font_family",
      "label": "Font du thème",
      "info": "Si coché, la variable css `--font-body-family` est utilisée"
    },
    {
      "type": "font_picker",
      "id": "font_family",
      "label": "Font Family",
      "default": "helvetica_n4"
    },
    {
      "type": "select",
      "id": "text_style",
      "label": "Style texte",
      "default": "normal",
      "options": [
        {
          "label": "Normal",
          "value": "normal"
        },
        {
          "label": "Italic",
          "value": "italic"
        },
        {
          "label": "Oblique",
          "value": "oblique"
        }
      ]
    },
    {
      "type": "select",
      "id": "text_transform",
      "label": "Texte transformation",
      "default": "none",
      "options": [
        {
          "label": "Normal",
          "value": "none"
        },
        {
          "label": "Capitalize",
          "value": "capitalize"
        },
        {
          "label": "Uppercase",
          "value": "uppercase"
        },
        {
          "label": "Lowercase",
          "value": "lowercase"
        }
      ]
    },
    {
      "type": "select",
      "id": "text_weight",
      "label": "Poid texte",
      "default": "400",
      "options": [
        {
          "label": "100",
          "value": "100"
        },
        {
          "label": "200",
          "value": "200"
        },
        {
          "label": "300",
          "value": "300"
        },
        {
          "label": "400",
          "value": "400"
        },
        {
          "label": "500",
          "value": "500"
        },
        {
          "label": "600",
          "value": "600"
        },
        {
          "label": "700",
          "value": "700"
        },
        {
          "label": "800",
          "value": "800"
        },
        {
          "label": "900",
          "value": "900"
        }
      ]
    },
    {
      "type": "range",
      "id": "text_size",
      "min": 2,
      "max": 50,
      "step": 2,
      "unit": "px",
      "label": "Taille police",
      "default": 16
    },
    {
      "type": "checkbox",
      "id": "text_underline",
      "label": "Texte soulignage",
      "default": false
    },
    {
      "type": "range",
      "id": "text_underline_offset",
      "min": 1,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Offset underline",
      "default": 2
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Couleur texte du bouton",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Couleur fond",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Couleur bordures",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "border_width",
      "min": 0,
      "max": 8,
      "step": 1,
      "unit": "px",
      "label": "Épaisseur bordures",
      "default": 0
    },
    {
      "type": "header",
      "content": "CSS Styles",
      "info": "Espacements"
    },
    {
      "type": "checkbox",
      "id": "center",
      "label": "Centrer le bouton",
      "default": false,
      "info": "Cela remplacera le 'Margin horizontal'"
    },
    {
      "type": "range",
      "id": "margin_y",
      "min": 0,
      "max": 80,
      "step": 2,
      "unit": "px",
      "label": "Margin vertical",
      "default": 0
    },
    {
      "type": "range",
      "id": "margin_x",
      "min": 0,
      "max": 80,
      "step": 2,
      "unit": "px",
      "label": "Margin horizontal",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding_t",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Padding top",
      "default": 12
    },
    {
      "type": "range",
      "id": "padding_r",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Padding right",
      "default": 16
    },
    {
      "type": "range",
      "id": "padding_b",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Padding bottom",
      "default": 12
    },
    {
      "type": "range",
      "id": "padding_l",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Padding left",
      "default": 16
    },
    {
      "type": "range",
      "id": "border_radius",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Bordures arrondies",
      "default": 0
    }

För att lägga till egna CSS-stilar:

För att ändra utseendet (färger, avstånd, teckensnitt, osv.), klistra in din CSS i rutan “Indata för anpassade CSS-stilar” i Kleep App Embed-inställningarna.

Till exempel:

Steg 5: Lägg till engelska översättningar Lägg till engelska översättningar i dina temaspråk.

Översättningar

"kleep": {
    "button": {
      "text": {
        "without_hash": "Find my ideal size",
        "with_hash": "Ideal size"
      }
    },
    "recommended": {
      "text": {
        "btn": "View similar",
        "hint": "Size unavailable",
        "link": "See similar products"
      }
    },
    "search": {
      "text": {
        "inputPlaceholder": "Search...",
        "productsBlockTitle": "Products",
        "clearButton": "Clear"
      }
    },
    "searchPage": {
      "text": {
        "header": "search results",
        "query": "Results for",
        "submit": "Search",
        "input": "Search the store",
        "viewProduct": "View product"
      }
    }
  }

Steg 6: Lägg till översättningar för andra språk Lägg till andra översättningar i dina temaspråk.

fr.json

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

it.json

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

de.json

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

es.json

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

ja.json

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

ko.json

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

pt.json

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

Validera uppdateringar i Shopify Theme Customize-området. Konfigurera visuella inställningar inom produktinformationsblockets inställningar.
Om du vill lägga till en sekundär knapp behöver du skapa en ny fil med namnet kleep-secondary-button.liquid i din mapp snippets. Lägg in följande innehåll:

Kod för sekundär knapp

<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. Den måste vara en del av Product info-blocket i mappen snippets.

Render-snippet

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

2. Liknande produkter

Installera “Liknande produkter” för V1 Shopify-teman

I det här fallet måste du lägga till en Liquid-snippet manuellt.

Steg 1 - Skapa en snippet

Skapa: snippets/kleep-similar-button.liquid Infoga följande kod:

Liknande knapp-snippet

{% 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 snippeten i produktmallen

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

Render-snippet

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

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

Steg 3 - Aktivera rätt läge för V1-teman

Eftersom V1-teman inte kan infoga OS2.0-block måste widgeten använda ett av:

custom_buttons
popup+custom
button+custom

Installera “Liknande produkter” för V2-butiker (Online Store 2.0)

Moderna Shopify-teman stöder app embeds och anpassade block. Inga kodändringar krävs.

Steg 1 — Aktivera Kleep App Embed

Gå till Online Store → Themes → Customize.
Öppna avsnittet App embeds.
Aktivera Kleep App.
Spara temat.

Detta aktiverar kärnsskriptet som hanterar logiken för liknande produkter.

Hitta sedan “Visa rekommenderade produkter”

Steg 2 — Välj visningsläge för liknande produkter

Välj hur liknande produkter ska visas på produktsidan i Kleep-widgetkonfigurationen:

disabled – stänger av funktionen helt
popup – lägger automatiskt till en popup ovanför variant-/storleksväljare på datorn och ersätter standardknappen på mobilen
button – infogar automatiskt en CTA-knapp nära Lägg i varukorg-området när den valda varianten är slut i lager
custom_buttons – inaktiverar all automatisk placering; handlaren måste manuellt lägga till ett eller flera “Kleep Similar Button”-block
popup+custom – behåller den automatiska popupen och aktiverar även anpassade knappar som lagts till i temat
button+custom – behåller den automatiska CTA-knappen och aktiverar även anpassade knappar som lagts till i temat

Spara sedan temat, så visas det omedelbart i din butik (Produktsidan). Steg 3 — Lägg till anpassade knappar (endast för custom_buttons, popup+custom, button+custom) Om ditt valda läge inkluderar anpassade knappar:

Öppna Online Store → Customize.
Gå till mallen Product page.
Klicka på Add Block i önskat avsnitt.
Välj Kleep Similar Button.
Spara temat.

Anpassade knappar visas bara när den valda varianten är slut i lager.

Lägga till flera knappar för “Liknande produkter” (primär och sekundär)

Du kan lägga till hur många knappar för liknande produkter som helst på produktsidan. Detta fungerar för både OS 2.0-teman och V1- / äldre teman.

Aktivera ett läge som stöder anpassade knappar

För att tillåta flera knappar måste widgeten vara inställd på ett av:

custom_buttons
popup+custom
button+custom

Dessa lägen aktiverar manuell placering, så handlare kan infoga så många knappar som behövs.

För Online Store 2.0 (moderna teman)

OS 2.0-teman gör det möjligt att lägga till knappar visuellt via Theme Editor. Steg:

Gå till Online Store → Customize
Öppna mallen Product page
Klicka på Add block → Kleep Similar Button
Lägg till knappen var du vill
Upprepa om du vill ha 2+ knappar på sidan

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

För V1- / äldre teman

Äldre teman stöder inte block, men du kan rendera snippeten flera gånger. Infoga den här snippeten var du vill ha en knapp: {% render 'kleep-similar-button' %} För att skapa flera knappar, placera helt enkelt den här koden på olika ställen i produktmallen. Varje snippet-anrop skapar en ytterligare knapp.

Sammanfattning

För att lägga till flera knappar för liknande produkter: Aktivera ett läge med anpassade knappar → lägg till flera OS 2.0-block eller flera snippet-anrop → alla knappar fungerar automatiskt när varianten är slut i lager.

CTA-placering på PDP Placeringen definieras av DOM-väljare inuti KleepSDK.getConstants(). targetProductInfoBlockQueries – var produktinformationen finns. Det är en array av väljare som pekar på huvudbehållaren för produktdetaljer (titel, pris, storlekar, osv.). Skriptet itererar genom dessa väljare och använder den första det hittar som infogningspunkt för CTA eller popup-fönster. targetVariantQueries – var storleks-/variantalternativ finns: När produktinformationsblocket har hittats söker skriptet inuti det efter variantelement (som storleksväljare). Varje variant-<label> (eller motsvarande) blir ett mål för att bifoga popup-CTA. Popup kontra knapp (dator kontra mobil) Vi identifierar enhetstypen med checkIfMobile(): Denna funktion kontrollerar webbläsarens navigator.userAgent-sträng mot en lista med mobila enheter (t.ex. iPhone, Android, iPad).

På dator visas CTA som hover-popup-fönster bredvid variantetiketterna.
På mobil ersätter skriptet hover-popup-fönstren med en enda knapp, eftersom hover-interaktioner inte fungerar på pekskärmar.

Anpassning

Inga andra varianter av placering/layout tillhandahålls utöver justering av väljare och CSS.
För att ändra utseendet (färger, avstånd, teckensnitt, osv.), klistra in din CSS i rutan “Indata för anpassade CSS-stilar” i Kleep App Embed-inställningarna.

3. Sök

Obs: Du behöver inte ändra någon temakod för att konfigurera Kleep Search i Shopify V1. Öppna Theme Editor, aktivera Kleep App Embed, aktivera Custom Search och ersätt sedan standardsökblocket med Kleep Search-blocket. För att ändra utseendet (färger, avstånd, teckensnitt, osv.), klistra in din CSS i rutan “Indata för anpassade CSS-stilar” i Kleep App Embed-inställningarna. Allt detta beskrivs nedan Öppna Theme Editor Gå till Online Store > Themes, hitta temat du vill redigera och klicka på Customize. Aktivera Kleep App Embed Öppna avsnittet App Embeds. Hitta Kleep-appen och aktivera den. Aktivera anpassad sökning (valfritt) Aktivera “Enable custom search” i Kleep-inställningarna.

Ersätt standardsökning Öppna sökmallen i Theme Editor (navigera till söksidans mall).

Ta bort eller dölj standardsökningsavsnittet från temat.

Lägg till Kleep Search-blocket (från fliken Apps) och placera det där standardsökningen var.

Spara temaändringarna. Sökfunktionen är integrerad som ett Liquid-avsnitt i appen, inte som en separat Liquid-kod. Aktivering styrs av:

{% if block.settings.kleep_enable_custom_search  and '[kookai.fr](http://kookai.fr/), [gualap.com](http://gualap.com/), [gualap.fr](http://gualap.fr/), [www.molli.com](http://www.molli.com/), [getkleep.myshopify.com](http://getkleep.myshopify.com/)'  contains domain%}

Detta säkerställer att endast specifika butiker (domäner) kan aktivera sökfunktionen.Layout och stilar

Rutnät kontra listvy växlas endast via inställningen products_search_grid_layout i appen.

För att göra detta, gå till sökningen du redan har lagt till och på höger sida ser du alternativet för att konfigurera den.

Ytterligare stilar (teckensnitt, färger, avstånd) implementeras av oss i koden, per butik, vid behov.
All funktionalitet är kopplad till det här Liquid-avsnittet och aktiveras via kleep_enable_custom_search i appen, inte genom att lägga till Liquid-kod i temainställningarna.
För att ändra utseendet (färger, avstånd, teckensnitt, osv.), klistra in din CSS i rutan “Indata för anpassade CSS-stilar” i Kleep App Embed-inställningarna.

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 & dataintegritet.

​Integrationsguide för Shopify V2

Steg-för-steg videogenomgång

​Integrationsguide för Shopify V1

​1. Storleksguide

Föredrar du en visuell genomgång?

​Steg

​2. Liknande produkter

​Installera “Liknande produkter” för V1 Shopify-teman

​Steg 1 - Skapa en snippet

​Steg 2 - Rendera snippeten i produktmallen

​Steg 3 - Aktivera rätt läge för V1-teman

​Installera “Liknande produkter” för V2-butiker (Online Store 2.0)

​Steg 1 — Aktivera Kleep App Embed

​Steg 2 — Välj visningsläge för liknande produkter

​Lägga till flera knappar för “Liknande produkter” (primär och sekundär)

​Aktivera ett läge som stöder anpassade knappar

​För Online Store 2.0 (moderna teman)

​För V1- / äldre teman

​Sammanfattning

​3. Sök

​Cookies och dataintegritet