Uživatelské rozhraní mobilního košíku pro PrestaShop: 7 vzorů, které skutečně vedou ke konverzi

Mobilní provoz nyní představuje 70–78% návštěv do většiny obchodů typu PrestaShop, ale pouze 35–45% z celkového počtu dokončených objednávek. Právě v tomto rozdílu spočívá selhání uživatelského zážitku z mobilního košíku. Vzory košíku navržené s prioritou pro stolní počítače – tabulky přes celou šířku, drobné ovládací prvky pro zadávání množství, postupy s přesměrováním do košíku – to vše ztěžuje ovládání palcem a zpomaluje připojení.

Zde je sedm vzorů, které v obchodech PrestaShop spolehlivě přinášejí lepší konverzi na mobilních zařízeních, co každý z nich nahrazuje a kdy který z nich použít.

Proč je UX mobilního košíku samostatný problém

Strukturální omezení nakupování přes mobilní zařízení:

• Dosah palce — pohodlně se ovládá pouze spodní třetina obrazovky. Ovládací prvky pro nastavení množství umístěné v horní části řádku nákupního košíku jsou nepohodlné.
• Kognitivní zátěž — Uživatelé nakupující přes mobilní zařízení jsou často rozptýlení; doba, po kterou jim vydrží pozornost, je kratší. Obnovení celé stránky narušuje plynulost prohlížení.
• Variabilita připojení — Pokrytí sítí 4G/5G uvnitř budov je nepředvídatelné. Každé načtení stránky s sebou nese riziko, že se bude muset opakovat.
• Rozměry obrazovky — v zobrazení o šířce 390px není dostatek místa pro výchozí rozložení tabulky košíku PrestaShop.

Míra opuštění nákupního košíku na mobilních zařízeních je o 10–20 procentních bodů vyšší než na stolních počítačích. Celkový přehled najdete zde: Průvodce opuštěnými košíky PrestaShop.

Vzor 1 — Vysouvací panel košíku namísto přesměrování na stránku košíku

Výchozí postup PrestaShop na mobilu: klepnutí na “Přidat do košíku” → celá stránka se nahradí tabulkou košíku → klepnutí na “Pokračovat v nákupu” nebo “Pokračovat”. Tři načtení stránky, dvě změny kontextu, masivní opouštění košíku.

Řešení: a zasouvací panel které se zobrazí nad stránkou produktu, ukazuje, co bylo přidáno, nabízí tlačítka “Zobrazit košík” a “Přejít k pokladně” a zavře se klepnutím mimo něj nebo přejetím prstem. Uživatel nikdy neopustí stránku produktu, o kterém uvažoval.

Očekávaný dopad: 8-15% – zvýšení míry dokončení, se zaměřila na mobilní zařízení. Viz také Nákupní košík s AJAXem vs. obnovení stránky pro technické srovnání.

Šablona 2 — Výzva k akci (CTA) v dolní části stránky při placení

V dlouhém košíku na úzké obrazovce zmizí hlavní tlačítko “K pokladně”, jakmile uživatel prochází položky. Zapomenou, že tam vůbec je. A lípající se spodní lišta Tento problém vyřeší zobrazení mezisoučtu a jediného tlačítka “K pokladně”.

Implementace: position:fixed v dolní části, výška 56–64px, plná šířka, jedno tlačítko (ne tři). Skrýt, když je otevřené modální okno. Nechat viditelné i při otevřené klávesnici v systému iOS (je to složitější, než se zdá – vyžaduje viewport-fit=cover a safe-area-inset-bottom).

Očekávaný dopad: 3-6% – dokončení na mobilním zařízení.

Vzor 3 — Ovládací prvky pro nastavení množství v oblasti palce

Výchozí vzor “qty -[ ]+ ✕” funguje na stolním počítači bez problémů. Na mobilu je však příliš malý, klepací plochy se překrývají a často dochází k nechtěnému odstranění položky. Přepracování pro mobilní zařízení:

• Minimální velikost klikatelných prvků 44×44px (minimální hodnota podle Apple HIG; Material Design doporučuje 48dp)
• “Tlačítka ”–“ a ”+“ jsou fyzicky oddělená, nejsou vedle sebe
• “Odstranit” jako nenápadná sekundární akce (malé “×” v pravém horním rohu řádku nebo odstranění přejetím prstem)
• Vizuální zpětná vazba na stisknutí tlačítka (krátká změna barvy, nejen stav)

Očekávaný dopad: o 1–3 % více úspěšných úprav košíku — malé, ale s kumulativním efektem.

Šablona 4 – Ukazatel průběhu dopravy zdarma

Doprava zdarma je v průzkumech v oblasti e-commerce nejčastěji zmiňovaným pobídkovým faktorem (58% nakupujících ji uvádí jako svůj #1 důvod k větším nákupům). Pokud však tuto hranici zákazníkům neukážete, nevědí, že existuje.

Vzor: trvale zobrazený ukazatel průběhu v horní části košíku, který uvádí “Za 12 € navíc získáte dopravu zdarma” a vyplňuje se postupně, jak se přidávají položky. Na stránce produktu tento pruh ukazuje, jaká je hranice, ještě než zákazník něco přidá.

Očekávaný dopad: 6-15% – nárůst průměrné hodnoty objednávky (AOV) (průměrná hodnota objednávky) a navíc nižší počet opuštěných objednávek, protože náklady na dopravu již nejsou překvapením.

Vzor 5 — Potvrzení “přidáno do košíku” jedním klepnutím

Většina standardních šablon PrestaShop při přidání do košíku zobrazí modální okno s textem: “Tento produkt byl přidán do vašeho košíku. [Pokračovat] [K pokladně]”. Na mobilních zařízeních toto modální okno zakrývá obrazovku, vyžaduje rozhodnutí a narušuje plynulost procesu.

Lepší vzor: a oznámení v podobě vyskakovacího okna — malý banner, který se na 2–3 sekundy vysune shora nebo zdola s textem “Přidáno do košíku ✓” a malým odkazem “Zobrazit košík”. Potvrzuje tak provedenou akci, aniž by vyžadoval další akci.

Očekávaný dopad: 2-4% – snížení počtu opuštěných košíků při přidání do košíku — je to sice drobná změna, ale doplňuje další opravy.

Šablona 6 – Minimalistický platební formulář pro mobilní zařízení

Výchozí platební formulář PrestaShop obsahuje mnoho polí, která nejsou striktně povinná. Uživatelé mobilních zařízení často opouštějí stránku, pokud se jim formulář jeví jako nekonečný.

Provádějte audity bez kompromisů:

• Opravdu potřebujete telefonní číslo? (Většina obchodů v EU ho nevyžaduje – odstraňte ho)
• Potřebujete u většiny objednávek druhý řádek adresy? (Ne – skrýt jako volitelnou položku)
• Může být název společnosti volitelný? (Ano – volitelný)
• Správně využívejte funkci automatického vyplňování v prohlížeči pomocí autocomplete="postal-code", autocomplete="given-name" atd.
• Použití inputmode="numeric" podle PSČ a telefonního čísla, aby se klávesnice mobilních telefonů přepnuly na čísla

Očekávaný dopad: 3-8% – méně případů nedokončení formuláře.

Vzor 7 — Platební proces ovládaný jedním palcem

Stránka s platebním formulářem je stránkou s nejvyšší mírou opuštění v nákupním procesu. Opravy specifické pro mobilní zařízení:

• Tlačítka Apple Pay / Google Pay nad formulářem pro zadání údajů o kreditní kartě – jedno klepnutí, biometrické ověření, žádné zadávání údajů.
• Klávesnice pouze s číslicemi v polích na kartě (inputmode="numeric").
• Automatický posun mezi poli pro číslo karty, datum platnosti a CVC.
• Loga poskytovatelů platebních služeb přímo vedle pole CVC (snižuje obavy typu “je to bezpečné?”).
• Z této obrazovky odstraňte vše, co nesouvisí přímo s platbou – žádné nabídky doplňkových produktů ani registrace k odběru newsletteru.

Očekávaný dopad na mobilní zařízení: 5-12% v závěrečné fázi konverze. Samotná služba Apple Pay v obchodě, kde převládá iOS, může zvýšit konverzi u iPhone o 10–20%.

Jak měřit úspěšnost UX mobilního košíku

Rozčleňte každou sledovanou metriku podle typu zařízení:

• Míra přidání do košíku na mobilních zařízeních vs. stolní počítač (mělo by to být podobné, ale často tomu tak není)
• Míra konverze z košíku k dokončení nákupu u mobilních zařízení — tam, kde většina obchodů má úniky
• Míra konverze z mobilního pokladního procesu k nákupu — druhý největší únik
• Náhodné kliknutí z rozčilení / neúmyslné kliknutí prostřednictvím aplikace Microsoft Clarity (zdarma) — odhaluje problémy s uživatelským zážitkem, které z čísel nevyčtete
• Doba strávená na stránce s košíkem — příliš dlouhá doba obvykle znamená potíže, nikoli zapojení

Než začnete s optimalizací, zaznamenejte pomocí nástrojů Clarity nebo Hotjar 20–30 mobilních relací. Objevíte tak dva nebo tři konkrétní problémy, které nikdo nezmínil. Tyto údaje mají větší hodnotu než jakýkoli kontrolní seznam.

Často kladené otázky

Která jednotlivá změna mobilního košíku má v PrestaShopu největší dopad?

Nahrazení postupu přesměrování do košíku vysouvacím panelem. Řeší to najednou několik příčin opuštění nákupu: změnu kontextu, vynulování posouvání, přerušení a kognitivní zátěž. Stejný vzor jako u úspěšných aplikací pro mobilní nakupování.

Potřebuji samostatný mobilní šablonu?

Ne. Responzivní šablona s CSS navrženým podle principu „mobile-first“ je dnes standardem. Samostatné mobilní šablony (m.vašedoména.com) jsou zastaralé a mají negativní dopad na SEO. Pracujte v rámci své hlavní šablony a dodržujte zásadu „override“ s využitím mediálních dotazů pro úpravy specifické pro mobilní zařízení.

Funguje integrace Apple Pay / Google Pay na PrestaShop?

Ano, pokud to vaše platební brána podporuje. Stripe pro PrestaShop, Mollie, PayPlug a PayPro budou v roce 2026 všechny standardně podporovat Apple Pay a Google Pay. Modul platební brány automaticky zpracuje tlačítko a platební formulář.

Škodí výsuvné košíky SEO?

Ne. Vysouvací košík je součástí uživatelského rozhraní (UI); nemá žádný vliv na to, jak Google prochází vaše stránky s produkty nebo kategoriemi. Viz Nákupní košík s AJAXem vs. obnovení stránky proč se tento mýtus stále udržuje a proč je mylný.

Jak mohu otestovat, zda můj nákupní košík skutečně funguje na skutečných mobilních zařízeních?

Emulace zařízení v nástroji Chrome DevTools není spolehlivá, pokud jde o skutečné chování dotykového ovládání a sítě. Použijte:

• Váš vlastní telefon (nikoli emulátor)
• Pomalé připojení omezované v DevTools na 3G pro opakované testování
• BrowserStack nebo LambdaTest pro Safari na iOS, Samsung Internet, skutečný hardware
• Záznamy relací služby Microsoft Clarity pořízené ze skutečných zařízení zákazníků

Rychlý úvod

Tří týdenní plán: 1. týden – nahradit funkci „přesměrování do košíku“ vysouvacím panelem (největší dopad). 2. týden – přidat ukazatel průběhu pro dopravu zdarma. 3. týden – provést kontrolu a zredukovat počet polí v platebním formuláři. Každý týden provést vyhodnocení, než přejdeme k dalšímu.

Pokud implementujete vzor „slide-in“, Sliding Cart Block obsahuje tuto funkci spolu s funkcí bezplatné dopravy a vzory pro křížový prodej, které jsou zde popsány; kompatibilní s PrestaShop 1.7 a 8.x.