```
Wklej następujący kod w miejscu, gdzie Kleep ma się pojawić. Musi to być część bloku `Product info` w folderze `snippets`.
```jsx theme={null}
{% 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:
```jsx theme={null}
{% 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 %}
```
### Krok 2 — Wyrenderuj snippet wewnątrz szablonu produktu
Wstaw tę linię w miejscu, gdzie przycisk ma się pojawić:
```jsx theme={null}
{% 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
1. Przejdź do **Sklep online → Motywy → Dostosuj**.
2. Otwórz sekcję **Osadzenia aplikacji**.
3. Włącz **aplikację Kleep**.
4. 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:
1. Otwórz **Sklep online → Dostosuj**.
2. Przejdź do szablonu **strony Produktu**.
3. W żądanej sekcji kliknij **Dodaj blok**.
4. Wybierz **Kleep Similar Button**.
5. 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 \
**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`.
```jsx theme={null}
{% 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ść:
**Krok 5: Dodaj angielskie tłumaczenia**
Dodaj angielskie tłumaczenia do plików lokalizacyjnych motywu.
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:
1. Otwórz **Sklep online → Dostosuj**.
2. Przejdź do szablonu **strony Produktu**.
3. W żądanej sekcji kliknij **Dodaj blok**.
4. Wybierz **Kleep Similar Button**.
5. 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 \