Jak powinna wyglądać strona produktu w sklepie internetowym?

Strona produktu to miejsce, w którym zapada decyzja o zakupie. Cała reszta sklepu – kategorie, filtry, wyszukiwarka, blog, kampanie reklamowe – służy wyłącznie temu, żeby doprowadzić klienta właśnie tutaj. Jeśli ta jedna podstrona nie zagra, budżet wydany na reklamę rozpływa się w powietrzu.

Badania Baymard Institute z 2026 roku nie zostawiają złudzeń: 52% desktopowych i aż 62% mobilnych kart produktu w dużych sklepach ma UX oceniony jako „przeciętny lub gorszy”. Mowa o markach z ogromnymi budżetami na e-commerce. Mniejszy sklep ma tu więc realną przewagę do wzięcia – zwykłą starannością.

Najprostsza analogia, jakiej używam w rozmowach z klientami: karta produktu to sprzedawca w sklepie stacjonarnym. Ma pokazać towar, podać cenę, rozwiać wątpliwości i podprowadzić do kasy. Kiepski sprzedawca zagaduje o promocję na coś innego, chowa metkę i nie pozwala obejrzeć produktu z bliska.

Przycisk „Dodaj do koszyka” ma być najgłośniejszym elementem strony

Jeśli klient musi szukać wzrokiem przycisku zakupu, projekt nie spełnił swojego jedynego zadania. Przycisk powinien być duży, mocno kontrastowy względem reszty layoutu i widoczny bez przewijania – zarówno na desktopie, jak i na telefonie. Jeden kolor w całym sklepie warto zarezerwować wyłącznie dla niego.

To ostatnie bywa niedoceniane. Jeśli w tym samym odcieniu utrzymasz kilka innych elementów widocznych na ekranie i zajmują one większy obszar niż przycisk, oko przestaje odróżniać rzeczy ważne od dekoracji. Jedna strona, jedna akcja główna – cała reszta w wersji stonowanej, obramowanej albo czysto tekstowej.

Równie ważne jest to, co dzieje się po kliknięciu. Klient musi dostać jednoznaczne potwierdzenie: produkt trafił do koszyka, koszyk zawiera teraz konkretną liczbę pozycji, a stąd prowadzą dwie drogi — „przejdź do kasy” albo „kontynuuj zakupy”. Cisza po kliknięciu to najprostszy sposób na zgubienie zamówienia.

O tym, jaką różnicę robi jeden przycisk, opowiada najsłynniejsza historia w branży UX. W 2009 roku Jared Spool opisał przypadek dużego sprzedawcy detalicznego, który przed zakupem zmuszał klientów do rejestracji. Zespół zamienił przycisk „Zarejestruj się” na „Kontynuuj” i dopisał informację, że konto nie jest wymagane.

Liczba kupujących wzrosła o 45%, co dało 15 milionów dolarów w pierwszym miesiącu i 300 milionów w skali roku. Historia dotyczy koszyka, nie karty produktu, ale wniosek jest identyczny: bariery bywają niewidoczne dla projektanta i całkowicie oczywiste dla klienta. Czy w Twoim sklepie jest element, który w podobny sposób rzuca kupującym kłody pod nogi?

Cena, która nie wymaga śledztwa

Cena powinna znajdować się tuż przy nazwie produktu, dużą czcionką, bez konieczności przewijania. Brzmi banalnie, a mimo to wciąż trafiam na sklepy, w których kwota ginie gdzieś pod opisem albo pojawia się dopiero po wybraniu wariantu – bez żadnej informacji, od jakiego pułapu zaczynają się widełki.

Przy promocjach obowiązuje w Polsce dyrektywa Omnibus: od 1 stycznia 2023 roku obok obniżonej ceny trzeba pokazać najniższą cenę z 30 dni poprzedzających obniżkę. To nie jest wyłącznie obowiązek dla prawnika. Dobrze zaprojektowany blok cenowy załatwia go przy okazji i jednocześnie uwiarygadnia samą promocję.

Drugi element to koszt dostawy. Według Baymard Institute 48% porzuceń koszyka wynika z niespodziewanych kosztów doliczonych na późnym etapie – wysyłki, podatków, opłat dodatkowych. Klient zadaje sobie jedno pytanie: „ile ostatecznie zapłacę?”. Odpowiedz na nie na karcie produktu, a nie w trzecim kroku zamówienia.

Wystarczy jedna linijka pod ceną: „Wysyłka od 12,99 zł, darmowa od 250 zł”. Kosztuje kilka minut pracy, a oszczędza połowy pytań na infolinii i sporej części zwrotów wynikających z rozczarowania finalną kwotą na podsumowaniu zamówienia.

Zdjęcia, czyli namiastka dotyku

W sklepie stacjonarnym klient bierze produkt do ręki, ogląda go pod światło i sprawdza fakturę. Online zostają mu wyłącznie zdjęcia. Baymard Institute wykazał, że u 56% badanych pierwszą czynnością po wejściu na kartę produktu było przeglądanie galerii – nie czytanie opisu i nie sprawdzanie ceny.

Jedno ujęcie packshotowe to zdecydowanie za mało, bo odpowiada na jedno pytanie, a klient ma ich kilkanaście. Poniżej minimalny zestaw zdjęć, który sprawdza się w niemal każdej branży i który warto potraktować jako punkt odniesienia przy sesji zdjęciowej:

• ujęcie główne na jednolitym tle, z całym produktem w kadrze,
• dwa lub trzy ujęcia z innych stron, w tym tył i profil,
• zbliżenie na detal: fakturę materiału, szew, złącze, wykończenie,
• zdjęcie w skali, czyli produkt obok dłoni, mebla albo innego punktu odniesienia,
• zdjęcie aranżacyjne pokazujące produkt w naturalnym użyciu,
• zawartość zestawu, jeśli w pudełku jest więcej niż jeden element.

Zdjęcie w skali bywa pomijane, a według Baymard nie oferuje go aż 28% dużych sklepów. Efekt jest przewidywalny: klient zamawia doniczkę dwa razy mniejszą, niż sądził, i odsyła ją na koszt sklepu. Zwrot z tego powodu to czysta strata, której dało się uniknąć jedną dodatkową fotografią.

Zdjęcia muszą być lekkie

Wysoka rozdzielczość i zoom to jedno, a waga plików to zupełnie inna sprawa. Zdjęcie główne jest zwykle tym elementem, który Google mierzy jako LCP, czyli czas wyświetlenia największego obiektu na stronie. Próg dobrego wyniku to 2,5 sekundy, a nieskompresowany plik z aparatu potrafi go przekroczyć samodzielnie.

Dlatego formaty WebP lub AVIF traktujemy jako standard, a leniwe ładowanie stosujemy do wszystkiego poniżej pierwszego ekranu – nigdy do zdjęcia głównego. Opóźnianie akurat tego obrazka w imię wyniku w PageSpeed to klasyczne wylanie dziecka z kąpielą: raport ładniejszy, a klient przez chwilę patrzy na puste miejsce.

Opis, który odpowiada, zanim klient zdąży zapytać

Najczęstszy grzech to skopiowanie opisu od producenta. Taki tekst jest identyczny w kilkudziesięciu innych sklepach, nie wnosi nic z perspektywy wyszukiwarki i – co ważniejsze – odpowiada na wyobrażenia działu marketingu producenta, a nie na realne pytania Twoich klientów.

Dobry opis ma dwie warstwy. Pierwsza to krótki akapit sprzedażowy: co to jest, dla kogo i jaki problem rozwiązuje. Druga to konkrety – wymiary, materiał, moc, kompatybilność, sposób pielęgnacji. Pierwszą czyta się w dziesięć sekund, do drugiej wraca się tuż przed kliknięciem przycisku zakupu.

Warto też pisać opisy pod obiekcje. Jeśli obsługa klienta trzy razy w tygodniu odpowiada na to samo pytanie o kompatybilność z konkretnym modelem, masz gotowy akapit do dopisania. Karta produktu, która wygasza wątpliwości, odciąża przy okazji skrzynkę mailową i telefon.

Specyfikacja w tabeli, nie w akapicie

Dane techniczne wciśnięte w ciągły tekst są po prostu nieczytelne. Tabela pozwala przebiec wzrokiem po parametrach i porównać dwa produkty otwarte w sąsiednich zakładkach przeglądarki. Format jest prosty i sprawdza się właściwie wszędzie — od mebli po części zamienne.

Wyrzuć wszystko, co odciąga wzrok

Sidebar z nawigacją po kategoriach na karcie produktu to jak drzwi z napisem „wyjście” ustawione tuż obok kasy. Klient właśnie dotarł do celu, więc nie jest to najlepszy moment na proponowanie mu dwudziestu alternatywnych ścieżek. Karta produktu powinna być najwęższym lejkiem w całym sklepie.

Ta sama zasada dotyczy karuzeli banerów, wyskakującego newslettera po trzech sekundach, animowanych naklejek i czatu, który sam się rozwija i zasłania przycisk zakupu na telefonie. Każdy z tych elementów walczy o uwagę z jedyną akcją, która ma na tej stronie znaczenie.

Wyjątkiem jest nawigacja okruszkowa. Zajmuje jedną linijkę, pozwala wrócić do kategorii i daje wyszukiwarce czytelną strukturę serwisu – to nie rozpraszacz, tylko drogowskaz. Podobnie proste menu główne u góry: ma być dostępne, ale nie musi krzyczeć kolorem ani rozmiarem.

Steve Krug, autor klasycznej książki o użyteczności, sprowadził całą rzecz do trzech słów: „Don’t make me think”, czyli nie każ mi myśleć. Karta produktu, na której trzeba się zastanawiać, gdzie właściwie kliknąć, przegrywa z konkurencyjną, na której zastanawiać się nie trzeba.

Czego zwykle brakuje, a przesądza o zakupie

Dostępność i termin wysyłki. Komunikat „W magazynie – wysyłka dziś, jeśli zamówisz do 14:00″ działa lepiej niż niejeden baner promocyjny, bo odpowiada na realną potrzebę. Jeśli produktu nie ma, powiedz to wprost i zaproponuj powiadomienie o dostępności zamiast pozwalać dodać go do koszyka.

Zwroty i gwarancja. Konsument w Polsce ma ustawowe 14 dni na odstąpienie od umowy zawartej na odległość, ale nie każdy klient o tym pamięta. Krótka informacja przy przycisku zakupu – „14 dni na zwrot, 24 miesiące gwarancji” – zdejmuje z niego ryzyko i realnie podnosi konwersję.

Opinie. Nawet kilkanaście autentycznych recenzji zmienia stronę z monologu w rozmowę. Ważne, żeby były prawdziwe: przepisy wymagają dziś informowania, czy i w jaki sposób sklep weryfikuje, że opinia pochodzi od osoby, która faktycznie kupiła dany produkt.

Warianty. Rozmiar i kolor wybiera się szybciej z widocznych kafelków niż z listy rozwijanej. Warianty niedostępne warto pokazywać jako wyszarzone, a nie ukrywać – klient chce wiedzieć, że rozmiar 42 istnieje, tylko chwilowo go brakuje. I nie pozwól dodać do koszyka przed wyborem wariantu.

Jeff Bezos ujął rzecz tak, że klientów traktujemy jak gości zaproszonych na przyjęcie, a my jesteśmy gospodarzami, których zadaniem jest codziennie poprawiać choć drobny element tego doświadczenia. Każdy z powyższych punktów to w gruncie rzeczy zwykła uprzejmość: powiedzenie gościowi z góry tego, o co i tak zapytałby przy kasie.

Zestawy i cross-selling – niżej, nie zamiast

Sugerowanie produktów uzupełniających ma sens i potrafi wyraźnie podnieść wartość koszyka. Ma jednak jeden warunek: pojawia się dopiero wtedy, gdy klient dostał już komplet informacji o produkcie głównym. Sekcja „pasujące akcesoria” umieszczona nad przyciskiem zakupu to strzał we własną stopę.

Najlepiej działają zestawy skrojone pod konkretny produkt – biurko z organizerem i podkładką, aparat z kartą pamięci i torbą. Jeśli zestaw jest choćby symbolicznie tańszy od sumy elementów, klient ma powód, żeby kliknąć. Sekcja „inni kupili także” spokojnie może zostać na samym dole strony.

Czy nie lepiej pokazać podobnych produktów wyżej, skoro klient mógłby wybrać coś droższego? W praktyce częściej kończy się to tak, że wraca do przeglądania i nie kupuje niczego. Decyzję warto domknąć najpierw, a dopiero potem proponować rozbudowę zamówienia.

Mobile first, bo tam jest większość ruchu

Na telefonie karta produktu rozciąga się na kilka ekranów, a przycisk zakupu potrafi zniknąć gdzieś w połowie drogi. Rozwiązanie jest proste: przyklejony pasek na dole ekranu z nazwą, ceną i przyciskiem „Dodaj do koszyka”, widoczny przez cały czas przewijania strony.

Do tego kilka rzeczy pozornie oczywistych, o których i tak się zapomina: pola dotykowe o rozmiarze co najmniej 44 pikseli, galeria przewijana gestem, tabele, które nie rozjeżdżają layoutu, i żadnych okien modalnych zaraz po wejściu. Baymard ocenia wersje mobilne wyraźnie gorzej od desktopowych i trudno się temu dziwić.

Fundamenty techniczne, których klient nigdy nie zobaczy

Szybkość ładowania jest częścią wyglądu strony, choć nie widać jej na makiecie. Karta, która renderuje się trzy sekundy, traci klientów, zanim jeszcze pokaże pierwsze zdjęcie. Warto pilnować Core Web Vitals, ograniczać liczbę wtyczek i nie ładować skryptów, które akurat tej podstronie nie są do niczego potrzebne.

Druga sprawa to dane strukturalne schema.org typu Product. Dzięki nim Google potrafi pokazać w wynikach wyszukiwania cenę, dostępność i ocenę produktu. Wynik z gwiazdkami i kwotą przyciąga wzrok znacznie mocniej niż sam tytuł, a wdrożenie to kwestia szablonu, nie dodatkowego budżetu.

Na jakiej platformie to wszystko zbudować? Sklepy stawiamy na WooCommerce i uważamy je za jedno z najlepszych dostępnych rozwiązań – między innymi dlatego, że daje pełną kontrolę nad szablonem karty produktu. Według W3Techs w styczniu 2026 roku WooCommerce działało na około 8,7% wszystkich stron w internecie.

Klucz tkwi jednak w sposobie wdrożenia. Domyślna karta produktu w większości gotowych motywów jest kompromisem dla wszystkich branż naraz. My budujemy ją od zera, na własnych szablonach i bez page builderów, bo tylko wtedy da się ustawić kolejność sekcji dokładnie tak, jak wymaga tego konkretny asortyment.

Szkielet karty produktu od góry do dołu

Poniższa kolejność sprawdza się w większości sklepów, ale traktuj ją jako punkt wyjścia, a nie dogmat. Przy produktach technicznych specyfikacja powinna wędrować wyżej, przy odzieży kluczowe miejsce zajmuje tabela rozmiarów, a przy żywności – skład i data przydatności.

Od czego zacząć jutro rano

Nie musisz przebudowywać sklepu w jeden weekend. Wejdź na trzy najlepiej sprzedające się karty produktu, otwórz je na telefonie i sprawdź uczciwie: czy widzisz cenę i przycisk bez przewijania, czy wiesz, ile zapłacisz za dostawę, i czy zdjęcia pozwalają ocenić rzeczywisty rozmiar przedmiotu.

Te trzy pytania zamykają większość problemów, jakie widujemy w sklepach trafiających do nas na audyt. Reszta – opisy pod obiekcje, opinie, zestawy, dane strukturalne – to praca do rozłożenia na etapy. Jeśli wolisz przejść przez to z kimś, kto zbuduje kartę produktu pod Twój asortyment, a nie pod domyślny motyw, odezwij się do nas.