06. Jak pokazywać powiązane i proponowane produkty na karcie produktu?

W szablonie Modern 3.0 StoreFront masz aż cztery sposoby na prezentację powiązanych produktów na karcie produktu. Każdy z nich sprawdza się w innej sytuacji.

Po co to? Jeśli masz na sklepie różne (osobne) produkty. Niby te same, ale różnią się pojemnością, kolorem, designem, wielkością zestawu. Płacisz za jeden klik klienta w Google Ads, ale po wejściu na kartę produktu ten od razu zobaczy wszystko co mamy w ofercie dookoła produktu, który go zainteresował.

Przykład. https://naszogrodniczy.pl/

1. "Sprawdź także" - inne warianty produktu

Gdzie znaleźć:
Karta produktu w edytorze wizualnym Shopera → "Produkty Powiązane"

Jak działa:
Ręcznie przypisujesz produkty do siebie w panelu Shoper (w edycji danego produktu).

https://www.shoper.pl/learn/artykul/produkty-powiazane
https://www.shoper.pl/learn/artykul/produkty-powiazane-2

Gdzie się pojawia:
Jako slider pasujących produktów na dole strony karty produktowej oraz jako kafelki wariantów.

Idealne dla:
Innych wariantów tego samego produktu (np. inne kolory, rozmiary) - działa jak moduł "Powiązane w formie wariantów" znany z Allegro.

2. Inteligentne alternatywy produktu

Gdzie znaleźć:
Idziemy do produktu w wizualnym edytorze:

Edytor wizualny → karta produktu → "Dodaj" → wyszukaj "Alternatywy"

(będzie na karcie produktu lub dodaj sam)

lub

Jak działa:
Moduł wyświetla powiązane produkty jako kafelki lub listę. Sam wybierasz:

Ile kafelków w rzędzie (np. 5 na desktop, 3 na mobile)
Czy pokazywać zdjęcia
Czy wyświetlać nazwę produktu, frazę czy atrybuty

Przykład realizacji:
https://devshop-541214.shoparena.pl/pl/p/Pergola-Ogrodowa-LUXE-5.8x4M-Aluminiowa-Z-MANUALNYM-OTWIERANIEM-DACHU-ANTRACYT/1615

https://naszogrodniczy.pl/donica-molta-round-high-tmro60h#variantOptions=37:1061;31:132

UWAGA! Moduł ma kompatybilność wsteczną z "Dodatkowym powiązywaniem produktów" z RWD. Jeśli miałeś to skonfigurowane w RWD, przejdzie automatycznie po aktualizacji.

Dodatkowa opcja:
Możesz ręcznie linkować warianty w opisie produktu:

<div style="display:none;">
  <a class="gc__sizes gc__sizes__current" href="/pl/p/ZESTAW-A/474" title="Zestaw A">Zestaw A</a>
  <a class="gc__sizes" href="/pl/p/ZESTAW-B/475" title="Zestaw B">Zestaw B</a>
</div>

Idealne dla:
Produktów, które chcesz pokazać jako osobne pozycje (dla lepszego SEO i feedu reklamowego), ale połączyć wizualnie na karcie.

Starsza instrukcja w tym temacie → https://podrecznik.growcommerce.pl/polecane-narzedzia/dodatkowe-powi-zywanie-produktow

3. Produkty z tej samej kategorii + popup koszyka

Gdzie znaleźć:
Lewy dolny róg edytora wizualnego → "Integracje" → “Wbudowane” → “GC - Produkty w Oknie potwierdzenia dodania do koszyka”:

Jak działa:

Pokazuje produkty z tej samej kategorii w popupie po dodaniu do koszyka
Automatyczne rekomendacje bez ręcznego powiązywania

4. Inne produkty z kategorii (gdy Twój produkt jest niedostępny)

Przykład:
https://devshop-541214.shoparena.pl/pl/p/Pergola-Ogrodowa-LUXE-3x4-BIALA-Aluminium-z-LEDem/1062

Gdzie znaleźć:
Karta produktu w edytorze wizualnym → moduł "Paczka u Ciebie w ciągu X":

Jak działa:

Gdy produkt jest niedostępny, moduł NIE pokazuje licznika czasu dostawy (żeby nie wprowadzać klienta w błąd)
Zamiast tego wyświetla 3 przykładowe dostępne produkty z tej samej kategorii + link do przeglądania całej kategorii
Moduł inteligentnie dostosowuje wygląd do szerokości sekcji (z podziałką lub bez)

Możesz wyłączyć tę funkcję w ustawieniach modułu, jeśli nie chcesz pokazywać alternatyw.

Idealne dla:
Sytuacji, gdy klient trafia na niedostępny produkt - zamiast martwego końca, widzi podobne produkty, które może kupić od ręki.

Przydatne linki: