Karta produktu · Układ treści

Zakładki na karcie produktu w sklepie Shoper — kiedy pomagają, a kiedy chowają ważne informacje

Problem: karta produktu, na której wszystko jest, ale nic nie widać

Karta produktu w sklepie Shoper zwykle rośnie warstwami. Najpierw opis od producenta, potem tabela parametrów, później skład, instrukcja, pliki do pobrania, informacje GPSR, pytania klientów i opinie. Każdy element był dodany z dobrego powodu, ale razem tworzą stronę, którą trzeba długo przewijać, a klient szuka jednej rzeczy: czy ten produkt rozwiąże jego problem i ile będzie go kosztować do drzwi.

Naturalny odruch to „schować” treść w zakładki. To bywa dobre rozwiązanie, ale nie zawsze. Ten poradnik pokazuje, kiedy zakładki pomagają, kiedy chowają ważne informacje i jak ułożyć kartę w Shoperze tak, żeby klient znalazł odpowiedź bez szukania.

Co mówią badania: zakładki poziome a akordeon

Najczęściej cytowane źródło w tym temacie to Baymard Institute, który od lat testuje karty produktów z realnymi użytkownikami. W artykule Avoid Horizontal Tabs (aktualizacja z lipca 2026) opisuje trzy obserwacje:

• Uczestnicy testów przeoczali treść schowaną w zakładkach poziomych. Szukali opinii, zasad zwrotu albo specyfikacji, przewijając w dół, a zakładka z tą treścią była wyżej, obok aktywnej.
• Mimo to układ z zakładkami poziomymi nadal ma 29% badanych sklepów.
• Lepiej wypadają sekcje rozwinięte jedna pod drugą (szczególnie na komputerze) oraz sekcje zwinięte pionowo, czyli akordeon (szczególnie na długich kartach na telefonie). Zakładki poziome sprawdzały się jako podział wewnątrz jednej sekcji, np. kilka grup parametrów technicznych.

Wniosek nie brzmi „nigdy nie używaj zakładek”. Brzmi: nie chowaj w zakładkach tego, od czego zależy decyzja, a na telefonie stawiaj na akordeon zamiast przewijanego poziomo paska zakładek.

Co ma być widoczne od razu, a co może trafić do zakładek

Najprostszy test: poproś kogoś spoza firmy, żeby na telefonie znalazł na karcie koszt dostawy, skład i opinie. Jeśli którąś z tych rzeczy szuka dłużej niż kilka sekund, to sygnał, że jest schowana za głęboko.

Jak to zrobić w Shoperze: trzy drogi

1. Natywny opis i sekcje szablonu

Szablony Storefront i RWD mają na karcie produktu opis, parametry (atrybuty), pliki do pobrania i opinie. Część szablonów pokazuje je jako zakładki, część jako sekcje. Zanim cokolwiek dołożysz, sprawdź w edytorze szablonu, jak Twoja karta wygląda na telefonie i czy kolejność sekcji odpowiada temu, czego szukają klienci. Parametry trzymaj w atrybutach, a nie w opisie, bo z atrybutów korzysta też filtr na liście produktów (więcej w poradniku warianty i atrybuty produktu).

2. Ręczne zakładki w HTML opisu

Da się zbudować zakładki w kodzie opisu, ale każda poprawka oznacza edycję wielu produktów, a skrypty i style wklejone w opis łatwo psują się przy aktualizacji szablonu. Przy kilkuset produktach to droga do bałaganu.

3. Aplikacja z zakładkami przypisywanymi do produktów i kategorii

Aplikacja trzyma treść zakładek poza opisem i pozwala przypisać ją do wielu produktów naraz, np. jedną zakładkę „Pielęgnacja” do całej kategorii swetrów. Tak działa GrowTabs z rodziny GrowX.

Co jest w niej istotne z punktu widzenia tego poradnika:

• Na telefonie zakładki zamieniają się w akordeon (albo karty), czyli w układ, który według badań sprawdza się na długich kartach mobilnych.
• Opis w Shoperze zostaje bez zmian. Aplikacja nie zapisuje niczego z powrotem do katalogu, a po wyłączeniu karta wraca do pierwotnego układu.
• Zasięg: sklep, kategoria albo produkt, plus import i eksport CSV. Treść przypisana do produktu zastępuje treść z kategorii, nie dubluje jej.
• Sekcje sklepu w zakładkach: opis, atrybuty, pliki i opinie przenosisz do zakładek przełącznikiem.
• FAQ z danymi dla Google (dane strukturalne pytań i odpowiedzi) i statystyki otwarć zakładek z 7, 30 i 90 dni.

Krok po kroku: porządkowanie karty produktu

1. Wypisz pytania klientów. Przejrzyj maile, czat i pytania z ostatnich miesięcy. Pogrupuj je: rozmiar, skład, dostawa, zwrot, kompatybilność, pielęgnacja. To są kandydaci na sekcje.
2. Ustal, co zostaje nad zakładkami. Cena, warianty, dostępność, dostawa i 3–5 korzyści. Nic z tego nie chowaj.
3. Zaprojektuj zestaw sekcji dla kategorii, nie dla pojedynczego produktu. Kosmetyki: Opis, Skład, Stosowanie, FAQ, GPSR. Elektronika: Opis, Specyfikacja, W zestawie, Pliki. Odzież: Opis, Rozmiary, Pielęgnacja.
4. Napisz treść raz na kategorię, a do produktów dopisuj tylko wyjątki. Pielęgnacja swetra z wełny merino jest taka sama dla 40 produktów.
5. Wybierz układ: na komputerze zakładki z wyraźnym zaznaczeniem aktywnej albo sekcje rozwinięte, na telefonie akordeon. Nazwy sekcji krótkie i konkretne (Skład, nie Informacje dodatkowe).
6. FAQ pisz z prawdziwych pytań, nie z marketingu. Jedno pytanie, jedna konkretna odpowiedź.
7. Sprawdź na telefonie trzy zadania: znajdź koszt dostawy, skład i opinie. Potem po 30 dniach zobacz w statystykach, które sekcje są otwierane, a które nikt nie klika — te drugie skróć albo połącz.

Cennik GrowTabs (netto, rozliczany przez Shoper App Store): 44,99 zł miesięcznie albo 449,90 zł rocznie, jeden plan ze wszystkimi funkcjami, 14 dni okresu próbnego. Działa w Storefront i RWD bez wklejania kodu w szablon.

Zakładki a SEO

Treść w zakładce, która jest w kodzie HTML strony od razu (tylko ukryta stylem), Google widzi i może indeksować. Inaczej jest z treścią doczytywaną dopiero po kliknięciu — tę warto sprawdzić narzędziem do inspekcji adresu w Google Search Console. Kilka zasad:

• Nie kopiuj tego samego długiego tekstu do setek produktów w opisie — wspólna treść w zakładce przypisanej do kategorii to lepszy kompromis niż sklejone duplikaty opisów.
• Unikalny opis produktu (pierwsza sekcja) jest dalej najważniejszy. Wskazówki znajdziesz w poradniku opisy produktów pod SEO.
• FAQ z danymi strukturalnymi pomaga wyszukiwarkom i asystentom AI zrozumieć, na jakie pytania odpowiada karta. Pisz je dla ludzi, nie pod frazy.

Checklista: karta produktu z zakładkami

• Cena, warianty, dostępność, dostawa i przycisk koszyka są widoczne bez klikania w zakładki.
• Koszt i czas dostawy oraz informacja o zwrocie są przy cenie, a szczegóły w osobnej sekcji.
• Opinie: średnia przy cenie, pełna sekcja niżej na stronie.
• Zestaw sekcji jest ustalony per kategoria, z krótkimi nazwami (Skład, Pielęgnacja, Wymiary).
• Wspólna treść (pielęgnacja, GPSR) przypisana do kategorii, a nie kopiowana ręcznie do opisów.
• Na telefonie zakładki działają jako akordeon, bez przewijanego poziomo paska.
• FAQ powstało z prawdziwych pytań klientów.
• Test na telefonie: dostawa, skład i opinie znalezione w kilka sekund.
• Po 30 dniach przegląd, które sekcje są otwierane, a które do skrócenia.

Co dalej

Zacznij od jednej kategorii z największą sprzedażą: wypisz pytania klientów, ustal sekcje, przenieś wspólną treść do zakładek i sprawdź kartę na telefonie. Inne elementy, które wpływają na decyzję na karcie, opisujemy w poradnikach zdjęcia produktów, opinie i recenzje oraz tabela rozmiarów. Wszystkie aplikacje do karty produktu znajdziesz w katalogu aplikacji GrowX.

Najczęstsze pytania

Adrian Zblewski

GrowCommerce — Platynowy Partner Shoper

Przy wdrożeniach sklepów Shoper karta produktu to miejsce, które poprawiamy najczęściej. Ten poradnik zbiera zasady, które stosujemy, zanim dołożymy jakąkolwiek aplikację.