Checklista karty produktu: co zniechęca klientów do zakupu

Checklista karty produktu wg badań Baymard i WebAIM: cena, dostawa, zwroty, zdjęcia, opinie, koszyk na telefonie, pop-upy, wyszukiwarka, klawiatura.

Redakcja FixReports11 min czytania

Klienci najczęściej rezygnują na karcie produktu, gdy nie potrafią ustalić pełnego kosztu, nie mogą znaleźć warunków dostawy i zwrotów, nie są w stanie ocenić produktu na podstawie zdjęć i opinii albo nie mogą łatwo dotrzeć do przycisku zakupu i go użyć, zwłaszcza na telefonie. Zakupy blokują też wyskakujące okna zasłaniające stronę, trudne do znalezienia strony z regulaminami, wyszukiwarka, która nie odpowiada na proste pytania, oraz elementy sterujące niedziałające z klawiaturą. Poniższe dane to wyniki badań branżowych Baymard Institute i WebAIM, oparte na dużych próbach stron i kupujących; opisują częste wzorce, a nie prognozy dla konkretnego sklepu.

Najważniejsze informacje

  • W badaniu Baymard z 2026 r. przeprowadzonym wśród 1083 dorosłych mieszkańców USA, którzy w ciągu ostatnich trzech miesięcy robili zakupy online, 40% przyznało, że porzuciło zakup na etapie kasy, bo dodatkowe koszty, takie jak dostawa, podatki i opłaty, były zbyt wysokie (Baymard Institute (otwiera się w nowej karcie)).
  • Benchmark kart produktów Baymard wykazał, że 67% czołowych sklepów internetowych nie podaje szacunkowego łącznego kosztu w pobliżu sekcji zakupu, a 44% nie pokazuje polityki zwrotów ani nie linkuje do niej w głównej treści produktu (Baymard Institute (otwiera się w nowej karcie), aktualizacja 18 marca 2026 r.).
  • W tym samym benchmarku 62% wersji mobilnych miało „przeciętny” lub gorszy UX karty produktu.
  • W lutym 2026 r. WebAIM wykrył błędy WCAG na 95,9% stron głównych z miliona najpopularniejszych witryn (WebAIM (otwiera się w nowej karcie)).
  • W przeglądzie Baymard z 2021 r. obejmującym 33 sklepy internetowe o największych przychodach 45% miało funkcje, których nie dało się obsłużyć z klawiatury (Baymard Institute (otwiera się w nowej karcie)).

Dlaczego klienci porzucają zakup?

Najczęstsza odpowiedź brzmi: klienci tylko przeglądali ofertę. Dalej są dodatkowe koszty, powolna dostawa, brak zaufania do obsługi danych karty i wymóg zakładania konta.

Strona Baymard o porzucaniu koszyków podaje średni udokumentowany wskaźnik porzuceń na poziomie 70,22%, obliczony na podstawie 50 badań (ostatnia aktualizacja strony 22 września 2025 r.). Wykres przyczyn, opisany jako dane z 2026 r., pochodzi z ankiety wśród 1083 dorosłych mieszkańców USA, którzy w poprzednich trzech miesiącach robili zakupy online. Respondenci mogli wybrać więcej niż jedną przyczynę (Baymard Institute (otwiera się w nowej karcie), stan na październik 2026 r.):

Przyczyna porzucenia zakupu online na etapie kasyOdsetek respondentów
Tylko przeglądanie oferty / brak gotowości do zakupu42%
Zbyt wysokie dodatkowe koszty (dostawa, podatki, opłaty)40%
Zbyt długi czas dostawy20%
Brak zaufania do strony w kwestii danych karty kredytowej19%
Strona wymagała założenia konta18%
Zbyt długi lub skomplikowany proces zamawiania17%
Na stronie pojawiały się błędy lub przestała działać17%
Polityka zwrotów była niesatysfakcjonująca13%
Brak możliwości zobaczenia lub obliczenia łącznego kosztu zamówienia z góry12%
Karta kredytowa została odrzucona10%
Było za mało metod płatności9%

To wyniki ankiety przeprowadzonej w USA i dotyczą etapu kasy, a nie pomiarów Twojego sklepu. Kilka z tych problemów zaczyna się wcześniej, na karcie produktu, gdzie klient po raz pierwszy widzi cenę, warunki dostawy i zasady zwrotów. Tylko Twoja własna analityka pokaże, które z nich mają znaczenie w Twoim przypadku.

Czy pełna cena jest jasna na karcie produktu?

Aktualna cena, ewentualna cena pierwotna, informacja, co jest wliczone, a co nie, oraz szacunkowy koszt dostawy powinny znajdować się obok przycisku zakupu.

Benchmark kart produktów Baymard z 2026 r. wykazał, że 67% sklepów nie podaje szacunkowego „łącznego kosztu zamówienia” w pobliżu sekcji zakupu, a 81% nie pokazuje ceny jednostkowej produktów sprzedawanych w różnych ilościach lub rozmiarach (Baymard Institute (otwiera się w nowej karcie)). Sprawdź, czy strona pokazuje:

  • Aktualną cenę, a w przypadku produktów w promocji także cenę pierwotną.
  • Cenę jednostkową produktów sprzedawanych w kilku rozmiarach.
  • Czy cena obejmuje podatki lub cła.
  • Koszt dostawy albo wartość zamówienia, od której dostawa jest darmowa.

Shopify: w motywie Dawn blok ceny dodaje tekst „Taxes included.” (podatki wliczone) i link „Shipping calculated at checkout.” (koszt wysyłki obliczany przy kasie), jeśli te ustawienia i polityka wysyłki są skonfigurowane (kod źródłowy Dawn (otwiera się w nowej karcie)). To informacja prawdziwa, ale nie jest szacunkiem kosztów, więc dodaj w bloku tekstowym rzeczywiste stawki lub próg darmowej dostawy.

WooCommerce: opcje „Enable the shipping calculator on the cart page” (kalkulator wysyłki na stronie koszyka) i „Hide shipping costs until an address is entered” (ukrywanie kosztów wysyłki do czasu podania adresu) w WooCommerce > Settings > Shipping dotyczą koszyka i kasy, a nie karty produktu (kod źródłowy WooCommerce (otwiera się w nowej karcie)). Stawki umieść w szablonie produktu lub w krótkim opisie.

Czy klienci znajdą informacje o dostawie i zwrotach przed dodaniem do koszyka?

Umieść obok przycisku zakupu krótkie podsumowanie czasu dostawy, kosztu wysyłki i terminu na zwrot, z linkiem do pełnych zasad.

W ankiecie Baymard Consideration & Purchase Behavior obejmującej 1032 respondentów 60% stwierdziło, że szuka informacji o polityce zwrotów na karcie produktu, a mimo to 44% badanych sklepów nie wyświetla ich ani nie linkuje do nich w głównej treści produktu (Baymard Institute (otwiera się w nowej karcie)). W opisanej wyżej ankiecie z 2026 r. o porzucaniu zakupów 20% wskazało powolną dostawę, a 13% niesatysfakcjonującą politykę zwrotów.

<details class="product-policy">
  <summary>Shipping and returns</summary>
  <p>Ships in 1 to 2 business days. Free shipping on orders over $75.</p>
  <p>Free returns within 30 days. <a href="{{ shop.refund_policy.url }}">Read the return policy</a></p>
</details>

Shopify: zasady sklepu wpiszesz w Settings > Policies (Shopify Help Center (otwiera się w nowej karcie)). W Dawn blok Collapsible row na karcie produktu może wyświetlać tekst lub zawartość wybranej strony (kod źródłowy Dawn (otwiera się w nowej karcie)), więc jedna strona o dostawie i zwrotach może pojawiać się przy każdym produkcie.

WooCommerce: WooCommerce tworzy stronę „Refund and Returns Policy” (polityka zwrotów) jako wersję roboczą (kod źródłowy WooCommerce (otwiera się w nowej karcie)). Pozostaje nieopublikowana, dopóki jej nie zredagujesz i nie opublikujesz.

Czy zdjęcia produktu odpowiadają na pytania klientów?

Zdjęcia powinny pokazywać produkt z kilku stron, w skali i w użyciu, ponieważ wielu klientów ocenia rozmiar i dopasowanie na podstawie zdjęć, a nie specyfikacji.

Testy Baymard wykazały, że 42% użytkowników próbuje ustalić rozmiar produktu na podstawie zdjęć, a 37% badanych sklepów nie zamieszcza zdjęcia „w skali”, które pokazuje produkt obok człowieka lub znanego przedmiotu. Z kolei 23% nie ma zdjęć z modelem lub modelką, co najbardziej liczy się w przypadku odzieży, dodatków i kosmetyków (Baymard Institute (otwiera się w nowej karcie)).

Sprawdź też, czy po wybraniu koloru galeria przełącza się na właściwe zdjęcie, czy powiększanie działa na telefonach i czy każde zdjęcie ma tekst alternatywny opisujący, co pokazuje dane ujęcie, np. „Koszula lniana, widok z tyłu”.

Czy opinie łatwo znaleźć i czy budzą zaufanie?

Pokaż średnią ocenę i liczbę opinii w pobliżu nazwy produktu, podlinkuj je do pełnej listy opinii i odpowiadaj na negatywne recenzje.

Baymard ustalił, że 89% badanych sklepów nie odpowiada na negatywne opinie, a 63% nie pozwala przechodzić od zdjęć jednego recenzenta do zdjęć kolejnego w obrębie wszystkich opinii (Baymard Institute (otwiera się w nowej karcie)). Widżety opinii, które wczytują się z opóźnieniem, mogą też spychać stronę w dół, więc zarezerwuj dla nich miejsce.

Shopify: blok Product rating w Dawn wyświetla gwiazdki z aplikacji do opinii, a motyw zaznacza, że taka aplikacja jest wymagana (kod źródłowy Dawn (otwiera się w nowej karcie)).

WooCommerce: w WooCommerce > Settings > Products opcje opinii obejmują „Enable product reviews” (włączenie opinii o produktach), „Show 'verified owner' label on customer reviews” (etykieta „zweryfikowany właściciel” przy opiniach klientów), „Reviews can only be left by 'verified owners'” (opinie mogą dodawać tylko zweryfikowani właściciele) i „Enable star rating on reviews” (oceny w gwiazdkach w opiniach) (kod źródłowy WooCommerce (otwiera się w nowej karcie)).

Czy przycisk dodawania do koszyka łatwo znaleźć i nacisnąć na telefonie?

Na telefonie klient powinien widzieć cenę, wybrać wariant i dotknąć przycisku dodania do koszyka bez szukania, a elementy sterujące powinny być na tyle duże, by łatwo w nie trafić.

W benchmarku Baymard z 2026 r. 52% wersji desktopowych i 62% wersji mobilnych miało „przeciętny” lub gorszy UX karty produktu, a 57% sklepów nie używało przycisków do wyboru rozmiaru, ukrywając rozmiary w listach rozwijanych (Baymard Institute (otwiera się w nowej karcie)).

Otwórz kartę produktu na prawdziwym telefonie i sprawdź:

  • Pierwszy ekran. W układzie mobilnym, w którym elementy są ułożone jeden pod drugim, galeria często jest na początku, więc wysokie zdjęcie może zepchnąć nazwę, cenę i przycisk poniżej pierwszego ekranu.
  • Przyklejone paski zakupu. Jeśli z takiego korzystasz, nie może on zasłaniać elementów z fokusem. W podsumowaniu W3C dotyczącym kryterium WCAG 2.2 2.4.11 (poziom AA) przykładem jest przyklejona stopka, która zakrywa elementy z fokusem (W3C (otwiera się w nowej karcie)).
  • Cele dotyku. WCAG 2.5.8 (poziom AA) wyznacza minimum 24 na 24 piksele CSS, z wyjątkami (W3C (otwiera się w nowej karcie)); wytyczne Shopify dla motywów zalecają na urządzeniach mobilnych co najmniej 48 na 48 pikseli (Shopify (otwiera się w nowej karcie)).
  • Przewijanie w poziomie. WCAG 1.4.10 Reflow wymaga, aby treść działała przy szerokości 320 pikseli CSS bez przewijania w dwóch kierunkach (W3C (otwiera się w nowej karcie)). Częstą przyczyną problemów są szerokie tabele rozmiarów i tabele porównawcze.

Czy wyskakujące okna przeszkadzają w zakupie?

Pop-upy, które zasłaniają kartę produktu zaraz po wejściu, ukrywają informacje, po które klient przyszedł, więc wybieraj małe banery i ograniczaj zachęty do zapisu.

Wytyczne Google Search Central opisują inwazyjne reklamy pełnoekranowe i okna dialogowe jako elementy zasłaniające treść i zalecają zamiast nakładek na całą stronę małe banery (Google Search Central (otwiera się w nowej karcie)). Shopify zaznacza, że wyskakujące okna mogą też powodować przesunięcia układu (Shopify Help Center (otwiera się w nowej karcie)). Każde okno dialogowe, które zostawiasz, musi dać się zamknąć klawiaturą; WCAG 2.1.2 No Keyboard Trap (poziom A) wymaga, by fokus mógł opuścić komponent przy użyciu samej klawiatury (W3C (otwiera się w nowej karcie)).

Czy klienci znajdą strony budujące zaufanie i regulaminy?

Umieść w stopce każdej strony linki do zasad zwrotów, dostawy, polityki prywatności, regulaminu i strony kontaktowej.

W ankiecie Baymard z 2026 r. 19% respondentów stwierdziło, że porzuciło zakup, bo nie ufało stronie na tyle, by podać dane karty. Jasne zasady i dane kontaktowe to podstawowe sygnały, że sklep jest wiarygodny.

Shopify: po dodaniu zasad w Settings > Policies Shopify automatycznie linkuje je w stopce kasy; aby pokazać je w sklepie, dodaj je do menu w Content > Menus (Shopify Help Center (otwiera się w nowej karcie)) albo włącz w Dawn ustawienie stopki Policy links.

WooCommerce: opublikuj roboczą stronę z polityką zwrotów, a potem dodaj do stopki strony z zasadami i stronę kontaktową.

Czy wyszukiwarka w sklepie znajduje produkty i odpowiedzi?

Wyszukiwarka powinna zwracać właściwe produkty dla nazw, literówek i synonimów, a także odpowiadać na zapytania typu „zwroty” czy „dostawa”.

Benchmark wyszukiwania Baymard z 2026 r., obejmujący ponad 170 sklepów i aplikacji, ocenił jako „przeciętne” lub gorsze 46% wyszukiwarek w wersji desktopowej, 58% w wersji mobilnej i 64% w aplikacjach, a problemy z wyszukiwaniem treści innych niż produkty, np. gdy wyszukanie polityki zwrotów zwraca produkty, wykrył w 66% sklepów (Baymard Institute (otwiera się w nowej karcie), aktualizacja 29 kwietnia 2026 r.).

Przetestuj swój sklep, wpisując nazwę bestsellera, tę samą nazwę z literówką, nazwę kategorii i słowo „zwroty”. W Shopify wyszukiwarka sklepu zwraca produkty, wpisy na blogu i strony, a podpowiedzi wyszukiwania i tolerancja literówek są domyślnie włączone; aplikacja Search & Discovery dodaje filtry i promowanie wybranych produktów (Shopify Help Center (otwiera się w nowej karcie)). Zwykła strona podsumowująca warunki dostawy i zwrotów może więc pojawiać się w wynikach takich wyszukiwań.

Czy da się kupić coś, używając wyłącznie klawiatury?

Każdy krok od wyboru wariantu do przejścia do kasy powinien działać z samą klawiaturą, z widocznym wskaźnikiem fokusu.

WCAG 2.2 wymaga, by cała funkcjonalność działała z klawiatury (2.1.1, poziom A), by nie było pułapek klawiaturowych (2.1.2, poziom A), by wskaźnik fokusu był widoczny (2.4.7, poziom AA) i by elementy z fokusem nie były całkowicie zasłonięte przez inne treści (2.4.11, poziom AA) (W3C (otwiera się w nowej karcie)). Tych podstaw często brakuje. Przegląd Baymard z 2021 r. obejmujący 33 sklepy o największych przychodach wykazał, że 45% z nich miało funkcje, których nie dało się obsłużyć z klawiatury, a 48% nie utrzymywało przez cały czas widocznego wskaźnika fokusu (Baymard Institute (otwiera się w nowej karcie)). Skan WebAIM z lutego 2026 r. wykazał średnio 56,1 wykrytego błędu na stronę główną, a w przypadku witryn z kategorii zakupów 71,0 (WebAIM (otwiera się w nowej karcie)).

Test, który zajmie pięć minut:

  1. Otwórz kartę produktu i naciskaj Tab, nie dotykając myszy.
  2. Sprawdź, czy zawsze widać, gdzie jest fokus.
  3. Wybierz rozmiar i kolor, a następnie zmień ilość.
  4. Naciśnij przycisk dodania do koszyka i sprawdź, czy fokus przechodzi do wysuwanego koszyka i czy da się go zamknąć klawiaturą.
  5. Dotrzyj do przycisku przejścia do kasy.
/* A visible focus style for keyboard users */
:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

Bezpłatny skan sprawdza wiele z tych punktów w mniej więcej minutę. Raport konwersji zamienia testy stron, takie jak widoczność ceny, dodawanie do koszyka na telefonie, informacje o dostawie i zwrotach, wyskakujące okna, linki do regulaminów w stopce, wyszukiwarka, ścieżka zakupu z klawiatury i przewijanie w poziomie, w rekomendacje uporządkowane według priorytetu. Opiera się na testach stron, a nie na Twoich danych sprzedażowych, i nie gwarantuje wzrostu sprzedaży.

Najczęściej zadawane pytania

Jaki jest najczęstszy powód porzucania zakupów przez klientów?

W ankiecie Baymard z 2026 r. przeprowadzonej wśród 1083 dorosłych mieszkańców USA najczęstszą odpowiedzią było „tylko przeglądanie oferty” (42%). Wśród pozostałych przyczyn na pierwszym miejscu znalazły się dodatkowe koszty, takie jak dostawa, podatki i opłaty (40%), przed powolną dostawą (20%).

Czy usunięcie tych problemów zwiększy mój współczynnik konwersji?

Nikt nie może tego obiecać. Badania opisują bariery, które często występują w dużych próbach stron i kupujących; to, czy ich usunięcie zmieni Twoje wyniki, zależy od produktów, cen i ruchu, więc mierz wyniki przed każdą zmianą i po niej.

Gdzie na karcie produktu umieścić informacje o dostawie i zwrotach?

W pobliżu ceny i przycisku zakupu, w formie krótkiego podsumowania z linkiem do pełnych zasad. W badaniach Baymard 60% respondentów stwierdziło, że szuka informacji o polityce zwrotów na karcie produktu.

Czy przycisk dodawania do koszyka musi być widoczny na telefonie bez przewijania?

Żaden przepis tego nie wymaga, ale klient powinien szybko zobaczyć cenę i dotrzeć do przycisku. Jednym z rozwiązań jest przyklejony pasek zakupu, o ile nie zasłania elementów z fokusem ani innych treści.

Czy dostępność ma związek z konwersją?

Tak, w najprostszym sensie: klient, który nie może obsłużyć wyboru wariantu ani przycisku dodania do koszyka za pomocą klawiatury lub czytnika ekranu, nie może kupić. WCAG 2.2 na poziomie AA obejmuje te podstawy.

Źródła

Wszystkie poradniki