Przewodnik integracji Shopify

Ten przewodnik przeprowadzi Cię przez instalację Kleep w sklepie Shopify. Kleep oferuje trzy główne funkcje: inteligentny przewodnik rozmiarów (Kleep Sizing), rekomendacje podobnych produktów (Kleep Similar Products) oraz zoptymalizowane wyszukiwanie produktów (Kleep Search).

Przegląd procesu integracji

Oto czego możesz się spodziewać od podpisania umowy do uruchomienia i dalej. Pełna integracja zajmuje zazwyczaj około 5–6 tygodni.

Onboarding

Podpisanie umowy i konfiguracja płatności

Po podpisaniu umowy Twój przedstawiciel Kleep uruchamia płatności za pośrednictwem GoCardless: Skonfiguruj polecenie zapłaty →.

Spotkanie inaugurujące onboarding

Krótka rozmowa z przedstawicielem Kleep w celu uzgodnienia harmonogramu, kontaktów technicznych i wszelkich wymagań specyficznych dla sklepu przed rozpoczęciem instalacji.

Wypełnij formularz onboardingowy

Po spotkaniu inaugurującym poprosimy Cię o udostępnienie kilku szczegółów dotyczących Twojej firmy, rozliczeń, środowisk sklepu i konfiguracji zwrotów, abyśmy mogli przygotować integrację.Wypełnij nasz formularz onboardingowy →Zajmuje to około 5 minut. Po przesłaniu nasz zespół przejrzy Twoje odpowiedzi i potwierdzi kolejne kroki w ciągu 1 dnia roboczego.

Udostępnij swój adres URL Shopify i kod współpracownika

Wyślij nam adres swojego sklepu (np. your-store.myshopify.com) wraz z kodem żądania współpracownika, abyśmy mogli poprosić o dostęp do Twojego sklepu.

Wiele sklepów Shopify? Jeśli masz kilka instancji Shopify (np. różne regiony lub marki), wyślij nam kod współpracownika dla każdego sklepu — potrzebujemy po jednym kodzie na sklep.

Nie wiesz, gdzie je znaleźć? W panelu administracyjnym Shopify przejdź do Ustawienia → Użytkownicy i uprawnienia — Twój adres URL myshopify.com jest wyświetlany na górze, a Kod żądania współpracownika jest wymieniony w sekcji Współpracownicy. Więcej informacji znajdziesz w artykule pomocy Shopify na temat kont współpracowników.

Zaakceptuj nasze żądanie współpracownika

Wyślemy żądanie dostępu współpracownika z naszego konta Shopify Partner. Zatwierdź je w Ustawienia → Użytkownicy i uprawnienia → Współpracownicy w panelu administracyjnym Shopify.

Zainstaluj aplikację Kleep w każdym sklepie

Gdy uzyskamy dostęp współpracownika, wyślemy Ci link do instalacji aplikacji dla każdego sklepu. Musisz zainstalować aplikację Kleep osobno w każdym sklepie Shopify, w którym chcesz ją włączyć.

Wybierz umiejscowienie CTA

Zapoznaj się z naszymi sugerowanymi pozycjami dla przycisku „Znajdź mój rozmiar” i wybierz tę, która pasuje do Twojego sklepu: Pozycjonowanie CTA w Figmie →.

Instalacja i testowanie

Instalujemy Kleep na zduplikowanym motywie

Nasz zespół duplikuje Twój aktualny motyw Shopify i instaluje Kleep na duplikacie, dzięki czemu Twój działający sklep pozostaje nienaruszony podczas testów.

Podgląd i opinie

Wysyłamy Ci prywatny link do podglądu, aby przetestować integrację od początku do końca i przekazać wszelkie opinie lub potrzebne poprawki.

Uruchomienie

Po Twoim zatwierdzeniu publikujemy Kleep na Twoim aktywnym motywie.

Po integracji

Dostęp do panelu klienta

Konfigurujemy dane uwierzytelniające dla Twojego zespołu, aby uzyskał dostęp do Panelu Kleep, gdzie możesz monitorować KPI wydajności Kleep w czasie rzeczywistym.

Włączenie Fit Feedback

Włączamy Fit Feedback w Twoim panelu, aby Twój zespół mógł udoskonalać rekomendacje rozmiarów Kleep na podstawie rzeczywistych danych dotyczących dopasowania.

1. Funkcjonalności

Kleep jest integrowany z Twoim sklepem poprzez instalację niestandardowej aplikacji, która została wcześniej utworzona. Umożliwia ona:

Dodanie naszego CTA „Znajdź mój rozmiar” na stronach produktów
Dostosowanie interfejsu bezpośrednio w Edytorze motywu

Nasza aplikacja tworzy również zautomatyzowane przepływy danych Produktów, Zamówień i Zwrotów, aby pozostawać na bieżąco. Dane te są pobierane codziennie. Po instalacji aplikacja tworzy WebPixel, który służy do śledzenia wielu wskaźników, z których obliczamy ROI rozwiązania.

2. Funkcja Podobnych produktów

Podobne produkty sugerują alternatywne produkty, gdy rozmiar jest niedostępny. Funkcja ta zwiększa konwersje, oferując klientom odpowiednie alternatywy. Dostępne tryby wyświetlania

Tryb	Opis
Popup (auto)	Automatyczny popup po najechaniu na rozmiar (komputer) / przycisk (urządzenie mobilne)
Przycisk (auto)	Automatyczny przycisk CTA przy koszyku, gdy produkt jest niedostępny
Tylko przyciski niestandardowe	Ręcznie umieszczasz przyciski za pomocą edytora motywu
Popup + niestandardowy	Automatyczny popup + dodatkowe przyciski niestandardowe
Przycisk + niestandardowy	Automatyczny przycisk + dodatkowe przyciski niestandardowe

Konfiguracja Krok 1: Wybierz tryb wyświetlania W ustawieniach osadzenia aplikacji Kleep znajdź opcję „Pokaż rekomendowane produkty” i wybierz żądany tryb z menu rozwijanego.

Wybór trybu podobnych produktów Dodawanie przycisków niestandardowych (dla trybów niestandardowych) Jeśli wybrałeś tryb z „niestandardowym”, możesz dodawać przyciski w określonych miejscach:

Przejdź do szablonu strony Produktu w edytorze motywu
W żądanej sekcji kliknij Dodaj blok
Kliknij kartę Aplikacje i wybierz „Kleep Similar Button”
Umieść blok w żądanym miejscu i zapisz

Dodaj blok Kleep Similar Button

Przyciski podobnych produktów pojawiają się tylko wtedy, gdy wariant jest niedostępny. To normalne, że nie widzisz ich na wszystkich produktach.

Dodawanie wielu przycisków Możesz dodać dowolną liczbę przycisków podobnych produktów na stronie produktu. Aby umożliwić wiele przycisków, widżet musi być ustawiony na jeden z: custom_buttons, popup+custom lub button+custom. Dla motywów OS 2.0:

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

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

3. Funkcja Kleep Search

Kleep Search zastępuje natywne wyszukiwanie Shopify zoptymalizowanym wyszukiwaniem z filtrami rozmiarów i spersonalizowanymi rekomendacjami. Krok 1: Włącz wyszukiwanie niestandardowe W ustawieniach osadzenia aplikacji Kleep włącz opcję „Włącz wyszukiwanie niestandardowe”.

Włącz wyszukiwanie niestandardowe Krok 2: Dostęp do szablonu wyszukiwania W edytorze motywu kliknij menu rozwijane na górze (domyślnie „Strona główna”) i wybierz „Wyszukiwanie” z listy szablonów.

Wybierz szablon wyszukiwania Krok 3: Ukryj natywne wyszukiwanie W sekcji Szablon ukryj lub usuń natywny blok „Wyniki wyszukiwania”, klikając ikonę oka.

Ukryj natywne wyszukiwanie Krok 4: Dodaj blok Kleep Search Kliknij Dodaj sekcję, a następnie na karcie Aplikacje wybierz „Search” (kleep-dev).

Dodaj blok Kleep Search Krok 5: Skonfiguruj opcje Kliknij dodany blok wyszukiwania, aby uzyskać dostęp do ustawień: liczba wyników, wyświetlanie siatka/lista, opóźnienie wyszukiwania itp.

Opcje konfiguracji wyszukiwania

4. Integracja zwrotów (opcjonalna)

Jeśli korzystasz z platformy do zarządzania zwrotami, Kleep może integrować dane o zwrotach w celu poprawy rekomendacji rozmiarów. Obsługiwani dostawcy zwrotów

Global-e
Aftership
Fast Return
Return Go
Inni (skontaktuj się z nami)

Konfiguracja

W Panelu Kleep przejdź do Ustawienia → Zwroty
Wybierz swojego dostawcę zwrotów
Postępuj zgodnie z instrukcjami specyficznymi dla dostawcy, aby połączyć swoje konto

Jeśli Twój dostawca nie jest na liście, skontaktuj się z nami pod adresem support@kleep.ai — możemy skonfigurować niestandardową integrację przez SFTP lub API.

5. Śledzenie zdarzeń i analityka

Kleep automatycznie śledzi interakcje użytkowników na potrzeby analityki. Upewnij się, że śledzenie działa poprawnie przed uruchomieniem. Śledzone zdarzenia

Zdarzenie	Opis
`kleep_button_click`	Użytkownik kliknął przycisk przewodnika rozmiarów
`kleep_drawer_open`	Otwarto szufladę przewodnika rozmiarów
`kleep_size_recommended`	Wyświetlono rekomendację rozmiaru
`kleep_add_to_cart`	Użytkownik dodał produkt do koszyka z Kleep
`kleep_similar_click`	Użytkownik kliknął podobny produkt

Weryfikacja Aby sprawdzić, czy zdarzenia są prawidłowo wyzwalane:

Otwórz Narzędzia deweloperskie przeglądarki (F12)
Przejdź do karty Sieć
Filtruj według „kleep”
Wejdź w interakcję z przyciskiem przewodnika rozmiarów
Powinieneś zobaczyć wywołania API dla każdego zdarzenia

Przed uruchomieniem: Upewnij się, że wyzwalanych jest co najmniej 5 zdarzeń i że ładunki są prawidłowe. Zrealizuj jedną pełną ścieżkę użytkownika (kliknięcie przycisku → rekomendacja rozmiaru → dodanie do koszyka), aby zweryfikować integrację.

6. Dostosowywanie CSS

Możesz dostosować wygląd elementów Kleep (przyciski, popupy, wyszukiwanie), dodając niestandardowy CSS. Gdzie dodać CSS W ustawieniach osadzenia aplikacji Kleep znajdziesz pole „Wprowadź niestandardowe style CSS”. Wklej tam swój niestandardowy CSS.

Pole niestandardowego CSS Przykład dostosowania

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. Wiele środowisk

Jeśli masz wiele środowisk Shopify (dev, staging, produkcja), musisz skonfigurować Kleep dla każdego z nich. Konfiguracja dla każdego środowiska

Sklep produkcyjny — Główny sklep, w pełni skonfigurowany
Sklepy staging/dev — Do testowania przed wdrożeniem na produkcję

Dla każdego środowiska:

Zainstaluj aplikację Kleep
Włącz osadzenie aplikacji (App Embed)
Skontaktuj się ze swoim CSM Kleep, aby połączyć środowisko z Twoim kontem

Zawsze testuj zmiany na staging przed zastosowaniem na produkcji.

Adresy URL specyficzne dla środowisk Podaj swojemu CSM Kleep:

Produkcyjny URL: https://www.yourbrand.com
Staging URL: https://staging.yourbrand.com (jeśli dotyczy)
Dev URL: https://dev.yourbrand.com (jeśli dotyczy)

7.5 Przycisk CTA i podobne produkty — pełny przewodnik instalacji

Pełne techniczne informacje na temat instalacji przycisku CTA Kleep i funkcji podobnych produktów (w tym cały kod Liquid, schemat ustawień i konfiguracja przycisku dodatkowego) znajdziesz w dedykowanym przewodniku poniżej: Przycisk CTA i podobne produkty — pełny przewodnik instalacji

8. Vintage Themes — konfiguracja przewodnika rozmiarów

Starsze motywy (zwane „legacy” lub stworzone przed Online Store 2.0) nie obsługują bloków aplikacji. Instalacja wymaga modyfikacji kodu Liquid.

Ta sekcja wymaga znajomości programowania Shopify (Liquid).

Wymagania wstępne

Dostęp do edytora kodu motywu (Sklep online → Motywy → Edytuj kod)
Osadzenie aplikacji Kleep musi być włączone w panelu administracyjnym Shopify (Sklep online → Motywy → Dostosuj → Osadzenia aplikacji → Kleep)

Krok 1: Włącz osadzenie aplikacji W panelu administracyjnym Shopify przejdź do Sklep online → Motywy → Dostosuj → Osadzenia aplikacji i włącz aplikację Kleep. Krok 2: Wywołaj snippet Wklej następujący kod w miejscu, gdzie Kleep ma się pojawić. Musi to być część bloku Product info w folderze snippets:

Kod

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

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

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>

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

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
    }

Krok 5: Zweryfikuj Sprawdź aktualizacje w obszarze Dostosowywanie motywu Shopify. Skonfiguruj elementy wizualne w ustawieniach bloku informacji o produkcie. Opcjonalnie: Przycisk dodatkowy Jeśli chcesz dodać przycisk dodatkowy, utwórz nowy plik o nazwie kleep-secondary-button.liquid w folderze snippets:

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>

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

Kod

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

9. Vintage Themes — konfiguracja podobnych produktów

Krok 1: Utwórz snippet Utwórz plik snippets/kleep-similar-button.liquid z następującym kodem:

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>

Krok 2: Wyrenderuj snippet Wstaw tę linię w miejscu, gdzie przycisk ma się pojawić:

Kod

{% 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 Ponieważ starsze motywy nie mogą wstawiać bloków OS 2.0, widżet musi używać jednego z:

custom_buttons
popup+custom
button+custom

Dodawanie wielu przycisków Aby utworzyć wiele przycisków, wystarczy umieścić kod snippetu w różnych obszarach szablonu produktu:

Kod

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

Każde wywołanie snippetu tworzy dodatkowy przycisk. Każdy przycisk pojawia się automatycznie tylko wtedy, gdy wybrany wariant jest niedostępny.

10. Tłumaczenia (i18n)

Dodaj następujące tłumaczenia do plików lokalizacyjnych motywu. Angielski (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"
          }
        }
      }
    }

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

Włoski (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"
      }
    }
  }
}

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

Hiszpański (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"
      }
    }
  }
}

Japoński (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": "商品を見る"
      }
    }
  }
}

Koreański (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": "상품 보기"
      }
    }
  }
}

Portugalski (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. Dokumentacja techniczna

Lokalizacja CTA na PDP Lokalizacja jest określona przez selektory DOM wewnątrz KleepSDK.getConstants():

targetProductInfoBlockQueries — 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) Typ urządzenia jest wykrywany za pomocą checkIfMobile(): Ta funkcja sprawdza ciąg navigator.userAgent przeglądarki pod kątem listy urządzeń mobilnych (np. iPhone, Android, iPad).

Komputer: CTA jest wyświetlany jako popupy po najechaniu obok etykiet wariantów
Urządzenie mobilne: Skrypt zastępuje popupy po najechaniu pojedynczym przyciskiem, ponieważ interakcje po najechaniu nie działają na ekranach dotykowych

Konfiguracja referencji produktu Kleep używa referencji produktów do dopasowywania produktów w całym katalogu. Skonfiguruj sposób ich identyfikacji: Pole referencyjne: Gdzie znaleźć referencję produktu marki

Pole SKU Shopify
Metapole (określ które)
Tagi (z prefiksem, np. ref:ABC123)

Ekstrakcja produktu głównego: Jak wyprowadzić główny identyfikator produktu z SKU wariantów

Przykład: Jeśli SKU wariantów to ABC123-S, ABC123-M, ABC123-L, główna referencja produktu to ABC123
Reguła: Weź pierwsze 6 znaków / Podziel przez i weź pierwszą część / Niestandardowe wyrażenie regularne

Skonfiguruj to w Panelu Kleep → Ustawienia → Referencje produktów. Uwagi dotyczące dostosowywania

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

12. Lista kontrolna przed uruchomieniem

Przed uruchomieniem sprawdź następujące punkty: Wyświetlanie przycisku

Przycisk widoczny na co najmniej 3 stronach produktów
Przycisk działa na komputerze I urządzeniu mobilnym
Brak konfliktów CSS (przycisk nie jest ukryty ani nieprawidłowo wyrównany)
Brak problemów z przesunięciem układu (CLS) — przycisk nie powoduje skoku strony
Tylko starsze motywy: Commit udokumentowany w systemie kontroli wersji

Jakość danych

>98% produktów ma przypisany przewodnik rozmiarów
<1% wariantów ma brakujące pomiary
0 osieroconych SKU (produkty bez mapowania kategorii)

Śledzenie

Wszystkie 5 zdarzeń wyzwala się poprawnie
Pełna ścieżka użytkownika jest śledzona (przycisk → rekomendacja → koszyk)
Ładunki zweryfikowane

Wydajność

Błędy JS < 1%
Opóźnienie API P95 < 500ms
Monitoring wdrożony

Ścieżka użytkownika

Przewodnik rozmiarów otwiera się poprawnie
Rekomendacje wyświetlają się prawidłowo
Dodawanie do koszyka działa z poziomu przewodnika rozmiarów
Podobne produkty wyświetlają się (jeśli włączone)
Responsywność na wszystkich urządzeniach

✅ Po zaznaczeniu wszystkich punktów powiadom swojego CSM Kleep o finalną walidację QA przed uruchomieniem.

13. Rozwiązywanie problemów

Przycisk się nie wyświetla

☑️ Sprawdź, czy osadzenie aplikacji Kleep jest włączone (przełącznik ON)
☑️ Upewnij się, że zapisałeś zmiany motywu
☑️ Wyczyść pamięć podręczną przeglądarki i odśwież stronę
☑️ Sprawdź, czy produkt ma skonfigurowane warianty rozmiarów

Podobne produkty się nie wyświetlają

☑️ Sprawdź, czy tryb nie jest ustawiony na „Wyłączony” w ustawieniach
☑️ Przyciski pojawiają się tylko wtedy, gdy wariant jest niedostępny
☑️ Dla trybów „niestandardowych” sprawdź, czy dodałeś blok aplikacji

Wyszukiwanie nie działa

☑️ Sprawdź, czy „Włącz wyszukiwanie niestandardowe” jest aktywne w osadzeniu aplikacji
☑️ Upewnij się, że dodałeś blok Kleep Search do szablonu wyszukiwania
☑️ Sprawdź, czy natywne wyszukiwanie jest ukryte

Nie mogę znaleźć bloków aplikacji Kleep Jeśli nie widzisz bloków Kleep na karcie „Aplikacje” po kliknięciu „Dodaj blok”, Twój motyw prawdopodobnie jest starszym motywem. Zapoznaj się z sekcjami 11–12, aby uzyskać alternatywne instrukcje instalacji. Problemy z mapowaniem danych

☑️ Sprawdź, czy dane produktu zawierają oczekiwane pola (tagi, metapola itp.)
☑️ Zweryfikuj mapowania w Panelu Kleep → Ustawienia → Mapowanie danych
☑️ Uruchom ponownie skanowanie produktów, aby odświeżyć wykryte wartości

Zdarzenia nie wyzwalają się

☑️ Sprawdź konsolę przeglądarki pod kątem błędów JavaScript
☑️ Sprawdź, czy blokery reklam lub rozszerzenia prywatności nie blokują żądań Kleep
☑️ Przetestuj w trybie incognito

Kontakt z pomocą techniczną Jeśli napotkasz problemy niewymienione tutaj, skontaktuj się z zespołem Kleep:

📧 E-mail: support@kleep.ai

Dziękujemy za korzystanie z Kleep! 🎉

Nasz zespół jest do Twojej dyspozycji, aby pomóc Ci w instalacji i optymalizacji przewodnika rozmiarów.--- 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.

​Przegląd procesu integracji

​Onboarding

​Instalacja i testowanie

​Po integracji

​1. Funkcjonalności

​2. Funkcja Podobnych produktów

​3. Funkcja Kleep Search

​4. Integracja zwrotów (opcjonalna)

​5. Śledzenie zdarzeń i analityka

​6. Dostosowywanie CSS

​7. Wiele środowisk

​7.5 Przycisk CTA i podobne produkty — pełny przewodnik instalacji

​8. Vintage Themes — konfiguracja przewodnika rozmiarów

​9. Vintage Themes — konfiguracja podobnych produktów

​10. Tłumaczenia (i18n)

​11. Dokumentacja techniczna

​12. Lista kontrolna przed uruchomieniem

​13. Rozwiązywanie problemów

​Dziękujemy za korzystanie z Kleep! 🎉

​Pliki cookie i prywatność danych

Przegląd procesu integracji

Onboarding

Instalacja i testowanie

Po integracji

1. Funkcjonalności

2. Funkcja Podobnych produktów

3. Funkcja Kleep Search

4. Integracja zwrotów (opcjonalna)

5. Śledzenie zdarzeń i analityka

6. Dostosowywanie CSS

7. Wiele środowisk

7.5 Przycisk CTA i podobne produkty — pełny przewodnik instalacji

8. Vintage Themes — konfiguracja przewodnika rozmiarów

9. Vintage Themes — konfiguracja podobnych produktów

10. Tłumaczenia (i18n)

11. Dokumentacja techniczna

12. Lista kontrolna przed uruchomieniem

13. Rozwiązywanie problemów

Dziękujemy za korzystanie z Kleep! 🎉

Pliki cookie i prywatność danych