Produktová stránka e-shopu: co zákazníky odradí od nákupu

Kontrolní seznam produktové stránky podle výzkumů Baymard a WebAIM: cena, doprava a vrácení, fotky, recenze, košík na mobilu, pop-upy, hledání, klávesnice.

Redakce FixReports11 min čtení

Zákazníci na produktové stránce nejčastěji skončí, když nedokážou zjistit celkovou cenu, nenajdou podmínky dopravy a vrácení zboží, nedokážou produkt posoudit podle fotografií a recenzí nebo se nedostanou snadno k tlačítku pro nákup a nedokážou ho použít, zejména na telefonu. Nákupy blokují také vyskakovací okna, která zakrývají stránku, těžko dohledatelné stránky s obchodními podmínkami, vyhledávání na webu, které nedokáže odpovědět na jednoduché dotazy, a ovládací prvky, které nefungují s klávesnicí. Níže uvedená čísla pocházejí z oborových výzkumů Baymard Institute a WebAIM založených na velkých vzorcích webů a nakupujících; popisují běžné vzorce, nikoli předpovědi pro konkrétní e-shop.

Hlavní body

  • V průzkumu Baymard z roku 2026 mezi 1 083 dospělými Američany, kteří v posledních třech měsících nakupovali online, uvedlo 40 %, že opustili nákup v pokladně, protože dodatečné náklady, jako doprava, daň a poplatky, byly příliš vysoké (Baymard Institute (otevře se v nové kartě)).
  • Benchmark produktových stránek od Baymard zjistil, že 67 % předních e-commerce webů neuvádí v blízkosti nákupní sekce odhad celkové ceny a 44 % v hlavním obsahu produktu nezobrazuje podmínky vrácení zboží ani na ně neodkazuje (Baymard Institute (otevře se v nové kartě), aktualizováno 18. března 2026).
  • Ve stejném benchmarku mělo 62 % mobilních webů UX produktové stránky „průměrné“ nebo horší.
  • WebAIM v únoru 2026 zjistil chyby WCAG na 95,9 % z milionu nejnavštěvovanějších domovských stránek (WebAIM (otevře se v nové kartě)).
  • V přehledu 33 e-commerce webů s nejvyššími tržbami, který Baymard provedl v roce 2021, mělo 45 % funkce, které nešlo ovládat klávesnicí (Baymard Institute (otevře se v nové kartě)).

Proč zákazníci opouštějí nákup?

Nejčastější odpovědí je, že se zákazníci jen dívali; pak následují dodatečné náklady, pomalé doručení, nízká důvěra ve zpracování údajů o kartě a vynucené zakládání účtu.

Stránka Baymard o opuštěných košících uvádí průměrnou zdokumentovanou míru opuštění 70,22 %, vypočtenou z 50 studií (stránka naposledy aktualizována 22. září 2025). Její graf důvodů, označený jako data za rok 2026, vychází z průzkumu mezi 1 083 dospělými Američany, kteří v předchozích třech měsících nakupovali online. Respondenti mohli zvolit více důvodů (Baymard Institute (otevře se v nové kartě), stav k říjnu 2026):

Důvod opuštění online nákupu v pokladněPodíl respondentů
Jen prohlížení, zatím bez úmyslu koupit42 %
Příliš vysoké dodatečné náklady (doprava, daň, poplatky)40 %
Příliš pomalé doručení20 %
Nedůvěra k webu ohledně údajů o platební kartě19 %
Web vyžadoval vytvoření účtu18 %
Příliš dlouhý nebo složitý proces objednávky17 %
Chyby nebo pád webu17 %
Nevyhovující podmínky vrácení zboží13 %
Celkovou cenu objednávky nešlo předem zobrazit ani spočítat12 %
Platební karta byla zamítnuta10 %
Nedostatek platebních metod9 %

Jde o výsledky amerického průzkumu o pokladně, ne o měření vašeho e-shopu. Několik z těchto důvodů ale vzniká dřív, na produktové stránce, kde zákazníci poprvé vidí cenu, podmínky doručení a podmínky vrácení. Které z nich jsou důležité právě pro vás, ukáže jen vaše vlastní analytika.

Je na produktové stránce jasná celková cena?

Aktuální cena, případná původní cena, co je a co není v ceně zahrnuto a odhad ceny dopravy by měly být hned vedle tlačítka pro nákup.

Benchmark produktových stránek Baymard z roku 2026 zjistil, že 67 % webů v blízkosti nákupní sekce neuvádí odhad „celkové ceny objednávky“ a 81 % neukazuje jednotkovou cenu u produktů prodávaných v různých množstvích nebo velikostech (Baymard Institute (otevře se v nové kartě)). Ověřte, že stránka ukazuje:

  • Aktuální cenu a u zlevněného zboží i původní cenu.
  • Jednotkovou cenu u produktů prodávaných v několika velikostech.
  • Zda je v ceně zahrnuta daň nebo clo.
  • Cenu dopravy, nebo hodnotu objednávky, od které je doprava zdarma.

Shopify: v šabloně Dawn přidává blok ceny text „Taxes included.“ a odkaz „Shipping calculated at checkout.“, pokud jsou zapnutá příslušná nastavení a existují zásady dopravy (zdrojový kód Dawn (otevře se v nové kartě)). To je přesné, ale nejde o odhad, proto do textového bloku doplňte své skutečné ceny dopravy nebo hranici pro dopravu zdarma.

WooCommerce: volby „Enable the shipping calculator on the cart page“ (kalkulačka dopravy v košíku) a „Hide shipping costs until an address is entered“ (skrytí ceny dopravy do zadání adresy) v části WooCommerce > Nastavení > Doprava (WooCommerce > Settings > Shipping) ovlivňují košík a pokladnu, ne produktovou stránku (zdrojový kód WooCommerce (otevře se v nové kartě)). Ceny dopravy uveďte v šabloně produktu nebo v krátkém popisu.

Najdou zákazníci informace o dopravě a vrácení ještě před přidáním do košíku?

Umístěte poblíž tlačítka pro nákup krátké shrnutí doby doručení, ceny dopravy a lhůty pro vrácení s odkazem na úplné podmínky.

V průzkumu Baymard Consideration & Purchase Behavior mezi 1 032 respondenty uvedlo 60 %, že informace o vrácení zboží hledají na produktové stránce, přesto je 44 % testovaných webů v hlavním obsahu produktu nezobrazuje ani na ně neodkazuje (Baymard Institute (otevře se v nové kartě)). Ve výše uvedeném průzkumu opuštění z roku 2026 zmínilo 20 % respondentů pomalé doručení a 13 % nevyhovující podmínky vrácení.

<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: své zásady napište v části Nastavení > Zásady (Settings > Policies) (Shopify Help Center (otevře se v nové kartě)). V Dawn může blok Collapsible row (sbalitelný řádek) na produktové stránce zobrazit text nebo obsah stránky (zdrojový kód Dawn (otevře se v nové kartě)), takže jedna stránka o dopravě a vrácení se může objevit u každého produktu.

WooCommerce: WooCommerce vytváří stránku „Refund and Returns Policy“ jako koncept (zdrojový kód WooCommerce (otevře se v nové kartě)). Zůstane nezveřejněná, dokud ji neupravíte a nepublikujete.

Odpovídají fotografie produktu na otázky zákazníků?

Fotografie by měly ukazovat produkt z několika úhlů, v měřítku a při použití, protože mnoho zákazníků posuzuje velikost a padnutí podle fotek, a ne podle specifikací.

Testování Baymard zjistilo, že 42 % uživatelů se snaží velikost produktu odhadnout z jeho fotografií, přitom 37 % testovaných webů nenabízí fotografii „v měřítku“, která ukazuje produkt vedle člověka nebo známého předmětu. A 23 % nenabízí fotografii s modelem nebo modelkou, což je nejdůležitější u oblečení, doplňků a kosmetiky (Baymard Institute (otevře se v nové kartě)).

Ověřte také, že galerie po výběru barvy přepne na správnou fotografii, že na telefonech funguje přiblížení a že každá fotografie má alternativní text popisující, co daný pohled ukazuje, například „Lněná košile, pohled zezadu“.

Dají se recenze snadno najít a dá se jim věřit?

Zobrazte průměrné hodnocení a počet recenzí u názvu produktu, propojte je s úplnými recenzemi a odpovídejte na negativní recenze.

Baymard zjistil, že 89 % testovaných webů na negativní recenze neodpovídá a 63 % neumožňuje přecházet mezi fotografiemi od jednotlivých recenzentů napříč recenzemi (Baymard Institute (otevře se v nové kartě)). Widgety recenzí, které se načítají pozdě, mohou také posunout stránku dolů, proto pro ně rezervujte místo.

Shopify: blok Product rating (hodnocení produktu) v Dawn zobrazuje hvězdičky z aplikace pro recenze a šablona upozorňuje, že je k tomu aplikace potřeba (zdrojový kód Dawn (otevře se v nové kartě)).

WooCommerce: v části WooCommerce > Nastavení > Produkty (WooCommerce > Settings > Products) najdete mezi volbami recenzí „Enable product reviews“, „Show 'verified owner' label on customer reviews“, „Reviews can only be left by 'verified owners'“ a „Enable star rating on reviews“ (zdrojový kód WooCommerce (otevře se v nové kartě)).

Dá se tlačítko pro přidání do košíku na telefonu snadno najít a stisknout?

Na telefonu by zákazníci měli vidět cenu, vybrat variantu a klepnout na přidání do košíku bez hledání, s ovládacími prvky dost velkými na to, aby se do nich dalo trefit.

V benchmarku Baymard z roku 2026 mělo 52 % webů pro počítače a 62 % mobilních webů UX produktové stránky „průměrné“ nebo horší a 57 % webů nepoužívalo pro výběr velikosti tlačítka, takže velikosti zůstávaly skryté v rozbalovacích seznamech (Baymard Institute (otevře se v nové kartě)).

Otevřete produktovou stránku na skutečném telefonu a zkontrolujte:

  • První obrazovka. V rozvržení pro telefon, kde jsou prvky pod sebou, bývá galerie často první, takže vysoký obrázek může odsunout název, cenu a tlačítko pod první obrazovku.
  • Plovoucí nákupní lišty. Pokud ji používáte, nesmí zakrývat prvky s fokusem. Shrnutí kritéria WCAG 2.2 2.4.11 (úroveň AA) od W3C používá jako příklad plovoucí patičku, která skrývá prvky s fokusem (W3C (otevře se v nové kartě)).
  • Cíle pro klepnutí. WCAG 2.5.8 (úroveň AA) stanoví minimum 24 × 24 CSS pixelů s výjimkami (W3C (otevře se v nové kartě)); doporučení Shopify pro šablony radí na mobilu alespoň 48 × 48 pixelů (Shopify (otevře se v nové kartě)).
  • Vodorovné posouvání. WCAG 1.4.10 Reflow vyžaduje, aby obsah fungoval při šířce 320 CSS pixelů bez posouvání ve dvou směrech (W3C (otevře se v nové kartě)). Častou příčinou jsou široké tabulky velikostí a srovnávací tabulky.

Překážejí vyskakovací okna v nákupu?

Vyskakovací okna, která po příchodu zakryjí produktovou stránku, skrývají informace, kvůli kterým zákazníci přišli, proto dávejte přednost malým bannerům a omezte výzvy k odběru novinek.

Dokumentace Google Search Central popisuje rušivé mezistránky a dialogy jako prvky, které brání ve výhledu na obsah, a místo celostránkových překryvů doporučuje malé bannery (Google Search Central (otevře se v nové kartě)). Shopify upozorňuje, že obsah vyskakovacích oken může také způsobovat posuny rozvržení (Shopify Help Center (otevře se v nové kartě)). Každý dialog, který ponecháte, musí jít zavřít klávesnicí; WCAG 2.1.2 No Keyboard Trap (úroveň A) vyžaduje, aby fokus mohl komponentu opustit jen pomocí klávesnice (W3C (otevře se v nové kartě)).

Najdou zákazníci vaše stránky s podmínkami a kontakty?

Odkazy na stránky o vrácení peněz, dopravě, ochraně soukromí, obchodních podmínkách a kontaktech umístěte do patičky každé stránky.

V průzkumu Baymard z roku 2026 uvedlo 19 % respondentů, že nákup opustili, protože webu nesvěřili údaje o kartě. Jasné podmínky a kontaktní údaje jsou základními signály, že je e-shop důvěryhodný.

Shopify: jakmile přidáte zásady v části Nastavení > Zásady (Settings > Policies), Shopify je automaticky propojí v patičce pokladny; aby se zobrazovaly i v e-shopu, přidejte je do nabídky v části Obsah > Nabídky (Content > Menus) (Shopify Help Center (otevře se v nové kartě)), nebo v Dawn zapněte v nastavení patičky volbu Policy links (odkazy na zásady).

WooCommerce: zveřejněte koncept stránky o vrácení peněz a pak přidejte stránky s podmínkami a kontakty do patičky.

Najde vyhledávání na webu produkty i odpovědi?

Vyhledávání by mělo vracet správné produkty pro názvy, překlepy i synonyma a mělo by odpovídat i na dotazy jako „vrácení“ nebo „doprava“.

Benchmark vyhledávání Baymard z roku 2026 na více než 170 webech a aplikacích hodnotil 46 % prostředí pro počítače, 58 % mobilních prostředí a 64 % aplikací jako „průměrné“ nebo horší a na 66 % webů zjistil problémy s neproduktovými dotazy, například když hledání podmínek vrácení vrátí produkty (Baymard Institute (otevře se v nové kartě), aktualizováno 29. dubna 2026).

Otestujte svůj e-shop názvem nejprodávanějšího produktu, týmž názvem s překlepem, slovem označujícím kategorii a slovem „vrácení“. Na Shopify vrací vyhledávání v e-shopu produkty, články blogu a stránky, přičemž prediktivní vyhledávání a tolerance překlepů jsou ve výchozím nastavení zapnuté, a aplikace Search & Discovery přidává filtry a zvýhodnění produktů (Shopify Help Center (otevře se v nové kartě)). Běžná stránka, která shrnuje dopravu a vrácení, se proto může v takových výsledcích objevit.

Dá se nakoupit jen pomocí klávesnice?

Každý krok od výběru varianty po přechod k pokladně by měl fungovat jen s klávesnicí a s viditelným indikátorem fokusu.

WCAG 2.2 vyžaduje, aby všechny funkce šlo ovládat z klávesnice (2.1.1, úroveň A), aby neexistovaly pasti pro klávesnici (2.1.2, úroveň A), aby byl indikátor fokusu viditelný (2.4.7, úroveň AA) a aby prvky s fokusem nebyly zcela zakryté jiným obsahem (2.4.11, úroveň AA) (W3C (otevře se v nové kartě)). Tyto základy často chybějí. Přehled 33 webů s nejvyššími tržbami, který Baymard provedl v roce 2021, zjistil, že 45 % mělo funkce, které nešlo ovládat klávesnicí, a 48 % neudržovalo indikátor fokusu neustále viditelný (Baymard Institute (otevře se v nové kartě)). Únorový sken WebAIM z roku 2026 zjistil v průměru 56,1 odhalené chyby na domovskou stránku a 71,0 u webů v kategorii Shopping (nakupování) (WebAIM (otevře se v nové kartě)).

Pětiminutový test:

  1. Načtěte produktovou stránku a stiskněte Tab, aniž byste sáhli na myš.
  2. Ověřte, že vždy vidíte, kde je fokus.
  3. Vyberte velikost a barvu a změňte množství.
  4. Stiskněte tlačítko pro přidání do košíku a ověřte, že se fokus přesune do vysouvacího košíku a že ho lze zavřít klávesnicí.
  5. Dostaňte se k tlačítku pokladny.
/* A visible focus style for keyboard users */
:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

Bezplatný sken zkontroluje mnoho z těchto bodů zhruba za minutu. Report konverzí převede kontroly stránek, jako je viditelnost ceny, přidání do košíku na telefonu, informace o dopravě a vrácení, vyskakovací okna, odkazy na podmínky v patičce, vyhledávání, nákupní cesta s klávesnicí a vodorovné posouvání, na doporučení seřazená podle priorit. Vychází z kontrol stránek, ne z vašich prodejních dat, a nezaručuje žádný nárůst prodejů.

Často kladené otázky

Jaký je nejčastější důvod, proč zákazníci opustí nákup?

V průzkumu Baymard z roku 2026 mezi 1 083 dospělými Američany byla nejčastější odpovědí „jen prohlížení“ (42 %). Z ostatních důvodů byly na prvním místě dodatečné náklady, jako doprava, daň a poplatky, se 40 %, před pomalým doručením s 20 %.

Zvýší oprava těchto problémů můj konverzní poměr?

To nikdo slíbit nemůže. Výzkum popisuje bariéry, které jsou běžné ve velkých vzorcích webů a nakupujících; zda jejich odstranění změní vaše výsledky, závisí na vašich produktech, cenách a návštěvnosti, proto měřte před každou změnou i po ní.

Kam na produktové stránce umístit informace o dopravě a vrácení?

Poblíž ceny a tlačítka pro nákup, jako krátké shrnutí s odkazem na úplné podmínky. Ve výzkumu Baymard uvedlo 60 % respondentů, že informace o vrácení zboží hledají na produktové stránce.

Musí být tlačítko pro přidání do košíku na telefonu vidět bez posouvání?

Žádné pravidlo to nevyžaduje, ale zákazníci by měli rychle vidět cenu a dostat se k tlačítku. Jednou z možností je plovoucí nákupní lišta, pokud nezakrývá prvky s fokusem ani jiný obsah.

Je přístupnost součástí konverzí?

Ano, v prostém smyslu: zákazník, který nedokáže ovládat výběr varianty nebo tlačítko pro přidání do košíku klávesnicí nebo čtečkou obrazovky, nemůže nakoupit. WCAG 2.2 úrovně AA tyto základy pokrývá.

Zdroje

Všichni průvodci