Shopify: Przycisk CTA i podobne produkty

Przewodnik integracji Shopify V2

Ta sekcja pokazuje, jak dodać Kleep AI Sizing do swojego sklepu Shopify.

Przewodnik wideo krok po kroku

Skorzystaj z naszego samouczka Tango, aby dodać przycisk Kleep do sklepu na motywach Online Store 2.0.

Przewodnik integracji Shopify V1

1. Rozmiarowanie

Ta sekcja pokazuje, jak dodać Kleep AI Sizing do kodu Shopify.

Wolisz wizualny przewodnik?

Obejrzyj samouczek Tango krok po kroku dotyczący instalacji Kleep w sklepie Shopify V1.

Kroki

Krok 1: Włącz osadzenie aplikacji Upewnij się, że aplikacja Kleep jest aktywowana w osadzeniach aplikacji.

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

Krok 2: Wyrenderuj snippet przycisku Wklej następujący kod w miejscu, gdzie Kleep ma się pojawić. Musi to być część bloku Product info w folderze snippets.

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

Krok 3: Utwórz plik snippetu przycisku Utwórz nowy plik o nazwie kleep-button.liquid w folderze snippets. Wstaw następującą zawartość:

Przycisk Kleep

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

Krok 4: Dodaj opcje schematu ustawień Dodaj następujące opcje do schematu ustawień na końcu strony:

Opcje Shopify

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

Aby dodać własne style CSS:

Aby zmienić wygląd (kolory, odstępy, czcionki itp.), wklej swój CSS w pole „Wprowadź niestandardowe style CSS” w ustawieniach osadzenia aplikacji Kleep.

Na przykład:

Krok 5: Dodaj angielskie tłumaczenia Dodaj angielskie tłumaczenia do plików lokalizacyjnych motywu.

Tłumaczenia

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

Krok 6: Dodaj tłumaczenia w innych językach Dodaj pozostałe tłumaczenia do plików lokalizacyjnych motywu.

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

Sprawdź aktualizacje w obszarze Dostosowywanie motywu Shopify. Skonfiguruj elementy wizualne w ustawieniach bloku informacji o produkcie.
Jeśli chcesz dodać przycisk dodatkowy, musisz utworzyć nowy plik o nazwie kleep-secondary-button.liquid w folderze snippets. Wstaw następującą zawartość:

Kod przycisku dodatkowego

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

Wklej następujący kod w miejscu, gdzie Kleep ma się pojawić. Musi to być część bloku Product info w folderze snippets.

Snippet renderujący

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

2. Podobne produkty

Instalacja „Podobnych produktów” dla motywów Shopify V1

W tym przypadku musisz ręcznie dodać snippet Liquid.

Krok 1 — Utwórz snippet

Utwórz: snippets/kleep-similar-button.liquid Wstaw następujący kod:

Snippet przycisku podobnych produktów

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

Krok 2 — Wyrenderuj snippet wewnątrz szablonu produktu

Wstaw tę linię w miejscu, gdzie przycisk ma się pojawić:

Snippet renderujący

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

Typowe umiejscowienie: pod selektorami wariantów lub w pobliżu formularza Dodaj do koszyka.

Krok 3 — Włącz właściwy tryb dla motywów V1

Ponieważ motywy V1 nie mogą wstawiać bloków OS2.0, widżet musi używać jednego z:

custom_buttons
popup+custom
button+custom

Instalacja „Podobnych produktów” dla sklepów V2 (Online Store 2.0)

Nowoczesne motywy Shopify obsługują osadzenia aplikacji i bloki niestandardowe. Żadne zmiany kodu nie są wymagane.

Krok 1 — Włącz osadzenie aplikacji Kleep

Przejdź do Sklep online → Motywy → Dostosuj.
Otwórz sekcję Osadzenia aplikacji.
Włącz aplikację Kleep.
Zapisz motyw.

Aktywuje to główny skrypt zarządzający logiką podobnych produktów.

Następnie znajdź opcję „Pokaż rekomendowane produkty”

Krok 2 — Wybierz tryb wyświetlania podobnych produktów

W konfiguracji widżetu Kleep wybierz sposób wyświetlania podobnych produktów na stronie produktu:

disabled — całkowicie wyłącza funkcję
popup — automatycznie dodaje popup nad selektorami wariantów/rozmiarów na komputerze i zastępuje domyślny przycisk na urządzeniu mobilnym
button — automatycznie wstawia przycisk CTA w pobliżu obszaru Dodaj do koszyka, gdy wybrany wariant jest niedostępny
custom_buttons — wyłącza całe automatyczne umiejscowienie; sprzedawca musi ręcznie dodać jeden lub więcej bloków „Kleep Similar Button”
popup+custom — zachowuje automatyczny popup i włącza również wszelkie przyciski niestandardowe dodane do motywu
button+custom — zachowuje automatyczny przycisk CTA i włącza również wszelkie przyciski niestandardowe dodane do motywu

Następnie wystarczy zapisać motyw, a natychmiast pojawi się w Twoim sklepie (strona produktu). Krok 3 — Dodaj przyciski niestandardowe (tylko dla custom_buttons, popup+custom, button+custom) Jeśli wybrany tryb obejmuje przyciski niestandardowe:

Otwórz Sklep online → Dostosuj.
Przejdź do szablonu strony Produktu.
W żądanej sekcji kliknij Dodaj blok.
Wybierz Kleep Similar Button.
Zapisz motyw.

Przyciski niestandardowe pojawią się tylko wtedy, gdy wybrany wariant jest niedostępny.

Dodawanie wielu przycisków „Podobnych produktów” (główny i dodatkowy)

Możesz dodać dowolną liczbę przycisków podobnych produktów na stronie produktu. Działa to zarówno dla motywów OS 2.0, jak i V1 / starszych motywów.

Włącz tryb obsługujący przyciski niestandardowe

Aby umożliwić wiele przycisków, widżet musi być ustawiony na jeden z:

custom_buttons
popup+custom
button+custom

Te tryby aktywują ręczne umiejscowienie, dzięki czemu sprzedawcy mogą wstawiać tyle przycisków, ile potrzebują.

Dla Online Store 2.0 (nowoczesne motywy)

Motywy OS 2.0 umożliwiają dodawanie przycisków wizualnie przez Edytor motywu. Kroki:

Przejdź do Sklep online → Dostosuj
Otwórz szablon strony produktu
Kliknij Dodaj blok → Kleep Similar Button
Dodaj przycisk w dowolnym miejscu
Powtórz, jeśli chcesz 2+ przycisków na stronie

Każdy przycisk pojawia się automatycznie tylko wtedy, gdy wybrany wariant jest niedostępny.

Dla V1 / starszych motywów

Starsze motywy nie obsługują bloków, ale możesz renderować snippet wiele razy. Wstaw ten snippet wszędzie tam, gdzie chcesz umieścić przycisk: {% render 'kleep-similar-button' %} Aby utworzyć wiele przycisków, wystarczy umieścić ten kod w różnych obszarach szablonu produktu. Każde wywołanie snippetu tworzy dodatkowy przycisk.

Podsumowanie

Aby dodać wiele przycisków podobnych produktów: Włącz dowolny tryb z przyciskami niestandardowymi → dodaj kilka bloków OS 2.0 lub wielokrotne wywołania snippetu → wszystkie przyciski działają automatycznie, gdy wariant jest niedostępny.

Lokalizacja CTA na PDP Lokalizacja jest określona przez selektory DOM wewnątrz KleepSDK.getConstants(). targetProductInfoBlockQueries — gdzie znajdują się informacje o produkcie. Jest to tablica selektorów wskazujących na główny kontener szczegółów produktu (tytuł, cena, rozmiary itp.). Skrypt iteruje przez te selektory i używa pierwszego znalezionego jako punktu wstawienia CTA lub popupów. targetVariantQueries — gdzie znajdują się opcje rozmiarów/wariantów: Po znalezieniu bloku informacji o produkcie skrypt szuka wewnątrz niego elementów wariantów (np. selektorów rozmiarów). Każdy <label> wariantu (lub odpowiednik) staje się celem dołączenia popup CTA. Popup a przycisk (komputer a urządzenie mobilne) Wykrywamy typ urządzenia za pomocą checkIfMobile(): Ta funkcja sprawdza ciąg navigator.userAgent przeglądarki pod kątem listy urządzeń mobilnych (np. iPhone, Android, iPad).

Na komputerze CTA jest wyświetlany jako popupy po najechaniu obok etykiet wariantów.
Na urządzeniu mobilnym skrypt zastępuje popupy po najechaniu pojedynczym przyciskiem, ponieważ interakcje po najechaniu nie działają na ekranach dotykowych.

Dostosowywanie

Inne warianty umiejscowienia/układu nie są dostępne poza dostosowaniem selektorów i CSS.
Aby zmienić wygląd (kolory, odstępy, czcionki itp.), wklej swój CSS w pole „Wprowadź niestandardowe style CSS” w ustawieniach osadzenia aplikacji Kleep.

3. Wyszukiwanie

Uwaga: Nie musisz zmieniać żadnego kodu motywu, aby skonfigurować Kleep Search w Shopify V1. Otwórz Edytor motywu, włącz osadzenie aplikacji Kleep, aktywuj wyszukiwanie niestandardowe, a następnie zastąp domyślny blok wyszukiwania blokiem Kleep Search. Aby zmienić wygląd (kolory, odstępy, czcionki itp.), wklej swój CSS w pole „Wprowadź niestandardowe style CSS” w ustawieniach osadzenia aplikacji Kleep. Wszystkie te czynności są opisane poniżej Otwórz Edytor motywu Przejdź do Sklep online > Motywy, znajdź motyw, który chcesz edytować, i kliknij Dostosuj. Włącz osadzenie aplikacji Kleep Otwórz sekcję Osadzenia aplikacji. Znajdź aplikację Kleep i włącz ją. Włącz wyszukiwanie niestandardowe (opcjonalne) W ustawieniach Kleep włącz „Włącz wyszukiwanie niestandardowe”.

Zastąp domyślne wyszukiwanie W edytorze motywu otwórz szablon wyszukiwania (przejdź do szablonu strony wyszukiwania).

Usuń lub ukryj domyślną sekcję wyszukiwania z motywu.

Dodaj blok Kleep Search (z karty Aplikacje) i umieść go tam, gdzie było domyślne wyszukiwanie.

Zapisz zmiany motywu. Funkcja wyszukiwania jest zintegrowana jako sekcja Liquid w aplikacji, nie jako osobny kod Liquid. Aktywacja jest kontrolowana przez:

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

Zapewnia to, że tylko określone sklepy (domeny) mogą włączyć funkcję wyszukiwania.Układ i style

Widok siatki/listy jest przełączany wyłącznie przez ustawienie products_search_grid_layout w aplikacji.

Aby to zrobić, przejdź do wyszukiwania, które już dodałeś, a po prawej stronie zobaczysz opcję konfiguracji

Dodatkowe style (czcionki, kolory, odstępy) są implementowane przez nas w kodzie, indywidualnie dla każdego sklepu, w razie potrzeby.
Cała funkcjonalność jest powiązana z tą sekcją Liquid i włączana przez kleep_enable_custom_search w aplikacji, nie przez dodawanie kodu Liquid do ustawień motywu.
Aby zmienić wygląd (kolory, odstępy, czcionki itp.), wklej swój CSS w pole „Wprowadź niestandardowe style CSS” w ustawieniach osadzenia aplikacji Kleep.

Kleep jest w pełni uzależniony od zgody odwiedzającego: skrypt wczytuje się tylko po zebraniu zgody przez Twój CMP i musisz odpowiednio uzależnić jego wczytanie. Pełna lista modułów śledzących, przetwarzanych danych, celów i podstaw prawnych, hostingu, podprzetwarzających i zabezpieczeń znajduje się w sekcji Pliki cookie, CMP i prywatność danych.

​Przewodnik integracji Shopify V2

Przewodnik wideo krok po kroku

​Przewodnik integracji Shopify V1

​1. Rozmiarowanie

Wolisz wizualny przewodnik?

​Kroki

​2. Podobne produkty

​Instalacja „Podobnych produktów” dla motywów Shopify V1

​Krok 1 — Utwórz snippet

​Krok 2 — Wyrenderuj snippet wewnątrz szablonu produktu

​Krok 3 — Włącz właściwy tryb dla motywów V1

​Instalacja „Podobnych produktów” dla sklepów V2 (Online Store 2.0)

​Krok 1 — Włącz osadzenie aplikacji Kleep

​Krok 2 — Wybierz tryb wyświetlania podobnych produktów

​Dodawanie wielu przycisków „Podobnych produktów” (główny i dodatkowy)

​Włącz tryb obsługujący przyciski niestandardowe

​Dla Online Store 2.0 (nowoczesne motywy)

​Dla V1 / starszych motywów

​Podsumowanie

​3. Wyszukiwanie

​Pliki cookie i prywatność danych