Mobilní zobrazení PrestaShopu: jak opravit nebo skrýt prvek na telefonech
Když jeden prvek rozbíjí mobilní zobrazení PrestaShopu, obvyklým viníkem je pevná šířka, příliš dlouhý text, nebo styly modulu, které s úzkou obrazovkou nepočítaly. Opravu přidáte do custom.css v child theme, do pravidla, které platí jen na telefonech. Prvek skryjte, jen když ho zákazníci na telefonu opravdu nepotřebují.
Autor: Tým TellMyShop. Průvodce pro majitele obchodů na PrestaShopu: příčina, ruční oprava a stejná práce v rozhovoru v chatu.
Naposledy aktualizováno: · 5 min čtení
Proč prvek na telefonu vypadá špatně?
E-shop na PrestaShopu nemá samostatnou mobilní verzi. Stejný kód se uspořádá jinak, když je obrazovka úzká. Problémy začínají, když se prvek neumí zmenšit.
| Co vidíte na telefonu | Nejčastější příčina | Co obvykle pomůže |
|---|---|---|
| stránka se posouvá do strany | prvek s pevnou šířkou v pixelech, široká tabulka v popisu | šířka 100 %, nebo posouvání jen tabulky |
| text vyčnívá ze svého boxu | dlouhé slovo, adresa nebo kód, které se nezalomí | zalamování dlouhých slov v tomto prvku |
| ikony záruk zabírají půl obrazovky | modul má velké ikony a tři sloupce bez pravidla pro telefony | menší ikony, jeden sloupec, nebo skrytí na telefonech |
| tlačítko je zakryté | okno chatu, cookie lišta nebo přilepená lišta | posunutí okna nebo nižší lišta |
| název produktu má čtyři řádky | velké písmo nadpisu z verze pro počítač | menší velikost nadpisu pod zvolenou šířkou |
| obrázek je oříznutý nebo roztažený | pevná výška obrázku v CSS | automatická výška |
Nejčastěji se rozbíjejí prvky přidané později: moduly třetích stran, textové bloky vložené z editoru, tabulky velikostí v popisech produktů a informační lišty. Samotná šablona bývá v pořádku.
Jak zkontrolovat mobilní zobrazení bez telefonu
Rychlý náhled vám dá prohlížeč. V Chromu otevřete nástroje pro vývojáře a zapněte panel zařízení, jak vysvětluje návod k režimu zařízení v Chromu. Zvolíte šířku oblíbeného telefonu a hned vidíte, kde se stránka rozpadá.
Režim zařízení je přiblížení. Vždy to zkontrolujte i na skutečném telefonu, ideálně v anonymním okně, abyste se nedívali na starou verzi z mezipaměti prohlížeče.
Kontrolujte popořadě:
- Úvodní stránku.
- Kategorii s filtry.
- Stránku produktu s dlouhým názvem a několika variantami.
- Košík a první krok objednávky.
- Stránku s tabulkou, například s tabulkou velikostí.
Zapište si, na které stránce a při jaké šířce se problém objeví. To je polovina opravy.
Prvek na telefonech opravit, nebo skrýt?
Nejdřív ho zkuste opravit. Skrytí je rychlé, ale zákazník na telefonu přijde o informaci, kterou zákazník na počítači vidí.
Skrytí dává smysl, když prvek:
- opakuje informaci, která je výš na stránce,
- je dekorace bez obsahu,
- zakrývá tlačítko nebo cenu a nejde snadno přesunout.
Neskrývejte popis produktu, cenu, dostupnost, dobu doručení ani informace o vrácení. Právě ty zákazníci na telefonu hledají nejvíc.
Kam přidat opravu CSS pro telefony
Do souboru custom.css ve vaší child theme. Pravidla pro telefony zabalíte do media query, bloku, který platí jen pod zvolenou šířkou obrazovky. Jak to funguje, vysvětluje návod MDN k media queries.
Na child theme záleží z jednoho důvodu: aktualizace hlavní šablony váš soubor nepřepíše. Dokumentace PrestaShopu k child theme vysvětluje, jak ji postavit a připojit k ní vlastní soubor stylů. Proč změny po aktualizaci mizí, rozebíráme v článku o tom, jak aktualizace šablony smazala moje změny.
Jaké jsou nejčastější opravy pro telefony?
Většinu problémů s mobilním zobrazením vyřeší hrstka opakujících se oprav. Každou dáte do bloku pro úzké obrazovky, takže verze pro počítač zůstane beze změny.
- Široká tabulka v popisu produktu. Tabulka velikostí s mnoha sloupci roztahuje stránku. Místo jejího mačkání nechte do strany posouvat jen tabulku, ne celou stránku.
- Dlouhá slova a adresy. Slevový kód, e-mailová adresa nebo dlouhý název materiálu bez mezer vyčnívá z boxu. Stačí pravidlo pro zalamování dlouhých slov v tomto jednom prvku.
- Okno chatu přes tlačítko Do košíku. Moduly chatu mívají vlastní nastavení pozice na telefonech. Zkontrolujte ho, než začnete psát CSS.
- Příliš velké nadpisy. Název produktu na čtyřech řádcích odsune cenu z první obrazovky. Obvykle stačí menší velikost nadpisu na telefonech.
- Tři sloupce ikon. Bloky záruky, doručení a vrácení vypadají na telefonech lépe v jednom sloupci s menšími ikonami.
Opravujte jednu věc po druhé a po každé změně stránku zkontrolujte. Když změníte několik pravidel najednou, těžko poznáte, které něco rozbilo.
Co zkontrolovat po opravě
Po uložení vymažte mezipaměť v Rozšířené parametry → Výkon. Pokud změnu pořád nevidíte, projděte seznam v článku změny se v PrestaShopu neprojevují.
Jak opravit mobilní zobrazení s chatem
Popíšete, co je špatně a na které stránce. Do rozhovoru můžete vložit snímek obrazovky z telefonu. Váš chat (Claude nebo ChatGPT) přečte soubory šablony a kód stránky, zjistí, která třída prvek řídí, a před uložením ukáže pravidlo.
Vy: Na telefonech zabírají ikony záruk pod tlačítkem Do košíku půl obrazovky. Pod 768 px je skryj a zmenši název produktu. Jen v custom.css.
Váš chat: Ikony pocházejí z modulu reassurance, třída .blockreassurance_product. Child theme má prázdný custom.css. Přidám:
Na počítači se nic nezmění. Před uložením udělám kopii souboru a pak vymažu mezipaměť.
Vy: Ano.
Váš chat: Uloženo. Na stránce produktu pravidlo platí jen pod 768 px. Zkontrolujte to i na vlastním telefonu v anonymním okně.
Stav karty: čeká na vaše „ano“stará verze: (prázdný soubor)
nová verze: @media (max-width: 767px) {
nová verze: .blockreassurance_product { display: none; }
nová verze: .product-container h1 { font-size: 1.25rem; }
nová verze: }
Velikosti a názvy tříd v tomto příkladu jsou ilustrační; ve vaší šabloně můžou být jiné. Ukázkový požadavek najdete v případu použití skrytí nebo oprava prvku na telefonech.
Změny souborů šablony dělá TellMyShop Pro, jakmile v panelu modulu zapnete přepínač Šablona. Přepínač platí 24 hodin a vyžaduje zálohu databáze ze stejného dne. Před každým uložením souboru se udělá kopie a změna jde do historie změn, takže každou změnu můžete vrátit zpět jedním požadavkem. Bezplatná verze TellMyShop Free soubory šablony nečte ani nemění; pomáhá s přehledy e-shopu. Srovnání verzí najdete v ceníku.
Otázky a odpovědi
Má PrestaShop samostatnou mobilní verzi e-shopu?
Ne. Šablona Classic a většina novějších šablon jsou responzivní: stejný e-shop se na úzké obrazovce uspořádá jinak. Proto opravy pro telefony děláte ve stejném souboru stylů, jen uvnitř pravidla, které platí pod zvolenou šířkou obrazovky.
Škodí skrytí prvku na telefonech v Google?
Skrytí drobné dekorace nebo opakované informace obvykle problém není. Pozor na obsah, který je důležitý pro zákazníky i pro Google, například popis produktu nebo cenu. Google posuzuje e-shop hlavně podle verze pro telefony, takže důležitý obsah by tam měl zůstat.
Jak zkontroluji mobilní zobrazení bez telefonu?
Otevřete e-shop v Chromu, otevřete nástroje pro vývojáře a zapněte režim zařízení. Uvidíte stránku v šířce telefonu a můžete měnit velikost obrazovky. Je to dobré přiblížení, ale konečný test udělejte na skutečném telefonu.
Proč moje opravy pro telefony po aktualizaci šablony zmizely?
Protože byly zapsané do souboru šablony, který aktualizace přepsala, například theme.css. Vlastní styly držte v custom.css v child theme. Tento soubor se při aktualizaci hlavní šablony nepřepisuje.
Vidí chat, jak můj e-shop vypadá na telefonu?
Na obrazovku telefonu se nedívá. Čte soubory šablony a kód stránky a vy popíšete problém, nebo do rozhovoru vložíte snímek obrazovky. Z toho chat zjistí, které pravidlo změnit, a před uložením vám ho ukáže.
PrestaShop je registrovaná ochranná známka společnosti PrestaShop SA. Claude je ochranná známka společnosti Anthropic PBC. ChatGPT a OpenAI jsou ochranné známky společnosti OpenAI. TellMyShop s těmito společnostmi není propojen.