Shopify: CTA-knap og Lignende Produkter

Shopify V2 Integrationsguide

Dette afsnit viser, hvordan du tilføjer Kleep AI Sizing til din Shopify-butik.

Trin-for-trin videogennemgang

Følg vores Tango-tutorial for at tilføje Kleep-knappen til din butik på Online Store 2.0-temaer.

Shopify V1 Integrationsguide

1. Sizing

Dette afsnit viser, hvordan du tilføjer Kleep AI Sizing til din Shopify-kodebase.

Foretrækker du en visuel gennemgang?

Se den trin-for-trin Tango-tutorial til installation af Kleep på en Shopify V1-butik.

Trin

Trin 1: Aktiver App Embed Sørg for, at Kleep-appen er aktiveret i dine App embeds.

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

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

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

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

Kleep-knap

<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 indstillingsskemavalg Tilføj følgende valg til dit indstillingsskema i slutningen af siden:

Shopify-valg

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

For at tilføje dine egne CSS-stilarter:

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.

For eksempel:

Trin 5: Tilføj engelske oversættelser Tilføj engelske oversættelser til dine temalokaliseringer.

Oversættelser

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

Trin 6: Tilføj oversættelser til andre sprog Tilføj andre oversættelser til dine temalokaliseringer.

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

Validér opdateringer i Shopify Theme Customize-området. Konfigurér visuelle elementer i produktinformationsblokindstillingerne.
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. Indsæt følgende indhold:

Sekundær knap-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.

Gengiv snippet

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

2. Lignende Produkter

Installer “Lignende Produkter” til V1 Shopify-temaer

I dette tilfælde skal du tilføje et Liquid-snippet manuelt.

Trin 1 - Opret et snippet

Opret: snippets/kleep-similar-button.liquid Indsæt følgende kode:

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

Trin 2 - Gengiv snippettet inde i produktskabelonen

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

Gengiv snippet

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

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

Trin 3 - Aktivér den korrekte tilstand til V1-temaer

Da V1-temaer ikke kan indsætte OS2.0-blokke, skal widgetten bruge én af:

custom_buttons
popup+custom
button+custom

Installer “Lignende Produkter” til V2 (Online Store 2.0) Butikker

Moderne Shopify-temaer understøtter app embeds og brugerdefinerede blokke. Der kræves ingen kodeændringer.

Trin 1 — Aktivér Kleep App Embed

Gå til Online Store → Themes → Customize.
Åbn sektionen App embeds.
Aktivér Kleep-appen.
Gem temaet.

Dette aktiverer det centrale script, der styrer logikken for Lignende Produkter.

Find derefter “Show recommended products”

Trin 2 — Vælg visningstilstanden for Lignende Produkter

I Kleep-widgetkonfigurationen skal du vælge, hvordan Lignende Produkter skal vises på produktsiden:

disabled – slukker funktionen helt
popup – tilføjer automatisk et popup over variant-/størrelsessvælgere på desktop og erstatter standardknappen på mobil
button – indsætter automatisk en CTA-knap nær Læg i kurv-området, når den valgte variant er udsolgt
custom_buttons – deaktiverer al automatisk placering; forhandleren skal tilføje én eller flere “Kleep Similar Button”-blokke manuelt
popup+custom – beholder det automatiske popup og aktiverer også brugerdefinerede knapper tilføjet i temaet
button+custom – beholder den automatiske CTA-knap og aktiverer også brugerdefinerede knapper tilføjet i temaet

Gem derefter blot temaet, og det vil straks vises i din butik (produktside). Trin 3 — Tilføj brugerdefinerede knapper (kun til custom_buttons, popup+custom, button+custom) Hvis din valgte tilstand inkluderer brugerdefinerede knapper:

Åbn Online Store → Customize.
Gå til skabelonen Produktside.
I den ønskede sektion skal du klikke på Tilføj blok.
Vælg Kleep Similar Button.
Gem temaet.

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

Tilføjelse af flere “Lignende Produkter”-knapper (Primær & Sekundær)

Du kan tilføje et vilkårligt antal Lignende Produkter-knapper på produktsiden. Dette fungerer for både OS 2.0-temaer og V1/legacy-temaer.

Aktivér en tilstand, der understøtter brugerdefinerede knapper

For at tillade flere knapper skal widgetten indstilles til én af:

custom_buttons
popup+custom
button+custom

Disse tilstande aktiverer manuel placering, så forhandlere kan indsætte så mange knapper som nødvendigt.

Til Online Store 2.0 (Moderne temaer)

OS 2.0-temaer giver mulighed for at tilføje knapper visuelt via temaredigeringsværktøjet. Trin:

Gå til Online Store → Customize
Åbn produktsidens skabelon
Klik på Tilføj blok → Kleep Similar Button
Tilføj knappen, hvor du ønsker den
Gentag, hvis du ønsker 2+ knapper på siden

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

Til V1 / Legacy-temaer

Legacy-temaer understøtter ikke blokke, men du kan gengive snippettet flere gange. Indsæt dette snippet, hvor du ønsker en knap: {% render 'kleep-similar-button' %} For at oprette flere knapper skal du blot placere denne kode på forskellige steder i produktskabelonen. Hvert snippet-kald opretter en ekstra knap.

Oversigt

For at tilføje flere Lignende Produkter-knapper: Aktivér en tilstand med brugerdefinerede knapper → tilføj flere OS 2.0-blokke eller flere snippet-kald → alle knapper fungerer automatisk, når varianten er udsolgt.

CTA-placering på PDP Placeringen er defineret af DOM-selektorer inde i KleepSDK.getConstants(). targetProductInfoBlockQueries – hvor produktinformationen er. Dette er et 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) Vi registrerer enhedstypen ved hjælp af checkIfMobile(): Denne funktion tjekker browserens navigator.userAgent-streng mod en liste over mobilenheder (f.eks. iPhone, Android, iPad).

Hvis desktop, vises CTA’en som hover-popups ved siden af variantetiketterne.
Hvis mobil, erstatter scriptet hover-popups med en enkelt knap, da hover-interaktioner ikke fungerer på touchskærme.

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.

3. Søgning

Bemærk: Du behøver ikke ændre nogen temakode for at opsætte Kleep-søgning i Shopify V1. Åbn temaredigeringsværktøjet, slå Kleep App Embed til, aktivér Brugerdefineret søgning, og erstat derefter standardsøgeblokken med Kleep-søgeblokken. 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. Alt dette vil blive beskrevet nedenfor Åbn temaredigeringsværktøjet Gå til Online Store > Themes, find det tema du ønsker at redigere, og klik på Customize. Aktivér Kleep App Embed Åbn sektionen App embeds. Find Kleep-appen og slå den til. Aktivér brugerdefineret søgning (valgfrit) Aktivér “Enable custom search” i Kleep-indstillingerne.

Erstat standardsøgning Fra temaredigeringsværktøjet skal du åbne søgeskabelonen (naviger til søgesidens skabelon).

Fjern eller skjul standardsøgesektionen fra temaet.

Tilføj Kleep-søgeblokken (fra fanen Apps) og placer den, hvor standardsøgningen var.

Gem temaændringerne. Søgefunktionen er integreret som en Liquid-sektion i appen, ikke som separat Liquid-kode. Aktivering styres af:

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

Dette sikrer, at kun specifikke butikker (domæner) kan aktivere søgefunktionen.Layout og stilarter

Gitter- vs. listevisning skiftes kun via indstillingen products_search_grid_layout i appen.

For at gøre dette skal du gå til den søgning, du allerede har tilføjet, og på højre side vil du se muligheden for at konfigurere den

Yderligere stilarter (skrifttyper, farver, afstand) implementeres af os i koden, pr. butik, efter behov.
Al funktionalitet er knyttet til denne Liquid-sektion og aktiveret via kleep_enable_custom_search i appen, ikke ved at tilføje Liquid-kode til temaindstillingerne.
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.

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.

Velkommen

CMS

Mobil

Dashboard

Data

Privatliv

Shopify: CTA-knap og Lignende Produkter

Shopify V2 Integrationsguide

Trin-for-trin videogennemgang

Shopify V1 Integrationsguide

1. Sizing

Foretrækker du en visuel gennemgang?

Trin

2. Lignende Produkter

Installer “Lignende Produkter” til V1 Shopify-temaer

Trin 1 - Opret et snippet

Trin 2 - Gengiv snippettet inde i produktskabelonen

Trin 3 - Aktivér den korrekte tilstand til V1-temaer

Installer “Lignende Produkter” til V2 (Online Store 2.0) Butikker

Trin 1 — Aktivér Kleep App Embed

Trin 2 — Vælg visningstilstanden for Lignende Produkter

Tilføjelse af flere “Lignende Produkter”-knapper (Primær & Sekundær)

Aktivér en tilstand, der understøtter brugerdefinerede knapper

Til Online Store 2.0 (Moderne temaer)

Til V1 / Legacy-temaer

Oversigt

3. Søgning

Cookies og databeskyttelse

​Shopify V2 Integrationsguide

Trin-for-trin videogennemgang

​Shopify V1 Integrationsguide

​1. Sizing

Foretrækker du en visuel gennemgang?

​Trin

​2. Lignende Produkter

​Installer “Lignende Produkter” til V1 Shopify-temaer

​Trin 1 - Opret et snippet

​Trin 2 - Gengiv snippettet inde i produktskabelonen

​Trin 3 - Aktivér den korrekte tilstand til V1-temaer

​Installer “Lignende Produkter” til V2 (Online Store 2.0) Butikker

​Trin 1 — Aktivér Kleep App Embed

​Trin 2 — Vælg visningstilstanden for Lignende Produkter

​Tilføjelse af flere “Lignende Produkter”-knapper (Primær & Sekundær)

​Aktivér en tilstand, der understøtter brugerdefinerede knapper

​Til Online Store 2.0 (Moderne temaer)

​Til V1 / Legacy-temaer

​Oversigt

​3. Søgning

​Cookies og databeskyttelse

Shopify V2 Integrationsguide

Shopify V1 Integrationsguide

1. Sizing

Trin

2. Lignende Produkter

Installer “Lignende Produkter” til V1 Shopify-temaer

Trin 1 - Opret et snippet

Trin 2 - Gengiv snippettet inde i produktskabelonen

Trin 3 - Aktivér den korrekte tilstand til V1-temaer

Installer “Lignende Produkter” til V2 (Online Store 2.0) Butikker

Trin 1 — Aktivér Kleep App Embed

Trin 2 — Vælg visningstilstanden for Lignende Produkter

Tilføjelse af flere “Lignende Produkter”-knapper (Primær & Sekundær)

Aktivér en tilstand, der understøtter brugerdefinerede knapper

Til Online Store 2.0 (Moderne temaer)

Til V1 / Legacy-temaer

Oversigt

3. Søgning

Cookies og databeskyttelse