Audit zpracoval Lagom · 21. a 23. září 2026

Audit e-shopu YOGGSPIRATION.cz

Pohled nového návštěvníka na homepage, menu, kategorie, produkty, vyhledávání, košík, pokladnu a obsahové stránky na desktopu i mobilu. Doplněno o technická měření a srovnání s pěti konkurenty. Každé zjištění má prioritu, náročnost, proveditelnost v Shoptetu a odkaz na screenshot. Kliknutím na screenshot ho zvětšíte.

Šablona
Shoptet Classic
Viewporty
1440×900 · 390×844
Zjištění
60
Screenshoty
222 + 50 konkurence

Tenhle report je zároveň malá ukázka: je vysázený v barvách a písmech, která v kapitole 5 navrhuji pro váš e-shop (varianta „Klidná praxe“). Takhle by mohla vypadat i nová YOGGSPIRATION.

Priorita: kritickávysokástřednínízká · Náročnost S / M / L

Datum: 21. 9. 2026, doplněno a přeměřeno 23. 9. 2026 · Platforma: Shoptet, šablona Classic (template-11) · Rozsah: 46 stránek a stavů, desktop 1440×900 a mobil 390×844 (iPhone, dotyk), 5 konkurentů, Lighthouse, axe-core (WCAG 2.2), měření layoutu v prohlížeči

Jak číst tenhle report

Report je psaný tak, aby mu rozuměl i člověk, který se webům nevěnuje. Technické pojmy vysvětluji v místě, kde je poprvé použiju, a všechny jsou ještě jednou vypsané ve slovníčku na konci.

Struktura. Kapitola 1 je shrnutí na pět minut. Kapitola 2 dává známky jako ve škole. Kapitola 3 je hlavní část: 60 konkrétních zjištění, každé se screenshotem. Kapitoly 4 až 7 jsou návrhy (konkurence, vzhled, struktura menu, rozvržení stránek). Kapitola 8 je plán prací po etapách, kapitola 9 otázky na vás a kapitola 10 ceny.

Každé zjištění má stejných šest částí:

Část Co v ní najdete
Co vidím Popis toho, co je na e-shopu teď, včetně naměřených čísel
Proč to řeším Co to dělá se zákazníkem nebo s tržbami, bez technického žargonu
Doporučení Co konkrétně udělat
Priorita kritická (řešit hned) → vysoká → střední → nízká (až zbude čas)
Náročnost odhad práce: S, M nebo L (převod na hodiny a koruny je níž)
Proveditelnost jestli to jde nastavit v administraci Shoptetu, nebo je potřeba kód

Náročnost v hodinách a korunách (moje sazba je 1 000 Kč/h):

Značka Práce Cena
S 1 až 3 hodiny 1 000 až 3 000 Kč
M 3 až 8 hodin 3 000 až 8 000 Kč
L 8 až 12 hodin 8 000 až 12 000 Kč

Přesnější odhady po etapách jsou v kapitole 10. Ceny jsou bez DPH.

Zkratky u proveditelnosti: ADMIN = nastavíte to sama v administraci Shoptetu · CSS/JS = je potřeba vlastní kód, který se do Shoptetu vkládá v části Vzhled a obsah → HTML kódy · ŠABLONA = znamenalo by to změnu nebo výměnu šablony · DOPLNĚK = existuje doplněk v Shoptet marketplace · PREMIUM = jde to jen se Shoptet Premium, nebo vůbec.

Screenshoty. U každého zjištění jsou obrázky, na kterých je vidět přesně to, o čem píšu. Kliknutím se zvětší. D: znamená pohled z počítače, M: z mobilu a B: je screenshot konkurenčního e-shopu. Soubory s -full jsou celé stránky odshora dolů, ostatní jsou to, co vidíte bez posouvání. Obrázky s -anotace jsem domaloval, aby na nich bylo vidět měření.

1. Shrnutí pro majitelku

Celkový dojem. YOGGSPIRATION má to nejdůležitější, co konkurence často nemá: vlastní designové podložky, skutečnou zakladatelku-lektorku (Vandu) s příběhem, dobré recenze na Heurece a dopravu zdarma u podložek. Web to ale návštěvníkovi neukazuje. Působí jako složenina z různých období: úzké plakátové písmo (Yanone Kaffeesatz) se stínem, pět různých akcentových barev, klipartové ikony, obecné „AI“ fotky v hlavním banneru a obsah pro lektory a velkoobchod na homepage hned nad produkty. K tomu se přidávají chyby v provedení, které nejsou vidět na první pohled, ale dohromady dělají „amatérský“ dojem: nadpisy a dokonce i tlačítka jsou vypálené do obrázků, sekce webu stojí na dvou různě širokých mřížkách, fixní hlavička ubírá 27 % obrazovky a výběr dopravy je opticky křivý. A nakonec vážné technické chyby: 3 odkazy vedoucí na neexistující stránku a mobil, na kterém se kategorie načítá 24 sekund. Dobrá zpráva: většinu nejdražších problémů lze opravit v nastavení Shoptetu nebo vlastním CSS/JS bez výměny šablony.

6 největších problémů

  1. Cookie lišta vůbec nefunguje, měření přitom běží bez souhlasu. Skript CookieHub vrací chybu 403 (pravděpodobně vypršel účet). Návštěvníkovi se nezobrazí žádná lišta, ale web hned nastaví cookies Google Analytics, Google Ads, Facebook Pixelu, Bingu a Seznamu. Jde o právní riziko (ÚOOÚ) a data z těchto nástrojů jsou zároveň nespolehlivá. → F-01
  2. Odkazy do prázdna. Dlaždice „Tašky na podložky“ a „Jóga pro děti“ na homepage vedou na stránku 404 a dětská podložka ZOO je ve výpisu Výprodeje i Podložek, ale její detail také vrací 404. Každý takový klik je ztracený zákazník. → F-02
  3. Nejde vybírat podle parametrů. Kategorie Podložky má 65 produktů a žádné filtry (tloušťka, materiál, povrch, rozměr, cena, barva). Rozbalovací podmenu je vlastním CSS skryté, takže 9 podkategorií na desktopu ani v mobilním menu nejde najít. Kdo neví přesně, co chce, musí projít 65 skoro stejných dlaždic. → F-10, F-11
  4. Mobil je pomalý a přeplněný skripty. Lighthouse mobil: výkon 34 až 39 ze 100, LCP 8,8 s na homepage a 23,8 až 28,5 s na kategorii a produktu. Hlavní příčina je, že na webu jsou 4 měřicí účty GA4, starý Universal Analytics a 3 účty Google Ads, které se navíc načítají dvakrát (cca 2,3 MB JavaScriptu jen od Googlu). → F-40
  5. Vizuál drží na obrázcích místo na kódu. Nadpis v hlavním banneru, popisky všech šesti dlaždic kategorií i celé bloky „Jste lektor jógy?“ včetně tlačítek „CHCI SLEVU“ jsou vypálené do PNG a JPG. Proto jsou na dnešních displejích rozmazané, na mobilu se zmenší i s textem, Google je nepřečte a každá změna textu znamená práci v grafickém programu. Tři z šesti bloků jsou navíc zvětšované ze 400 px na 446 px. → F-55
  6. Web neprodává důvod koupit právě tady. Chybí lišta výhod (doprava zdarma, rychlost doručení, vrácení), na produktu nejsou recenze ani termín doručení, u výprodeje chybí přeškrtnutá cena a na produktu nejsou doporučené doplňky. Příběh Vandy je schovaný na podstránce. → F-06, F-20, F-23, F-24, F-26, F-41

5 silných stránek (zachovat)

  1. Vlastní, rozpoznatelné designy podložek (GANESHA, ZODIAC, WAVES…). Tohle je produkt, který se na velkých e-shopech neobjeví. Stojí za to z něj udělat hlavní vizuální prvek webu.
  2. Autentická zakladatelka. Vanda jako lektorka jógy a zakladatelka projektu Yogaholic s reálnou fotkou () je silnější důvěryhodnostní prvek než jakýkoli certifikát.
  3. Široká nabídka dopravy a plateb, u podložky doprava zdarma. PPL, Zásilkovna, osobní odběr, QR platba, Apple/Google Pay a platby bez poplatku. U objednávky podložky (2 390 Kč) je veškerá doprava zdarma (), u malé objednávky stojí 59 až 79 Kč (). Hranice dopravy zdarma ale není nikde uvedena, takže výhoda nepracuje (F-06).
  4. Pečlivé SEO základy. Lighthouse SEO 100, smysluplné title a description u kategorií a produktů, kanonické URL, srovnávací článek „Nejlepší podložky na jógu 2025“ s tabulkou ().
  5. Jasné produktové shrnutí na detailu. Tloušťka, rozměr a obsah balení v odrážkách hned pod názvem () a funkční validace formuláře v pokladně ().

5 rychlých výher (do 1 týdne, bez redesignu)

# Úprava Kde v Shoptetu Náročnost
1 Zprovoznit cookie lištu (obnovit CookieHub, nebo zapnout nativní cookie lištu Shoptetu) a měřicí kódy spouštět až po souhlasu Administrace + HTML kódy S
2 Opravit 3 nefunkční odkazy (bannery HP, produkt ZOO) a nastavit přesměrování 301 Administrace → Bannery, Produkty, Přesměrování S
3 Uklidit měřicí kódy: jeden GA4, jeden Google Ads, UA smazat, vše přes jeden GTM kontejner Administrace → Marketing, HTML kódy S
4 Zapnout filtry podle parametrů v kategoriích podložek (tloušťka, povrch, materiál, délka, cena) Administrace → Kategorie → Filtrování + parametry produktů M
5 Zmenšit fixní hlavičku z 240 px na jeden řádek (asi 80 px) a patičku z 596 px na dva řádky Vlastní CSS S
6 Přidat lištu výhod pod hlavičku: „Doprava zdarma od X Kč · Odesíláme do 24 h · Vlastní designy · Hodnocení na Heurece“ (doplnit reálné hodnoty) a v košíku ukazatel „Do dopravy zdarma zbývá …“ HTML kódy / vlastní CSS + ADMIN S

2. Skóre podle oblastí

Oblast Skóre Zdůvodnění
První dojem 5/10 Je jasné, že se prodávají podložky na jógu, ale hero s obecnou AI fotkou neříká, proč právě tady, a chybí jakákoli výhoda nebo sociální důkaz nad ohybem.
Vizuální identita 3/10 3 písma, 5 akcentových barev, text se stínem a klipartové ikony. Hlavně ale nadpisy, popisky dlaždic i tlačítka žijí uvnitř obrázků, takže jsou rozmazané a nejednotné.
Navigace a IA 4/10 Podmenu je skryté, B2B položky se míchají s nákupními, „Ručníky“ jsou pod podložkami a „Výprodej“ existuje ve dvou kategoriích.
Homepage 5/10 Dobré dlaždice kategorií a recenze, ale 2 dlaždice vedou na 404, 6 velkých B2B bloků je na homepage navíc a 24 produktů je v jednom dlouhém bloku bez výběru.
Kategorie 3/10 U 65 produktů chybí filtry, všech 9 podkategorií má stejnou ikonu lotosu a dlaždice produktů neukazují klíčové parametry.
Produktový detail 4/10 Dobré shrnutí parametrů, ale chybí recenze, termín doručení, cross-sell a fotky v použití. Tabulka parametrů obsahuje chyby a výběr varianty nezmění fotku ani název.
Košík a checkout 5/10 Standardní 3 kroky Shoptetu s dobrou validací. Nabízí ale výdejní boxy, do kterých se podložka nevejde, řádky dopravy jsou opticky křivé (79 až 101 px, cena mimo osu názvu), na mobilu se překrývá text a chybí upsell.
Mobil 4/10 Cena a tlačítko do košíku jsou až pod první obrazovkou, tlačítko nezůstává viditelné při scrollu a produkty v kategorii začínají až na 3. obrazovce. Chybí přístup k podkategoriím.
Důvěra a značka 4/10 Recenze z Heureky i příběh Vandy existují, ale jsou schované. Na produktu nejsou hodnocení a chybí garance a výhody.
Výkon 3/10 Mobil 34 až 39/100 a LCP až 28,5 s, protože se načítá 37 skriptů o velikosti 2,9 MB. Desktop je v pořádku (76 až 90).
SEO 6/10 Technicky čisté (LH 100), ale 3 stránky vracejí 404 a produkty nemají hodnocení ve strukturovaných datech. Title „O nás“ a description s překlepem „oznejte“. Blog má skrytý H1.
Přístupnost 5/10 Lighthouse 95 až 97, ale axe na každé stránce najde 16 až 78 prvků s nedostatečným kontrastem včetně hlavního tlačítka „Přidat do košíku“ a text 11 px.

3. Detailní zjištění

Formát: Co vidím → Proč je to problém → Doporučení · Priorita · Náročnost (S/M/L) · Proveditelnost v Shoptetu · Screenshot.

Legenda proveditelnosti: ADMIN nastavení v administraci · ŠABLONA změna/výměna šablony · CSS/JS vlastní kód přes Vzhled a obsah → HTML kódy (u vás už působí externí vývojář, soubory yoggspiration.css/js) · DOPLNĚK Shoptet Doplňky · PREMIUM jen se Shoptet Premium / nelze.

Co je dané Shoptetem a co ne. Část chování opravdu neovlivníme: strukturu HTML šablony, markup pokladny, vlastní JavaScript a CSS Shoptetu (v přenosu asi 1,3 až 1,5 MB z domény myshoptet.com), chování košíku nebo systémové stránky. To v reportu neřeším. Všechno, co je níž, je ale ve vašich rukou: měřicí kódy a doplňky, vlastní CSS a JS, obrázky a bannery, nastavení kategorií, parametrů, filtrů a dopravy, texty a produktová data. U každého zjištění proto uvádím řádek Proveditelnost, aby bylo jasné, jestli jde o nastavení v administraci, o kód, nebo o hranici platformy.

3.1 Kritické technické a právní nálezy

F-01 Souhlas s cookies: lišta už se zobrazuje, měřicí cookies se ale zapisují dřív

  • Co vidím (přeměřeno 23. 9. 2026): Cookie lišta je ten pruh, kterým web žádá o souhlas se sledováním návštěvnosti a reklamou. Při auditu 21. 9. se nezobrazila vůbec. Ke 23. 9. už naskočí nativní lišta Shoptetu s tlačítky „Nastavení“ a „Souhlasím“ () a Google Consent Mode má správně výchozí stav „denied“. Zůstávají ale dvě věci: skript služby CookieHub (cdn.cookiehub.eu/c2/31247300.js) pořád vrací chybu 403, tedy „přístup odepřen“, nejspíš kvůli neprodlouženému předplatnému a na každé stránce kvůli tomu končí JavaScript chybou Cannot read properties of undefined (reading 'load'). A hlavně: ještě než návštěvník na cokoli klikne, web nastaví cookies _ga, _gid, _gat_gtag_UA_249908881_1 a _fbp (Facebook) a odešle požadavky na google-analytics.com/g/collect, c.seznam.cz/retargeting a konverzní pixel Google Ads.
  • Proč to řeším: Marketingové cookies smějí podle českého zákona o elektronických komunikacích vzniknout až po souhlasu, takže je to riziko vůči ÚOOÚ. Pro vás je ale důležitější druhý dopad: dokud měření neodpovídá souhlasu, nedá se věřit číslům, podle kterých se budeme rozhodovat, co na e-shopu předělat dřív. Bez důvěryhodných dat děláme redesign poslepu.
  • Doporučení: (1) Odstranit mrtvý skript CookieHub, ať zmizí chyba v konzoli. (2) Zkontrolovat, že Facebook Pixel, Seznam a Bing jsou navázané na souhlas ze Shoptetu (nativní integrace to umí, vlastní kódy v HTML kódech ne). (3) Smazat starý Universal Analytics, který Google vypnul v roce 2024. (4) Po nasazení ověřit v anonymním okně, že před klikem na „Souhlasím“ nevzniká žádná _ga ani _fbp cookie.
  • kritická · S · ADMIN + CSS/JS ·

F-02 Tři odkazy vedou na stránku 404

  • Co vidím: Banner „Tašky na podložky“ na homepage vede na /tasky-na-podlozky-na-jogu/ (404) a banner „Jóga pro děti“ na /joga-pro-deti/ (404) (, ). Produkt „Dětská podložka na jógu ZOO“ je vidět v kategoriích Podložky na jógu i Výprodej, ale detail vrací 404 (, ).
  • Proč je to problém: Jde o 2 ze 6 hlavních dlaždic na homepage, tedy o nejviditelnější vstupní body webu. Stránka 404 („A safra! Něco se pokazilo.“) nabízí jen tlačítko zpět. Google vidí rozbité interní odkazy.
  • Doporučení: Opravit URL v bannerech (tašky → /tasky-na-podlozky/, děti → /jogove-podlozky-pro-deti/). U produktu ZOO buď zapnout viditelnost detailu, nebo ho vyřadit z výpisů. Nastavit 301 přesměrování ze starých URL. Jednou za měsíc kontrolovat web crawlerem (Screaming Frog zdarma do 500 URL).
  • kritická · S · ADMIN

F-03 Duplicitní měřicí kódy

  • Co vidím: Na každé stránce se načítá GA4 G-JQ6TBY63RE, G-6REPF75M6K, G-VL62KM2FZ9 a G-NMEQ6F57RP, Universal Analytics UA-249908881-1 (vypnutý Googlem v roce 2024), Google Ads AW-11027276292, AW-16907416130 a AW-536391746 a k tomu GTM GTM-TRS5RSN. Každý gtag skript se stahuje dvakrát (přímo i přes GTM), celkem kolem 2,3 MB.
  • Proč to řeším: Čtyři GA4 účty znamenají zdvojené nebo roztříštěné statistiky a nikdo neví, kterému číslu věřit. Zároveň je to největší jednotlivá položka v objemu staženého kódu, takže úklid je ta nejlevnější cesta ke zrychlení mobilu (F-40): nesahá se na šablonu ani na design, jen se smaže, co se nepoužívá.
  • Doporučení: S majitelkou a marketérem zjistit, který GA4 a Ads účet je aktivní, zbytek odstranit. Měřicí kódy nechat jen na jednom místě: buď v nativní integraci Shoptetu, nebo v GTM, ne v obou.
  • kritická · S · ADMIN + CSS/JS

F-04 Mobilní pokladna: text „Zpět“ přes upozornění

  • Co vidím: V kroku Doprava a platba i Informace o vás se text „Zpět“ vykresluje přes ikonu a přes červené upozornění (, ).
  • Proč je to problém: Na nejcitlivějším místě nákupu to vypadá jako rozbitý web a snižuje důvěru.
  • Doporučení: Opravit v CSS (pravděpodobně kolize vlastního stylu s tlačítkem zpět). Otestovat celý mobilní checkout na iPhonu i Androidu.
  • vysoká · S · CSS/JS

3.2 První dojem a hlavička

F-05 Hero banner: obecná fotka a slabé sdělení

  • Co vidím: Přes celou šířku je AI generovaná fotka ženy v meditaci v lese s nadpisem „PODLOŽKY NA JÓGU“ (verzálky, úzké písmo, stín), podtitulem „kvalitní a ekologické podložky na jógu a cvičení s originálním designem“ a tlačítkem „OBJEVUJTE ZDE“ (, ). Na fotce není žádný váš produkt.
  • Proč je to problém: Během 5 sekund se návštěvník dozví, že tu jsou podložky, ale ne proč koupit zrovna tady. Fotka je zaměnitelná s jakýmkoli fitness webem a vaše nejsilnější aktivum, vlastní designy podložek, není vidět. Stín pod textem a úzké verzálky patří k webovému stylu kolem roku 2015.
  • Doporučení: Hero s reálnou fotkou vaší podložky v použití (ideálně Vanda nebo studentka v ateliéru s designovou podložkou). Nadpis s benefitem, např. „Podložky na jógu, které chcete rozbalit každé ráno“, pod ním 3 výhody a dvě cesty: „Vybrat podložku“ a „Pomůžu vám vybrat“ (průvodce). Na mobilu výšku omezit na zhruba 60 % obrazovky, aby byly vidět produkty.
  • vysoká · M · ADMIN (banner) + CSS/JS (typografie, overlay)

F-06 Chybí lišta výhod (USP)

  • Co vidím: Nikde na webu (hlavička, produkt, košík, stránka Doprava a platba) není uvedeno, od jaké částky je doprava zdarma, ani rychlost doručení, vrácení zboží nebo hodnocení. Zákazník to zjistí až v kroku 2 pokladny: u objednávky za 2 390 Kč jsou všechny dopravy ZDARMA (), u objednávky za 120 Kč stojí 59 až 79 Kč (). Košík neukazuje „do dopravy zdarma zbývá …“ ().
  • Proč je to problém: Neznámá cena dopravy patří k nejčastějším důvodům opuštění košíku. Konkurence hranici komunikuje hned v hlavičce (: „Doprava zdarma při nákupu nad 2000 Kč“). Ukazatel zbývající částky zároveň přirozeně zvyšuje hodnotu objednávky (k polštáři za 890 Kč se přidá bloček).
  • Doporučení: Tenkou lištu pod hlavičkou (desktop 4 položky, mobil 1 rotující): Doprava zdarma od X Kč · Odesíláme do 24 h · ★ X,X/5 na Heurece · Vrácení do X dní (hodnoty potvrdí majitelka). Stejné body dát i na produktový detail pod tlačítko. V košíku a v panelu po přidání zapnout ukazatel „Do dopravy zdarma zbývá 610 Kč“ s tipy na doplňky. Hranici uvést i na stránce Doprava a platba.
  • vysoká · S · CSS/JS (HTML kód do hlavičky) nebo ADMIN (informační lišta)

F-07 Vyskakovací informační lišta přes obsah

  • Co vidím: Žlutá lišta „Právě jsme naskladnili jógové novinky! Oblíbené designy podložek jsou zpět…“ vlevo dole, na mobilu přes spodní třetinu dlaždic a přes tlačítko (, ). Písmo 12 px.
  • Proč je to problém: Novinka bez odkazu se nedá prokliknout, jen zakrývá obsah. Na mobilu zabírá asi 15 % obrazovky.
  • Doporučení: Zprávu přesunout do lišty výhod nebo do hero sekce jako odkaz „Novinky →“ a vyskakovací lištu zrušit.
  • střední · S · ADMIN

F-08 Hlavička na desktopu zabírá 27 % obrazovky

  • Co vidím: Horní lišta, logo na samostatném řádku a menu dohromady měří zhruba 240 px z 900 (). Horní lišta obsahuje „BLOG – články ze světa jógy“, „Doprava a platba“, „O nás“, „Kontakt“, „Nejlepší podložky na jógu“ a výběr měny.
  • Proč je to problém: Po posunu zůstává viditelná hlavička kolem 115 px (), což na notebooku ubírá místo produktům. Položky horní lišty jsou napsané nekonzistentně (BLOG verzálkami, ostatní normálně).
  • Doporučení: Logo vlevo a menu na stejném řádku (jednořádková hlavička kolem 80 px). Horní lištu nahradit lištou výhod, z informačních odkazů nechat jen „Inspirace“ a „Pro lektory a studia“ v hlavním menu.
  • střední · M · CSS/JS (nebo ŠABLONA). Změřeno v F-54.

F-09 Plovoucí záložka „Ověřeno zákazníky“ přes obsah

  • Co vidím: Modrá svislá záložka na pravém okraji, která na desktopu překrývá obsah (, na mobilu není).
  • Proč je to problém: Je to důvěryhodnostní prvek, ale v cizí barvě (#0aa6e8) a na okraji ho málokdo přečte.
  • Doporučení: Widget ponechat, ale hodnocení z Heureky zobrazit i jako text („X,X/5 z N hodnocení“) v liště výhod a na produktu.
  • nízká · S · ADMIN (widget) + CSS/JS

3.3 Informační architektura a navigace

F-10 Podmenu je skryté: 9 podkategorií podložek nejde najít z menu

  • Co vidím: V HTML je pod položkou „Podložky na jógu“ 9 podkategorií, ale najetí myší nic neotevře (, , vlastní CSS nastavuje display:none). V mobilním menu je jen 7 hlavních položek bez šipek () a klepnutí rovnou přejde do kategorie ().
  • Proč je to problém: Kdo hledá „cestovní“ nebo „korkovou“ podložku, musí vědět, že má kliknout do kategorie a pod popisem najít dlaždici. Na mobilu je to navíc až 2 obrazovky scrollu.
  • Doporučení: Na desktopu mega menu se sloupci „Podle typu“ (designové, protiskluzové PRO, oválné, cestovní, korkové, dětské) a „Podle potřeby“ (pro začátečníky, na dynamickou jógu, na cesty) s jednou fotkou a odkazem na průvodce výběrem. Na mobilu rozbalovací šipky u položek. Viz kapitola 6.
  • vysoká · M · ADMIN (zapnout podkategorie v menu) + CSS/JS (mega menu)

F-11 Kategorie Podložky bez filtrů (65 produktů)

  • Co vidím: Na /podlozky-na-jogu/ je pouze řazení „Doporučujeme / Nejlevnější / Nejdražší / Nejprodávanější / Abecedně“ a „65 položek celkem“ (). Na mobilu neexistuje ani tlačítko filtru ( vypadá stejně jako ).
  • Proč je to problém: U podložky rozhoduje tloušťka (3,5 / 4 mm), povrch (mikrovlákno / PU / korek), rozměr, hmotnost a cena, kdežto v kategorii jde rozlišit jen název. Konkurence filtry má ( ukazuje výběr povrchu a tloušťky přímo u produktu).
  • Doporučení: Doplnit a sjednotit parametry produktů (viz F-27) a zapnout filtrování podle Tloušťka, Povrch, Materiál spodní vrstvy, Délka, Hmotnost, Cena a Barva/motiv. Na mobilu tlačítko „Filtrovat (N)“ nahoře a stejné tlačítko jako sticky.
  • kritická · M · ADMIN (parametry a filtrování jsou nativní funkce Shoptetu)

F-12 Logika kategorií: duplicity a nesourodé zařazení

  • Co vidím: „Všechny typy podložek“ a „Podložky na jógu“ ukazují prakticky stejný sortiment. „Výprodej“ existuje dvakrát (/podlozky-na-jogu-vyprodej/ a /vyprodej-vse/). „Ručníky na jógu“ jsou podkategorie podložek. „Podložky na míru“ je v hlavním menu, ale jde o B2B službu s minimem 6 kusů. „Skleněné lahve“ a „Svíčky a tyčinky“ jsou každá samostatná hlavní položka se 4 až 5 produkty. Dárkový poukaz se objevuje v Podložkách i Pomůckách.
  • Proč je to problém: Menu se 7 položkami, z nichž 3 jsou malé a 1 je B2B, rozmělňuje pozornost. Duplicitní kategorie si navíc konkurují ve vyhledávání.
  • Doporučení: Nová struktura v kapitole 6: 5 nákupních položek plus „Pro lektory a studia“ a „Inspirace“. Duplicitní kategorie sloučit a přesměrovat 301.
  • vysoká · M · ADMIN

F-13 Dlaždice podkategorií mají identickou ikonu

  • Co vidím: Všech 9 podkategorií má stejný tyrkysový čtverec s lotosem (). Na mobilu jsou dlaždice pod sebou přes celou šířku a produkty začínají až na 3. obrazovce ().
  • Proč je to problém: Ikona nepomáhá rozlišit typ a zbytečně zabírá místo. Mobilní uživatel vidí 2 obrazovky navigace místo produktů.
  • Doporučení: Každé podkategorii dát výřez skutečné fotky (oválná, korková, cestovní složená…). Na mobilu z podkategorií udělat vodorovně posuvný pás „chipů“ v jednom řádku.
  • střední · S · ADMIN (obrázky kategorií) + CSS/JS

F-14 Horní lišta a patička míchají nákupní a B2B odkazy

  • Co vidím: Patička v 4 sloupcích verzálkami 10 až 11 px v šedé #8a8a8a () obsahuje „Chcete podložky a další vybavení na míru?“, „Získejte slevu pro lektory“, „Staňte se ambasadorem“, „Velkoobchodní spolupráce“ a poslední 3 články blogu. Magentové tlačítko „ARCHIV“ je jediný magentový prvek v patičce.
  • Proč je to problém: Text je téměř nečitelný (kontrast 3,45:1, minimum je 4,5:1) a sloupec „Užitečné informace“ je ve skutečnosti B2B. Chybí newsletter, platební ikony a odkaz na Heureku.
  • Doporučení: Patička ve 3 blocích: (1) Nakupování (Doprava a platba, Vrácení, Reklamace, Obchodní podmínky, Kontakt), (2) Pro lektory a studia (jeden odkaz na landing page), (3) Newsletter s pobídkou a sociální sítě. Pod tím platební a dopravní loga a hodnocení z Heureky. Text 14 px a kontrast nejméně 4,5:1.
  • střední · S · CSS/JS + ADMIN

3.4 Homepage

F-15 Pořadí sekcí neodpovídá nákupní cestě

  • Co vidím (desktop, ): Hero → 6 dlaždic kategorií → text „S námi se pohyb stává rituálem“ (vycentrovaný, 13 px, tučná slova náhodně) → 3 recenze → 6 velkých tyrkysových B2B/info bloků (lektor, na míru, blog, ambasador, velkoobchod, o nás) → „Doporučujeme“ s 24 produkty → patička. Na mobilu jsou B2B bloky až za produkty, takže každá verze má jiné pořadí.
  • Proč je to problém: Na desktopu jsou produkty až na 4. obrazovce () a mezi zákazníkem a zbožím stojí 6 bloků, které se ho netýkají (velkoobchod, ambasador). Seznam 24 produktů bez rozdělení (novinky, bestsellery, PRO) je na homepage příliš dlouhý a jednotvárný.
  • Doporučení: Nové pořadí v kapitole 7. B2B bloky sloučit do jednoho pruhu „Pro lektory a studia“ nad patičkou. Produkty rozdělit do 2 výběrů po 4 až 8 kusech (Nejoblíbenější, Novinky).
  • vysoká · M · ADMIN (bannery, pořadí) + CSS/JS

F-16 Dlaždice kategorií: dobrý nápad, zastaralé provedení

  • Co vidím: 6 fotek s tyrkysovým štítkem uprostřed (úzké verzálky se stínem) (). Fotky jsou z různých zdrojů: AI/stock (žena, děti) vedle produktových fotek (lahve, svíčky).
  • Proč je to problém: Štítek zakrývá střed fotky a stín textu působí levně. Nejednotné fotky oslabují značku. Popisky jsou navíc vypálené v obrázku (F-55) a 2 ze 6 dlaždic vedou na 404 (F-02).
  • Doporučení: Zachovat 6 dlaždic, ale popisek dát pod fotku nebo do levého dolního rohu bez stínu a všechny fotky sjednotit do jednoho stylu (vaše produkty, stejné světlo, teplé pozadí).
  • střední · S · ADMIN + CSS/JS

F-17 Recenze jsou skryté a malé

  • Co vidím: 3 recenze kurzívou 12 px (Zuzka, Jana, Míša) s poznámkou „Recenze jsou převzaty ze systému Heureka – Ověřeno zákazníky“ ().
  • Proč je to problém: Recenze fungují, ale v této velikosti je nikdo nepřečte. Chybí souhrnné číslo (hodnocení a počet recenzí).
  • Doporučení: Pruh „X,X/5 z N ověřených recenzí na Heurece“ a 3 krátké citace ve větším písmu, u každé název koupené podložky s odkazem na produkt.
  • vysoká · S · CSS/JS (+ DOPLNĚK pro automatický import recenzí)

F-18 Tyrkysové bloky: text 13 px se stínem, tlačítka 10 px

  • Co vidím: : nadpis se stínem, podnadpis 13 px, tlačítko „CHCI SLEVU“ s textem kolem 10 px na tmavším tyrkysu.
  • Proč je to problém: Nízký kontrast, stín a malé cíle kliknutí zhoršují čitelnost a přístupnost.
  • Doporučení: Viz F-15, sloučit do jednoho B2B pruhu.
  • střední · S · CSS/JS

3.5 Kategorie a výpis produktů

F-19 Produktové dlaždice nerozlišují produkty

  • Co vidím: Dlaždice obsahuje štítky (fialový „VERZE PROFI“, zelený „Novinka“, žlutý „Výprodej“), zelené „SKLADEM“ 11 px, název úzkým písmem, cenu 11 až 13 px a u variant textové odkazy „Béžová tmavě zelená lososová…“ (, ). Fotky podložek mají 3 různé styly: svislý „pilulkovitý“ render, plochý mockup a koláž (Podložky na míru).
  • Proč je to problém: Z dlaždice nejde poznat rozdíl mezi „Designová podložka … od 1 490 Kč“ a „Podložka … PRO 2 390 Kč“, tedy proč stojí o 900 Kč víc. Cena je nejmenší text na dlaždici. Úzký render podložky zabírá na desktopu kolem 15 % šířky dlaždice a zbytek je bílé místo.
  • Doporučení: Na dlaždici přidat 1 řádek klíčových parametrů („4 mm · PU + kaučuk · 2,6 kg“) a zvětšit cenu (16 px, tučně). Štítky sjednotit do jednoho stylu (1 barva, text). Druhý obrázek při najetí myší ukáže podložku v použití nebo detail povrchu. Barvy variant ukázat jako barevné tečky.
  • vysoká · M · CSS/JS + ADMIN

F-20 Výprodej bez přeškrtnuté ceny

  • Co vidím: Svíčka s krystaly se štítkem „Výprodej“ má cenu 190 Kč bez původní ceny a bez slevy v % (, ). Stejně je to ve výpisu /vyprodej-vse/.
  • Proč je to problém: Výprodej bez viditelné úspory nemotivuje. Pokud se sleva uvádí, musí podle směrnice Omnibus odkazovat na nejnižší cenu za 30 dní.
  • Doporučení: U produktů ve výprodeji vyplnit „Standardní cenu“ (Shoptet pak ukáže přeškrtnutí a % slevy) a zapnout zobrazení nejnižší ceny za 30 dní.
  • vysoká · S · ADMIN

F-21 Stránkování a „Načíst 15 dalších“

  • Co vidím: Pod výpisem je magentové obrysové tlačítko „Načíst 15 dalších“, vedle stránkování „1 › 2“ a tlačítko „Nahoru“ (, sheet 3). Pod tím se opakuje 6 dlaždic kategorií a 6 B2B bloků z homepage.
  • Proč je to problém: Magenta je další barva navíc a opakovaný blok z homepage prodlužuje stránku o 2 obrazovky bez užitku.
  • Doporučení: Ponechat „Načíst další“ (je to dobrý vzor), vybarvit ho do systému barev a opakované bloky z kategorií odstranit.
  • nízká · S · CSS/JS + ADMIN

F-22 Popisy kategorií

  • Co vidím: Krátký úvod nad výpisem se správně zvýrazněnými klíčovými slovy (, ).
  • Hodnocení: Funguje, zachovat. Doporučuji doplnit delší SEO text pod výpis (jak vybrat tloušťku a povrch, FAQ) s odkazem na článek „Nejlepší podložky na jógu“.
  • nízká · S · ADMIN

3.6 Produktový detail

F-23 Chybí recenze a hodnocení na produktu

  • Co vidím: Na detailu nejsou hvězdičky ani recenze a sekce „Diskuze“ je skrytá (). Strukturovaná data produktu neobsahují aggregateRating.
  • Proč je to problém: U podložky za 2 390 Kč zákazník chce vědět, jestli klouže a jestli nezapáchá. Konkurence zobrazuje hodnocení přímo pod názvem (: ★ 4,6 · 3 551 recenzí, : 798 recenzí). Hvězdičky ve výsledcích Googlu zvyšují proklik.
  • Doporučení: Zapnout hodnocení produktů v Shoptetu a importovat produktové recenze z Heureky (doplněk). Po nákupu posílat e-mail s výzvou k hodnocení konkrétní podložky.
  • vysoká · M · ADMIN + DOPLNĚK

F-24 Chybí termín doručení a informace o dopravě

  • Co vidím: Vedle ceny je jen „Skladem“ zeleně 13 px zcela vpravo ().
  • Proč je to problém: „Kdy to budu mít?“ a „Kolik zaplatím za dopravu?“ patří k nejčastějším důvodům odchodu z e-shopu. U podložky je odpověď pro vás výhodná (doprava zdarma), jen to zatím nikde nestojí.
  • Doporučení: Pod tlačítko „Přidat do košíku“ dát 3 řádky s ikonami: „Doručíme ve čtvrtek 24. 9. (objednejte do 14:00)“, „Doprava zdarma“ (nebo „Do dopravy zdarma zbývá …“), „Vrácení do X dní“. Shoptet umí zobrazit datum doručení podle dostupnosti.
  • vysoká · S · ADMIN + CSS/JS

F-25 Galerie: jen produktové rendery

  • Co vidím: GOLD PRO má 4 obrázky: podložku shora, rozloženou, srolovanou a v tašce, vše na bílém pozadí (). U polštáře jsou barevné varianty jako samostatné obrázky ().
  • Proč je to problém: Chybí měřítko (člověk na podložce), detail povrchu (textura, grip) a fotka v prostředí. Konkurence ukazuje produkt v použití () nebo detail vzoru ().
  • Doporučení: Pro každou řadu (ne každý design) nafotit sadu: podložka v použití, detail povrchu, tloušťka z boku, srolovaná s popruhem. Pořadí v galerii: produkt → v použití → detail → balení.
  • vysoká · L (focení) · ADMIN

F-26 Chybí doporučené doplňky (cross-sell)

  • Co vidím: Pod popisem produktu se opakuje 6 dlaždic kategorií z homepage a žádné „Hodí se k tomu“ nebo „Podobné podložky“ ().
  • Proč je to problém: Přirozené doplňky k podložce (ručník, bloček, pásek, sprej na čištění) zvyšují průměrnou objednávku. Yogashop nabízí doplněk rovnou u tlačítka košíku (: „Přidat Bio čistič podložek … 249 Kč“).
  • Doporučení: Vyplnit „Související produkty“ (doplňky) a „Alternativní produkty“ (podobné podložky) a zobrazit je pod tlačítkem košíku i pod popisem. Opakované dlaždice kategorií odstranit.
  • vysoká · S · ADMIN

F-27 Chyby v tabulce parametrů

  • Co vidím: U GOLD PRO je „Barva: zelená“ u modré podložky se zlatým vzorem, „Hmotnost“ je uvedená dvakrát, „Rozměr 185 × 68 cm“ i zvlášť „Délka“ a „Šířka“ a nesmyslný parametr „Podložky na jógu: ANO“ (, ).
  • Proč je to problém: Chyby snižují důvěru a zároveň znemožňují kvalitní filtrování (F-11).
  • Doporučení: Jednorázově projít parametry všech 65 podložek: Tloušťka, Délka, Šířka, Hmotnost, Povrch, Spodní vrstva, Barva, Motiv, Vhodné pro. Parametr „Podložky na jógu: ANO“ smazat.
  • vysoká · M · ADMIN

F-28 Výběr varianty: textové štítky a chybový vzhled

  • Co vidím: Barvy polštáře jsou textová tlačítka „Béžová / tmavě zelená / lososová / petrolejová“. Na mobilu mají červený obrys, který vypadá jako chyba ještě před výběrem (). Po kliknutí na košík bez výběru se objeví jen šedé „Zvolte variantu“ (). Axe hlásí chybějící label u pole varianty.
  • Proč je to problém: U barvy chce zákazník vidět barvu, ne číst slovo. Červená působí jako chyba.
  • Doporučení: Barevné kroužky s popiskem, výběr přepne hlavní fotku (F-58), výchozí stav neutrální a chyba až po pokusu o přidání do košíku.
  • střední · M · CSS/JS (Shoptet umí obrázky u hodnot parametrů)

F-29 Hierarchie oblasti ceny a tlačítka

  • Co vidím: Cena 2 390 Kč regular řez, počítadlo množství s magentovým −/+, tlačítko „PŘIDAT DO KOŠÍKU“ bílým textem na #63918B (kontrast 3,52:1, nesplňuje WCAG AA) a „Skladem“ úplně vpravo (). Na desktopu je tlačítko těsně nad spodní hranou obrazovky, na mobilu až pod první obrazovkou ().
  • Proč je to problém: Nejdůležitější akce stránky je vizuálně slabá. Tři různé barvy (šedá, magenta, tyrkys) v jednom řádku odvádějí pozornost.
  • Doporučení: Pořadí: název → hodnocení → cena (tučně 24 až 28 px) → výběr varianty → tlačítko přes celou šířku v tmavším odstínu (#3F6E68, kontrast 5,6:1) → dostupnost a doručení. Ikony (eco apod.) přesunout pod tlačítko. Na mobilu po odscrollování tlačítka zobrazit spodní sticky lištu s cenou a tlačítkem.
  • vysoká · M · CSS/JS

F-30 Ikony vlastností ve stylu klipartu

  • Co vidím: 4 ikony „ECO přírodní kaučuk / Neprokluzuje / Ekologické barvy / Dodáváme s popruhem“ ve 4 různých stylech (3D list, šedý render, zelený kruh, linkový obrys) ().
  • Proč je to problém: Nejednotné ikony působí amatérsky, i když sdělení je dobré.
  • Doporučení: Nahradit jednotnou sadou linkových ikon (např. Phosphor Light, 1,5 px) v barvě značky s popiskem 13 px.
  • střední · S · CSS/JS

F-31 Popis produktu: zarovnání a rozsah

  • Co vidím: Popis zarovnaný do bloku s velkými mezerami mezi slovy na mobilu (). Odrážky v úvodu jsou vycentrované, zatímco tečky zůstávají vlevo (). Blok „Potřebujete poradit?“ zobrazuje sociální sítě jako „yoggspiration/“ (koncovka URL místo názvu).
  • Proč je to problém: Čitelnost a dojem neúplné práce. Obsah popisu je jinak kvalitní.
  • Doporučení: Text zarovnat vlevo (text-align:left) a odrážky také vlevo. Místo „yoggspiration/“ psát „@yoggspiration“, případně připojit fotku Vandy s textem „Poradím vám s výběrem – Vanda, lektorka jógy“.
  • střední · S · CSS/JS

F-32 Podložky na míru jako běžný produkt s tlačítkem košíku

  • Co vidím: Nadpis „Podložky na míru - pro výslednou cenu nás kontaktujte“, cena 1 400 Kč, dostupnost „Na dotaz“, tlačítko „Přidat do košíku“ a v textu „Minimální množství 6 ks“ (). Stejná dlaždice je mezi „Doporučujeme“ na homepage.
  • Proč je to problém: B2C zákazník může produkt přidat do košíku za 1 400 Kč a pak zjistí minimum 6 ks. Dlaždice s koláží fotek mezi podložkami působí jako chyba.
  • Doporučení: Z produktu udělat landing page „Podložky s vaším logem“ v sekci Pro lektory a studia s poptávkovým formulářem a referencemi (studio LEMON apod.) a vyřadit ho z výpisů.
  • střední · S · ADMIN

3.7 Vyhledávání

F-33 Našeptávač funguje, ale je úzký

  • Co vidím: Po napsání „podlo“ se ukáže kategorie, články i produkty s cenou (), což je dobré. Panel je ale široký asi 100 px a obrázky jsou malé.
  • Doporučení: Rozšířit panel na 480 px, produkty dát nahoru a zvětšit náhledy. Při prázdném poli nabídnout „Oblíbená hledání“.
  • nízká · S · CSS/JS

F-34 Dotaz bez výsledku vrací nerelevantní poukaz

  • Co vidím: Pro „legíny“ (neprodáváte) vyhledávání vrátí jediný výsledek „Dárkový poukaz“ (, ).
  • Proč je to problém: Nerelevantní výsledek mate, protože zákazník neví, jestli legíny máte.
  • Doporučení: Pro prázdný výsledek připravit stránku „Legíny zatím nemáme. Podívejte se na…“ s odkazy na bestsellery a kontakt. Upravit popis poukazu, aby nezachytával obecná slova.
  • nízká · S · ADMIN (popisy) + CSS/JS

3.8 Košík a pokladna

F-35 Nabídka výdejních boxů, do kterých se podložka nevejde

  • Co vidím: Nad výběrem dopravy je červené upozornění „Podložka na jógu se bohužel rozměry nevejde do výdejních boxů. Pro doručení do výdejního místa je nutné zvolit KAMENNOU VÝDEJNU.“ Přesto jsou v nabídce „PPL – výdejní místa a boxy“ i „Zásilkovna – výdejní místa a boxy“ ().
  • Proč je to problém: Zákazník musí číst varování a sám si hlídat, co vybere. Chyba znamená vrácenou zásilku a náklady navíc.
  • Doporučení: U kategorie podložek zakázat přepravce, kteří doručují do boxů, nebo v nastavení Zásilkovny/PPL vypnout boxy (lze filtrovat typ výdejního místa). Varování pak může zmizet.
  • vysoká · S · ADMIN

F-36 Košík bez motivačních prvků

  • Co vidím: Košík obsahuje tabulku s jedním produktem, pole „Chci využít slevový poukaz“ a vpravo kontakty a „Pokračovat k platbě“ (). Po přidání produktu se objeví jen tenká tyrkysová lišta nahoře „Produkt byl přidán do nákupního košíku“ ().
  • Proč je to problém: Chybí potvrzení s náhledem produktu, nabídka doplňků („Ručník k podložce za 690 Kč“) a důvěryhodnostní prvky. Tlačítko „Pokračovat k platbě“ vede ve skutečnosti na výběr dopravy.
  • Doporučení: Po přidání otevřít boční panel s produktem, tlačítky „Do košíku“ a „Pokračovat v nákupu“ a 2 až 3 doplňky. V košíku pruh „Hodí se k vaší podložce“ a pod souhrnem ukazatel dopravy zdarma a ikony „Bezpečná platba · Vrácení do X dní“. Tlačítko přejmenovat na „Pokračovat k dopravě“.
  • vysoká · M · ADMIN (nastavení po přidání do košíku) + DOPLNĚK (upsell v košíku)

F-37 Úzký souhrn objednávky se souhlasy

  • Co vidím: V kroku 3 jsou v úzkém pravém sloupci 3 zaškrtávátka (obchodní podmínky, dotazník Zboží.cz, dotazník Ověřeno zákazníky) zalomená skoro po slovech (, ).
  • Proč je to problém: Text je těžko čitelný. Povinný souhlas s podmínkami se ztrácí mezi volitelnými.
  • Doporučení: Rozšířit pravý sloupec (min. 360 px) nebo souhlasy přesunout pod formulář. Tlačítko „Objednat s povinností platby“ ponechat, je správně.
  • střední · S · CSS/JS

F-38 Co v pokladně funguje (zachovat)

  • Tři jasně pojmenované kroky, souhrn objednávky, platby bez poplatku, 6 způsobů dopravy včetně osobního odběru, rychlé platby (Apple/Google Pay), inline validace e-mailu a telefonu se srozumitelnou hláškou () a nákup bez registrace. Minimalistická hlavička pokladny bez menu je správná.

3.9 Mobil

F-39 Mobil je jen zmenšený desktop

  • Co vidím: Kompaktní hlavička se 4 ikonami () je v pořádku. Horší je zbytek: produkty v kategorii jsou až na 3. obrazovce () a na produktu je cena a tlačítko až na 2. obrazovce (). Tlačítko košíku nezůstává viditelné, filtry chybí, v menu nejsou podkategorie a zavírací tlačítko menu je magentový kruh (). Menu míchá odsazení (kategorie odsazené, „Měna“ a „Přihlášení“ zarovnané vlevo).
  • Proč je to problém: Většina návštěv e-shopů s jógovým vybavením je z mobilu. Každá obrazovka navíc před produktem nebo tlačítkem košíku stojí konverze.
  • Doporučení: (1) Sticky tlačítko košíku na produktu, (2) podkategorie jako vodorovné chipy, (3) filtr jako vysouvací panel se sticky tlačítkem, (4) menu s rozbalovacími podkategoriemi a fotkami, (5) hero max. 60 % výšky. Na produktu jen jedna velká fotka s náznakem další (swipe), bez řady náhledů pod ní.
  • vysoká · M · CSS/JS

F-40 Výkon na mobilu

  • Co vidím (Lighthouse, mobil, simulované 4G):
Stránka Výkon LCP TBT FCP Speed Index CLS Přenos
Homepage 34 8,8 s 1 200 ms 3,9 s 12,0 s 0,012 4,1 MB
Kategorie 39 23,8 s 1 040 ms 4,6 s 6,0 s 0,042 4,2 MB
Produkt 34 28,5 s 1 200 ms 4,9 s 7,9 s 0 4,2 MB

Z celkových 4,2 MB stažených dat připadá 2,9 MB na 37 kusů JavaScriptu, z toho 2,2 až 2,4 MB na měřicí kódy Googlu. Prohlížeč se jimi musí prokousat dřív, než vykreslí stránku, a zabere mu to zhruba vteřinu. Hlavní obrázek na úvodní stránce je stažený za 0,6 vteřiny, ale zobrazí se až po 7,4 vteřinách, protože čeká na měřicí skripty a na styly. Jen tímhle čekáním se dá ušetřit až 2,4 vteřiny.

  • Proč to řeším: Google hodnotí Core Web Vitals z mobilu a LCP nad 4 s je „špatné“. Každá sekunda navíc snižuje konverzi, a protože většina návštěv chodí z mobilu, platí se to na každé objednávce.
  • Co je dané Shoptetem: Z celkových 4,2 MB připadá asi 1,3 až 1,5 MB na vlastní kód Shoptetu (jQuery, hlavní JS a CSS šablony). To zůstane. Zbytek, tedy přes 2,3 MB, jsou kódy, které si na e-shop nasadil někdo z vás, a ty jdou pryč.
  • Doporučení: (1) Uklidit tracking (F-03), což odhadem ušetří 1,5 až 2 MB a většinu TBT. (2) Facebook SDK (connect.facebook.net/cs_CZ/sdk.js, načítá se pro sociální plugin) odstranit. (3) Font Yanone Kaffeesatz načítat jen v použitých řezech, případně nahradit (kapitola 5). (4) Vlastní JS (jkbase.js, yoggspiration.js, script.js, script-variants.js) načítat s defer. Obrázky jsou v pořádku, protože CDN Shoptetu posílá WebP.
  • kritická · M · CSS/JS + ADMIN

3.10 Důvěra a značka

F-41 Příběh zakladatelky je schovaný

  • Co vidím: Stránka O nás má fotku Vandy a osobní text („Ahoj, jsem Vanda… Každý produkt vybírám tak, jako bych ho vybírala pro sebe nebo své studenty“) (). To je výborné. Hlavní banner stránky je ale stock fotka lekce s tyrkysovým štítkem, text je vycentrovaný 13 px a pod ním je formulář „Chcete se stát naším velkoobchodním partnerem?“ (zkopírovaný z B2B stránky, formulářová pole jsou posunutá).
  • Proč je to problém: Osobnost majitelky je nejsilnější diferenciace oproti Yogashopu i Yoggys. Návštěvník ji teď musí hledat přes horní lištu.
  • Doporučení: (1) Blok „Kdo za tím stojí“ s fotkou Vandy a 2 větami na homepage, (2) mini-podpis „Vybrala Vanda, lektorka jógy“ na produktovém detailu, (3) O nás přepracovat: fotka Vandy jako hero, příběh, jak vznikají designy, fotky z výroby a studia, B2B formulář odstranit.
  • vysoká · M · ADMIN + CSS/JS

F-42 Chybí garance a transparentnost

  • Co vidím: Nikde se viditelně neuvádí lhůta pro vrácení, garance kvality ani původ a výroba podložek (kde se tisknou, z čeho jsou barvy). Provozovatel „Bespoke Solutions s.r.o., Lysá nad Labem“ je jen na stránce Kontakty ().
  • Doporučení: Stránka „Jak vznikají naše podložky“ (materiály, certifikace barev, pokud existují, balení bez plastu?) a garance „Nesedí vám podložka? Do 30 dnů ji vyměníme“ (rozhodne majitelka).
  • střední · M · ADMIN

3.11 Obsah a SEO

F-43 Title a description

  • Co vidím: Kategorie a produkty mají dobré ručně psané title a description. Chyby jsou jinde: stránka O nás má title jen „O nás“ a description začíná překlepem „oznejte příběh značky…“. Kontakty a Doprava a platba mají automatické description „Kontakty, YOGGSPIRATION“. Na kategoriích jsou v description emoji (🌿🧘‍♀️), což je v pořádku, ale nepoužívá se to jednotně.
  • Doporučení: Opravit title O nás („O nás – Vanda a příběh YOGGSPIRATION“), překlep v description a doplnit description u servisních stránek.
  • střední · S · ADMIN

F-44 Struktura nadpisů

  • Co vidím: Homepage má H1 „S námi se pohyb stává rituálem“ uprostřed stránky (hero nadpis „PODLOŽKY NA JÓGU“ je obrázek/banner). Blog a O nás mají H1 skrytý (sr-only). V patičce jsou nadpisy H3 a na produktu nadpisy přeskakují úroveň (axe heading-order). Doprava a platba má 5 prázdných nadpisů (axe empty-heading).
  • Doporučení: H1 na homepage v hero („Designové podložky na jógu“). Na blogu a O nás viditelný H1. Prázdné nadpisy v textu Doprava a platba odstranit (vznikly vložením z Wordu, třída .western).
  • střední · S · ADMIN + CSS/JS

F-45 Strukturovaná data

  • Co vidím: Produkt má microdata Product, Offer, OfferShippingDetails, Brand a sku, drobečková navigace má BreadcrumbList a web WebSite a Organization. Chybí aggregateRating/review a gtin.
  • Doporučení: Po zapnutí hodnocení (F-23) se aggregateRating doplní automaticky. Doplnit EAN, pokud existuje. Zvážit FAQPage u průvodce výběrem.
  • střední · S · ADMIN

F-46 Alt texty obrázků

  • Co vidím: Chybějící alt je jen 1 (O nás). U každé stránky má ale 19 obrázků prázdný alt "" (hlavně ikony a dekorace, to je správně) a produktové fotky mají generické alty („podložka na cvičení gold“). U bannerů neodpovídají: banner Tašek má alt „Pomucky“ a banner Pomůcek „Veganské svíčky“.
  • Doporučení: Opravit alt bannerů a u produktů používat „Podložka na jógu GOLD PRO – modrá se zlatým květinovým vzorem“.
  • nízká · S · ADMIN

F-47 Blog: dobrý obsah, slabé propojení s prodejem

  • Co vidím: Články (Plný jógový dech, Jóga tváře, Aromaterapie, Nejlepší podložky 2025) mají kvalitní text a doplněk „blog-products“ vkládá produkty do článků (), což je dobře. Výpis blogu začíná stock fotkou s tyrkysovým štítkem a H1 je skrytý ().
  • Doporučení: Blog přejmenovat na „Inspirace“, u výpisu použít mřížku s náhledem a perexem a články propojit s kategoriemi (průvodce výběrem podložky je potenciálně nejsilnější SEO stránka webu).
  • nízká · M · ADMIN + CSS/JS

3.12 Přístupnost (WCAG 2.2 AA)

F-48 Nedostatečný kontrast v celém webu

  • Co vidím: Automatický test přístupnosti (axe-core) našel chyby v kontrastu na každé stránce (homepage 39, kategorie 78, podkategorie 66, produkt 24 až 29, obsahové stránky 16 až 18). Hlavní zdroje:
    • šedá #8a8a8a na bílé (drobečková navigace, řazení, patička) 3,45:1
    • zelená „SKLADEM“ #009901 v 11 px 3,77:1
    • bílý text na tlačítku „Přidat do košíku“ #63918B 3,52:1
    • bílý text na magentovém tlačítku #ED0984 4,22:1
  • Doporučení: Ztmavit šedou na #6B6B6B (5,3:1), zelenou dostupnost na #1E7B34 a písmo 13 px, tlačítko na #3F6E68 a magentu z UI úplně vyřadit (viz kapitola 5).
  • vysoká · S · CSS/JS

F-49 Malé písmo a malé dotykové cíle

  • Co vidím: Na homepage je 39 textových prvků pod 14 px a 23 pod 12 px (štítky, dostupnost, patička). Na kategorii je 81 prvků pod 14 px. Na desktopu má 24 až 34 odkazů na stránku rozměr pod 24 × 24 px (WCAG 2.2 kritérium 2.5.8). Na mobilu je 37 až 64 cílů pod doporučených 44 px (např. varianty barev 61 × 18 px, drobečková navigace 27 × 17 px).
  • Doporučení: Minimální velikost textu 13 px (štítky) a 15 až 16 px (text), odkazy v patičce a varianty s výškou min. 44 px na mobilu.
  • střední · S · CSS/JS

F-50 Ostatní

  • Duplicitní main landmark na homepage, obsah mimo landmarky (axe region), odkaz „Přejít na obsah“ existuje (dobře). aria-allowed-role na mobilu (3×), chybějící label u výběru varianty.
  • nízká · S · CSS/JS

3.13 Detaily provedení: co kazí dojem z blízka

Tahle část vznikla z druhého kola, kdy jsem web měřil v prohlížeči (skutečné rozměry prvků, ne odhad z obrázku). Jsou to věci, kterých si zákazník vědomě nevšimne, ale dohromady dělají rozdíl mezi „amatérsky slepené“ a „profesionálně udělané“.

F-54 Fixní hlavička ubírá 240 px, tedy 27 % obrazovky

  • Co vidím: Horní lišta (49 px) i hlavička s logem a menu (198 px) mají position: fixed, takže po odscrollování zůstávají na místě a trvale zabírají 240 px z 900 (). Na obsah zbývá 660 px. Logo sedí na samostatném řádku nad menu, přestože vedle menu je 300 px volného místa.
  • Proč to řeším: Na běžném notebooku (výška okna kolem 750 px) zbývá pod hlavičkou jen asi 510 px, takže z produktové stránky je vidět fotka a kus názvu, ale ne cena ani tlačítko. Návštěvník musí scrollovat dřív, než se dozví to hlavní, a na každé další stránce se to opakuje.
  • Doporučení: Jednořádková hlavička: logo vlevo, menu uprostřed, hledání a košík vpravo, celkem kolem 80 px. Při scrollování ji volitelně ještě zmenšit na 64 px. Horní lištu s odkazy nahradit lištou výhod (F-06).
  • vysoká · M · CSS/JS (rozložení hlavičky v Classic je v šabloně, ale přeskládat ho jde vlastním CSS; jistější je to při případné výměně šablony) ·

F-55 Nadpisy i tlačítka jsou vypálené do obrázků

  • Co vidím: Hlavní banner je JPG 1920×1080 (soubor se jmenuje u__vodni___stra__nka_na__vrh_250kb.jpg, CDN posílá WebP o 344 KB) a nadpis „PODLOŽKY NA JÓGU“ i podtitul jsou namalované uvnitř fotky. Zvětšenina ukazuje měkké hrany a kompresní šum kolem písmen, zatímco stejný font vykreslený prohlížečem je ostrý (). Stejně jsou řešené popisky všech šesti dlaždic kategorií (PNG 800×800) a hlavně všech šest tyrkysových bloků „Jste lektor jógy?“, „Chcete podložky na míru?“, „Náš blog“…, kde je uvnitř obrázku i tlačítko „CHCI SLEVU“ (). Tři z těchto bloků mají zdroj 600×300 px, tři jen 400×200 px, ale všechny se zobrazují v 446×223 px, takže polovina z nich je roztažená o 11 %. Všech šest má navíc alt text „Banner Image“.
  • Proč to řeším: (1) Displeje s vyšší hustotou (každý dnešní telefon, MacBook) potřebují dvojnásobné rozlišení, takže text uvnitř fotky je na nich vždy měkký, i kdyby byla komprese sebelepší. (2) Tlačítko, které je jen namalované, nemá stav po najetí myší ani focus pro klávesnici a nejde zvětšit. (3) Google text v obrázku nepřečte, takže o nabídku pro lektory ani o klíčová slova v hero přicházíte v hledání. (4) Na mobilu se obrázek zmenší i s textem, proto je písmo v blocích na telefonu drobné. (5) Každá změna ceny nebo textu („sleva 50 %“) znamená úpravu v grafickém programu, ne přepsání věty v administraci.
  • Doporučení: Fotku nechat jako pozadí a text i tlačítko napsat v HTML nad ní. U šesti dlaždic kategorií i u B2B bloků stačí jeden HTML blok s obrázkem na pozadí, nadpisem, popiskem a odkazem stylizovaným jako tlačítko. Jako vedlejší efekt se dá text kdykoli přepsat, přeloží se do slovenštiny a zmizí problém s rozmazáním.
  • vysoká · M · CSS/JS (bannery v administraci umí jen obrázek a odkaz, HTML blok se dá vložit přes Vzhled a obsah) · ,

F-56 Sekce homepage stojí na dvou různých mřížkách

  • Co vidím: Dlaždice kategorií začínají 35 px od levého okraje, končí 35 px od pravého a mají mezi sebou 20px mezeru. Bloky pro lektory a velkoobchod hned pod nimi začínají na 45 px, končí na 58 px od pravého okraje a nemají mezi sebou žádnou mezeru, takže se dotýkají (). Dlaždice jsou čtvercové (443×443), bloky mají poměr 2:1 (446×223) a jiný poloměr zaoblení.
  • Proč to řeším: Přesně tohle vyvolává dojem „rozházeného“ webu, i když si nikdo nedokáže říct proč. Oko srovnává svislé hrany a tady se levý okraj mezi sekcemi posune o 10 px a pravý o 23 px. Sekce pak působí, jako by každá vznikla jindy a jinde.
  • Doporučení: Jedna šířka obsahu (např. 1 280 px) a jedna mezera (24 px) pro všechny sekce homepage, kategorie i produktu, jeden poloměr zaoblení. Jde o pár řádků CSS, ale je to jedna z nejvíc znatelných změn na celém webu.
  • vysoká · S · CSS/JS ·

F-57 Patička zabírá 596 px, tedy dvě třetiny obrazovky, pro 22 odkazů

  • Co vidím: Čtyři sloupce, výška 596 px z 900 (). Odkazy jsou verzálkami ve velikosti 10 až 11 px v šedé #8a8a8a, ale v patičce se míchají čtyři různé velikosti písma (22, 17, 15 a 14 px). Tři nadpisy článků z blogu jsou zároveň formátované jako nadpisy H3 a H4. Jediný magentový prvek je tlačítko „ARCHIV“.
  • Proč to řeším: Patička je poslední věc, kterou zákazník vidí, a měla by odpovídat na „kde to reklamuju“ a „komu volám“. Teď musí projít půl obrazovky nečitelných verzálek. Nadpisy H3 a H4 v patičce navíc zamotávají strukturu stránky pro vyhledávače (F-44).
  • Doporučení: Dva řádky místo čtyř sloupců: nahoře Nakupování / Pro lektory a studia / Kontakt a newsletter, dole logotyp, platební loga a copyright. Jedna velikost písma (14 px), normální řez místo verzálek, kontrast aspoň 4,5:1. Odhadem ušetří 250 px výšky.
  • střední · S · CSS/JS + ADMIN ·

F-58 Výběr varianty nezmění fotku ani název

  • Co vidím: U skleněné lahve PURE ENERGY se vybírá ze čtyř krystalů (Obsidián, Aventurín, Růženín, Ametystový křemen) barevnými kolečky. Po kliknutí na kterékoli z nich se nezmění hlavní fotka, název ani cena (). V galerii žádná fotka jednotlivých krystalů není. Nadpis navíc říká „PURE ENERGY - STŘÍBRNÁ“, což je barva víčka, ne vybraný krystal, takže není jasné, co se vlastně vybírá. Název krystalu se ukáže jen jako bublina po najetí myší, což na dotykovém displeji nefunguje.
  • Proč to řeším: Zákaznice kupuje lahev kvůli konkrétnímu kameni (růženín a ametyst mají v této kategorii úplně jiný význam pro kupujícího) a nemá šanci vidět, jak vybraná varianta vypadá. To je přesně moment, kdy nákup odloží. Stejný problém má meditační polštář a polštářek na oči, kde se vybírá barva textilie.
  • Doporučení: Ke každé variantě přiřadit v administraci vlastní fotku (Shoptet ji po výběru automaticky přepne), vedle koleček zobrazit název vybrané varianty textem a název produktu opravit tak, aby nekolidoval s výběrem. U barev nechat kolečko, ale doplnit popisek pod něj.
  • vysoká · M · ADMIN (fotky k variantám) + CSS/JS (popisek vybrané varianty) ·

F-59 Výběr dopravy a platby je opticky křivý

  • Co vidím (změřeno v prohlížeči): Řádky mají různou výšku: 101, 100, 87, 98, 79 a 79 px. Název dopravy začíná u řádků s logem na 267 px, u řádků bez loga na 156 px, takže text ve sloupci „uskakuje“ o 111 px. Cena „ZDARMA“ je větší (19 px, tučně) než samotný název metody (14 px) a u řádků s logem leží o 35 až 48 px níž než název, zatímco u řádků bez loga je na stejné lince. Loga přepravců mají různou velikost (PPL 80×40, Zásilkovna 80×27). Přepínač je o 9 px nad osou názvu ().
  • Proč to řeším: Pokladna je místo, kde zákazník rozhoduje o penězích, a nepořádek v ní podvědomě snižuje důvěru. Tady navíc ztěžuje samotné porovnání: oko hledá cenu vedle názvu a místo toho ji najde o půl řádku níž, pokaždé jinde.
  • Doporučení: Jeden CSS grid pro řádek: pevný sloupec pro přepínač, sloupec 88 px pro logo (loga sjednotit na stejnou výšku), pružný sloupec pro název a popis, pevný sloupec vpravo pro cenu, vše svisle vystředěné na jednu osu. Jednotná výška řádku (asi 72 px) a název metody o stupeň větší než cena.
  • Co je dané Shoptetem: HTML pokladny měnit nejde, ale všechny tyhle prvky jsou v div.radio-wrapper a dají se srovnat vlastním CSS. Není potřeba Premium.
  • vysoká · S · CSS/JS ·

F-60 Tlačítka nemají jednotný jazyk

  • Co vidím: Na webu jsou vedle sebe čtyři různé druhy tlačítek: tyrkysová vyplněná „pilulka“ (Přidat do košíku), magentová vyplněná pilulka (ARCHIV v patičce, Zpět do obchodu na 404), magentové obrysové tlačítko (Načíst 15 dalších) a tlačítka, která jsou jen namalovaná uvnitř obrázku (CHCI SLEVU, ZAJÍMÁ MĚ TO). K tomu drobné tmavě tyrkysové tlačítko uvnitř bloků s textem kolem 10 px.
  • Proč to řeším: Zákazník se učí, jak vypadá „věc, na kterou se kliká“. Když má web čtyři odpovědi, musí u každé zvlášť přemýšlet. Navíc ty nejdůležitější akce (přidat do košíku) vypadají stejně výrazně jako odkaz do archivu blogu.
  • Doporučení: Tři úrovně a nic víc: hlavní akce (plná, tmavší tyrkys kvůli kontrastu, viz F-48), vedlejší akce (obrysová v téže barvě) a textový odkaz s podtržením. Magentu z tlačítek vypustit, tlačítka v obrázcích nahradit skutečnými (F-55).
  • střední · S · CSS/JS

3.14 Vizuální identita (souhrn)

F-51 Typografie

  • Co vidím: Nadpisy, menu i tlačítka jsou v Yanone Kaffeesatz (úzký „plakátový“ font, často se stínem), text v Raleway, šablona má nastavené nadpisy v Roboto a logo ještě v jiném písmu. Verzálky jsou v tlačítkách, štítcích i patičce.
  • Proč je to problém: Úzké verzálky se stínem jsou typickým znakem webů z let 2014 až 2017. Raleway v malých velikostech (11 až 13 px) špatně čte čísla (cena „2 390 Kč“ má netypické číslice).
  • Doporučení: Dvě písma s jasnou rolí (návrh v kapitole 5). Verzálky jen u malých štítků s prostrkáním. Stíny textu odstranit.

F-52 Barvy

  • Co vidím: Šablona: primární #5B4856 (švestková), sekundární #63918B (tyrkysová). Navíc magenta #ED0984 (tlačítka ARCHIV, Zpět do obchodu, ikony e-mailu, zavření menu, +/−), fialová (štítek VERZE PROFI), zelená (Novinka, Skladem), žlutá (Výprodej), modrá (Heureka widget) a barevné logo.
  • Proč je to problém: Sedm konkurenčních barev v UI se tluče s barevnými designy podložek, které by měly být hlavní „barvou“ webu.
  • Doporučení: Neutrální teplý základ, jedna akcentová barva (tyrkys v tmavším odstínu) a jedna signální pro slevy. Viz kapitola 5.

F-53 Fotografie

  • Co vidím: Tři světy: AI/stock lifestyle (hero, dlaždice, bannery O nás a Blog), produktové rendery na bílém (podložky) a amatérské fotky (koláž Podložky na míru). Chybí vlastní lifestyle focení.
  • Doporučení: Jedno focení v jednotném stylu (kapitola 5) jako podklad pro hero, kategorie a produkty. Je to investice, která zlepší všechny ostatní etapy.

4. Srovnání s konkurencí

Screenshoty: screenshots/benchmark/{web}-{desktop|mobile}-{home|produkt}[-full].png. Cookie lišty konkurence se automaticky zavřít nepodařilo (anglická i česká tlačítka se liší), proto jsou vidět ve screenshotech, což je zároveň doklad, že je všichni zobrazují.

E-shop Co dělá lépe Co převzít
Yoggys.cz (CZ, přímý konkurent – designové podložky) Čistá bílá hlavička s centrovaným menu a rozbalovacím „PODLOŽKY ▾“, na produktu „Je pro mě tato podložka vhodná?“ jako odkaz na průvodce, štítek „Podložka z mikrovlákna přenosná“ nad názvem () Odkaz na průvodce přímo u produktu, štítek typu/materiálu nad názvem, výrazná akce s kódem v horní liště
Yogainstyle.cz (CZ, designové podložky + oblečení) Lišta výhod v hlavičce („Doprava zdarma při nákupu nad 2000 Kč“, „Zákaznická podpora“), výběr povrchu a tloušťky jako variant jednoho produktu, přeškrtnutá cena a štítek „SLEVA 70 %“, „Poslední kusy skladem“ () Lišta výhod, varianty povrch/tloušťka u jednoho designu místo dvou produktů, viditelná sleva a nedostatek
Yogashop.cz (CZ, největší specialista) Zelená identita s jasnou navigací a ikonami výhod (30 dní na vrácení, kamenný obchod, testovací centrum), na produktu nabízí doplněk přímo u tlačítka košíku („Přidat Bio čistič podložek … 249 Kč“), drobečková navigace a spolupráce s ilustrátorkou u designu () Doplněk u tlačítka košíku, příběh autora designu u produktu, ikony výhod
Liforme.com (UK, prémiový design) Hvězdičky a počet recenzí pod názvem (798), „Customer-Favourite Design“, barevné kroužky variant, 3 platební cesty (Shop Pay, Klarna), lifestyle fotky v galerii a „Yoga Mat Guide“ () Hodnocení u názvu, barevné kroužky variant, fotky v použití, průvodce výběrem
Manduka.com (US, lídr kategorie) Mega menu podle typu (Yoga Mats, Fitness Mats, Hot Yoga Towels…), na produktu ★ + 3 551 recenzí, výběr barvy jako fotky, výběr velikosti, „Limited Edition“ sekce, velké čtvercové fotky ve mřížce 2×2, kontextová nápověda u varianty („Practicing in a heated space?…“) () Mřížka velkých fotek na desktopu, kontextová nápověda k výběru, členění podle použití

Kde je YOGGSPIRATION napřed: osobní příběh lektorky (žádný CZ konkurent nemá tak jasnou tvář) a vlastní, neokoukané designy.

Společný vzor u nejlepších: (1) výhody viditelné do 1 vteřiny, (2) hodnocení u názvu produktu, (3) varianty jako vizuální výběr, (4) fotka produktu v použití, (5) jedna akcentová barva.

5. Návrh vizuálního směru

Tři varianty. Všechny počítají s tím, že barvu webu dodávají designy podložek, takže UI zůstává klidné. Fonty jsou z Google Fonts s podporou češtiny (latin-ext) a lze je nasadit vlastním CSS v šabloně Classic.

Varianta A: „Klidná praxe“ (doporučená)

Varianta B: „Barevná energie“

Varianta C: „Studiový minimalismus“

Doporučení: Varianta A. Zákaznice YOGGSPIRATION jsou pravděpodobně ženy 25 až 45 let, které cvičí doma nebo ve studiu a oceňují estetiku a ekologii (potvrdí data z GA). Hledají důvěru a radu („která podložka je pro mě?“), ne módní šok. A je nejrealističtější: dá se nasadit postupně vlastním CSS a pracuje s existujícími fotkami, dokud nevzniknou nové.

6. Návrh nové informační architektury

HLAVNÍ MENU (desktop mega menu / mobil rozbalovací)
├── Podložky na jógu
│   ├── Podle typu: Designové · Protiskluzové PRO · Oválné · Cestovní (lehké) · Korkové · Dětské
│   ├── Podle potřeby: Pro začátečníky · Na dynamickou jógu a hot · Na cesty · Pro citlivé klouby (silnější)
│   └── ► Jak vybrat podložku (průvodce) · Srovnání Designová vs. PRO
├── Pomůcky
│   └── Bločky · Pásky · Yoga wheel · Meditační polštáře a bolstery · Podložky pod kolena · Ručníky · Protiskluzové ponožky
├── Tašky a obaly
├── Relax a rituály
│   └── Svíčky · Vonné tyčinky · Polštářky na oči · Skleněné lahve s krystalem
├── Dárky
│   └── Dárkové poukazy · Dárky do 500 Kč · Dárky do 1 500 Kč · Sety
├── Výprodej (jedna kategorie)
│
├── Pro lektory a studia   ← samostatná landing page
│   └── Sleva 50 % pro lektory · Podložky s vaším logem (na míru) · Velkoobchod · Ambasadorský program
└── Inspirace (blog)

HORNÍ LIŠTA → lišta výhod (doprava zdarma od X Kč · odeslání · hodnocení · vrácení)
UTILITY (vpravo v hlavičce): Hledat · Účet · Košík (s částkou)
PATIČKA: Nakupování | O nás a Vanda | Pro lektory a studia | Newsletter + sítě | Platby a dopravci

Změny oproti současnosti:

7. Wireframe: nová homepage a produktový detail

Homepage (shora dolů)

  1. Lišta výhod (32 px): Doprava zdarma od X Kč · Odesíláme do 24 h · ★ X,X/5 Heureka · Vrácení do X dní. Proč: odpovídá na hlavní obavy dřív, než vzniknou.
  2. Hlavička (jeden řádek): logo vlevo, mega menu, hledání, účet a košík. Proč: víc prostoru pro obsah.
  3. Hero (desktop 70 vh, mobil 60 vh): vlastní fotka podložky v použití, nadpis s benefitem („Designové podložky na jógu, na které se budete těšit“), podtitul „Protiskluzové, z přírodního kaučuku, navržené lektorkou jógy“ a 2 tlačítka „Vybrat podložku“ / „Pomoc s výběrem“. Proč: kdo, co, proč, během 5 s.
  4. Kategorie (6 dlaždic, popisek pod fotkou): Designové · PRO · Oválné · Cestovní · Pomůcky · Dárky. Proč: rychlá cesta pro ty, kdo vědí, co chtějí.
  5. Nejoblíbenější podložky (4 až 8 produktů, na mobilu vodorovný posuv) s hodnocením a 1 řádkem parametrů. Proč: sociální důkaz a rychlá volba.
  6. „Kterou podložku vybrat?“: srovnání 3 řad (Designová 1 490 Kč / PRO 2 390 Kč / Oválná 2 390 Kč) ve 3 sloupcích s tloušťkou, povrchem, hmotností a „pro koho“. Proč: dnes nevysvětlený cenový rozdíl je největší bariéra výběru.
  7. Příběh Vandy: fotka a 2 věty a odkaz „Můj příběh“. Proč: diferenciace, kterou konkurence nemá.
  8. Recenze: souhrnné hodnocení a 3 citace s koupeným produktem. Proč: důvěra.
  9. Novinky (4 produkty). Proč: důvod se vracet.
  10. Inspirace: 3 články (průvodce výběrem první). Proč: SEO a péče o zákaznice.
  11. Pro lektory a studia: jeden pruh (sleva 50 %, podložky s logem, velkoobchod). Proč: B2B má cestu, ale neruší B2C.
  12. Newsletter s pobídkou (např. tipy na praxi, bez nutnosti slevy) a patička.

Produktový detail (shora dolů)

  1. Drobečková navigace (malá, s kontrastem 4,5:1).
  2. Galerie (desktop: velká fotka a mřížka 2×2 nebo svislé náhledy, mobil: swipe s náhledem další fotky): produkt → v použití → detail povrchu → tloušťka → balení.
  3. Informační sloupec: štítek typu („Protiskluzová PRO“) → H1 → ★ hodnocení (počet, odkaz na recenze) → cena (velká, případně přeškrtnutá) → 3 klíčové parametry jako ikony (4 mm · 185 × 68 cm · 2,6 kg) → výběr varianty (barevné kroužky / motivy) → tlačítko „Přidat do košíku“ přes celou šířku → „Doručíme v pondělí 22. 9.“ · Doprava zdarma / zbývá X Kč · Vrácení do X dní → „Hodí se k tomu“ (1 až 2 doplňky se zaškrtnutím) → „Poradí Vanda“ (fotka a odkaz na průvodce a kontakt).
  4. Sticky lišta (mobil vždy, desktop po odscrollování): miniatura, název, cena, tlačítko do košíku.
  5. Záložky/sekce: Popis (příběh designu, pro jakou praxi) · Parametry (čistá tabulka) · Péče o podložku · Doprava a vrácení.
  6. Srovnání řad (stejný blok jako na homepage) s vyznačeným aktuálním produktem.
  7. Recenze (hodnocení, fotky zákaznic).
  8. Podobné podložky (alternativy) a Naposledy prohlížené.

8. Roadmapa postupné modernizace

Každou etapu lze objednat a nasadit samostatně. Pořadí je podle poměru dopad/náklad.

Etapa Obsah Očekávaný přínos Náročnost Závislosti
0 – Technická hygiena (týden 1) F-01 cookie lišta a consent, F-02 opravy 404 a přesměrování, F-03 úklid trackingu, F-04 mobilní checkout „Zpět“, F-43 title/description, F-35 vyloučit boxy u podložek Odstranění právního rizika, spolehlivá data, rychlejší mobil (odhad LCP −30 až −50 %), žádné slepé uličky S (1–2 dny) Přístupy do GA4/Ads/GTM, rozhodnutí o CookieHub
1 – Rychlé konverzní výhry F-06 lišta výhod, F-20 přeškrtnuté ceny, F-26 související produkty, F-24 termín doručení, F-48 kontrast tlačítek a textu, F-07 vyskakovací lišta pryč Vyšší konverze a průměrná objednávka bez změny designu S (2–3 dny) Etapa 0 (měřit dopad)
2 – Nalezitelnost F-27 čištění parametrů, F-11 filtry, F-10 podmenu a mega menu, F-12 nová struktura kategorií (kap. 6), F-13 obrázky podkategorií Rychlejší cesta k produktu, SEO podkategorií M (1–2 týdny) Etapa 0, schválená IA
3 – Vizuální systém Varianta A: fonty, paleta, tlačítka, štítky, ikony (F-51, F-52, F-30, F-49, F-60), jednotná mřížka sekcí (F-56), zmenšení hlavičky (F-54) a patičky (F-57, F-14), text z bannerů převedený do HTML (F-55) Web přestane působit zastarale a „rozházeně“, konzistence, přístupnost, editovatelné texty M (1 až 2 týdny) Schválený vizuální směr
4 – Produktový detail Nový layout dle kap. 7, sticky košík na mobilu, varianty jako vzorník propojený s fotkami (F-58), blok srovnání řad, „Poradí Vanda“ (F-23, F-25, F-28, F-29, F-31, F-39) Hlavní konverzní stránka, očekávaně nejvyšší dopad na tržby M–L (1–2 týdny) Etapa 3, recenze (doplněk)
5 – Homepage Nová struktura dle kap. 7, hero, blok Vandy, recenze, srovnání, B2B pruh (F-05, F-15–F-18, F-41) První dojem, důvěra M (1 týden) Etapa 3, ideálně nové fotky
6 – Košík a checkout Srovnání řádků dopravy a plateb (F-59), boční panel po přidání, upsell v košíku, souhrn s důvěrou, úprava souhlasů (F-36, F-37) Průměrná objednávka, méně opuštěných košíků S–M Etapa 3
7 – Focení a obsah Lifestyle a detailní focení (F-53), O nás přepracovat, „Jak vznikají naše podložky“, průvodce výběrem, landing Pro lektory a studia (F-32, F-42, F-47) Silná značka, SEO, B2B leady L (focení a texty) Může běžet paralelně od etapy 1
8 – Výkon a údržba Odložení vlastních skriptů, Facebook SDK pryč, fonty, pravidelný crawl 404, měsíční Lighthouse (F-40) Core Web Vitals v zeleném, stabilita S–M Etapa 0
9 – (volitelné) Šablona Zvážit přechod na novější šablonu Shoptetu, pokud by vlastní CSS nad Classic narazilo na limity Méně vlastního kódu a jednodušší údržba L Po etapách 3–5 vyhodnotit

Poznámka k existujícímu kódu: Web už má vlastní CSS/JS od externího vývojáře (shoptet.jankucera.work/…/yoggspiration.css|js, poslední úprava 10. 8. 2026) a vlastní soubory style.css v1.19, script.js, script-variants.js, dále doplňky Dominik Martini (Blog products, Poznámka k objednávce) a News box plus. Před etapou 2 je potřeba ujasnit, kdo bude kód spravovat. Jde také o to, kde vzniklo skrytí podmenu, aby se úpravy nepřepisovaly.

9. Otevřené otázky pro majitelku

  1. Cílovka: Kdo nakupuje nejčastěji (věk, začátečnice nebo pokročilé, domácí praxe nebo studio)? Jaký je podíl B2B (lektoři, studia, velkoobchod) na tržbách?
  2. Data: Přístup do Google Analytics 4 (který ze 4 účtů je „ten správný“?), Google Ads, Search Console a Shoptet statistik: konverzní poměr, podíl mobilu, opuštěné košíky, nejčastější vstupní stránky.
  3. Bestsellery a marže: Které podložky a doplňky se prodávají nejvíc a na kterých je nejlepší marže (kvůli výběru na homepage a cross-sellu)?
  4. Cookie lišta: Máte CookieHub zaplacený? Vadí vám přechod na nativní lištu Shoptetu?
  5. Doprava a vrácení: Od jaké částky je doprava zdarma (v testu zdarma u 2 390 Kč, placená u 120 Kč)? Do kdy odesíláte (čas uzávěrky)? Jakou lhůtu na vrácení nabízíte, zákonných 14 dní, nebo déle?
  6. Recenze: Kolik hodnocení máte na Heurece? Souhlasíte s importem recenzí k produktům?
  7. Brand: Existuje brand manuál, zdroj loga (vektor) a pravidla barev? Je logo (barevný mandala-hamsa) pevně dané?
  8. Fotky: Jaké vlastní fotky máte (produktové, lifestyle, s Vandou)? Jste ochotná udělat jedno focení (odhad 1 den)? Máte bannery i bez vypáleného textu, nebo aspoň zdrojové soubory (Canva, Photoshop)?
  9. Varianty: Máte fotky jednotlivých krystalů a barevných variant, které by šly přiřadit k variantám (F-58)?
  10. Designy podložek: Kdo je autorem motivů? Existuje příběh designů (inspirace, výroba, barvy), který můžeme vyprávět?
  11. Podložky na míru a B2B: Chcete B2B dál rozvíjet na webu, nebo spíš osobně? Kolik poptávek měsíčně chodí?
  12. Mezinárodní prodej: Na webu je volba měny EUR. Prodáváte na Slovensko? Plánujete slovenskou verzi?
  13. Vývojář: Kdo spravuje vlastní CSS/JS (jankucera)? Bude spolupracovat, nebo převezmeme správu kódu?

10. Kolik to bude stát

Účtuji 1 000 Kč za hodinu a u každé etapy uvádím odhad hodin od–do. Fakturuji skutečně odpracovaný čas, takže pokud práce zabere méně, platíte méně. Ceny jsou bez DPH. Celá modernizace od první opravy po nový vzhled vyjde na 37 000 až 49 000 Kč, rozložených do etap podle toho, jak vám to vyhovuje.

Nic z toho se nemusí objednat najednou. Etapy jsou postavené tak, aby každá dávala smysl sama o sobě a bylo po ní vidět zlepšení.

Etapa Co se v ní udělá Hodiny Cena
0. Technická hygiena Úklid měřicích kódů, oprava tří odkazů na chybovou stránku, dořešení souhlasu s cookies, oprava překrývajícího se textu v mobilní pokladně, zákaz výdejních boxů u podložek, opravy titulků stránek 3 až 4 3 000 až 4 000 Kč
1. Rychlé konverzní výhry Lišta výhod pod hlavičkou, ukazatel „do dopravy zdarma zbývá“, přeškrtnuté ceny ve výprodeji, doporučené doplňky u produktů, termín doručení u tlačítka, oprava kontrastu textů a tlačítek 4 až 5 4 000 až 5 000 Kč
2. Aby zákazník našel, co hledá Srovnání parametrů u produktů, zapnutí filtrů (tloušťka, povrch, materiál, rozměr, cena), rozbalovací menu na počítači i mobilu, nová struktura kategorií včetně přesměrování starých adres 6 až 8 6 000 až 8 000 Kč
3. Nový vzhled Písma, barvy, tlačítka, štítky a ikony jako jeden systém, jednotná mřížka sekcí, menší hlavička a patička, převedení textů z obrázků do stránky 8 až 10 8 000 až 10 000 Kč
4. Produktová stránka Nové rozvržení, tlačítko do košíku stále po ruce na mobilu, varianty propojené s fotkami, srovnání řad podložek, recenze, doporučené doplňky 5 až 7 5 000 až 7 000 Kč
5. Úvodní stránka Nový hero, řazení sekcí podle nákupní cesty, blok o vás, recenze, srovnání podložek, sloučení bloků pro lektory 4 až 5 4 000 až 5 000 Kč
6. Košík a pokladna Srovnání řádků dopravy a plateb, panel po vložení do košíku s nabídkou doplňků, prvky důvěry v souhrnu 2 až 3 2 000 až 3 000 Kč
7. Obsah a značka Přepsaná stránka O nás, průvodce výběrem podložky, samostatná stránka pro lektory a studia, příprava podkladů pro focení 3 až 4 3 000 až 4 000 Kč
8. Rychlost a údržba Odložené načítání skriptů, odstranění nepoužívaných knihoven, kontrola rozbitých odkazů, měsíční měření rychlosti 2 až 3 2 000 až 3 000 Kč
Celkem etapy 0 až 8 37 až 49 37 000 až 49 000 Kč

Odhady jsou postavené na tom, že pracuji s pomocí AI nástrojů, takže rutinní části (příprava kódu, texty, hromadné úpravy dat) jdou výrazně rychleji než při ruční práci. Kdyby se ukázalo, že něco zabere víc času, než jsem odhadl, nezvyšuji cenu bez domluvy: buď to doděláme v další etapě, nebo se dohodneme předem.

Co v cenách není: fotograf a focení produktů (etapa 7 počítá jen s mou prací na přípravě), placené doplňky ze Shoptet marketplace (například import recenzí, obvykle stovky korun měsíčně), licence fontů, pokud bychom sáhli po placených, a nákup fotobanky. Vše dopředu odsouhlasíme.

Kde se dá ušetřit: v etapě 2 jsou zhruba 3 hodiny na doplnění parametrů u produktů (tloušťka, povrch, materiál, rozměr). Data připravím hromadně, ale pokud si je zkontrolujete a doplníte v administraci sama, etapa se zlevní zhruba o 3 000 Kč.

Co doporučuji objednat jako první: etapy 0 a 1, dohromady 7 000 až 9 000 Kč. Je to jeden den práce, opraví se tím chyby, které dnes stojí objednávky, a zároveň se dají výsledky změřit. Teprve potom má smysl utrácet za vzhled.

Jak to probíhá: každou etapu odhadnu přesněji, než ji začnu, a odsouhlasíte ji. Pracuji na testovací verzi šablony nebo mimo provozní dobu, takže e-shop nikdy nestojí. Po nasazení dostanete krátký zápis, co se změnilo a proč.

11. Příloha

11.1 Technická data (Lighthouse 12, data/lh-*.report.html)

Stránka Zařízení Výkon Přístupnost Best Practices SEO LCP TBT CLS FCP SI Přenos
Homepage mobil 34 96 75 100 8,8 s 1 200 ms 0,012 3,9 s 12,0 s 4 182 KiB
Homepage desktop 90 97 74 100 1,5 s 10 ms 0,009 1,0 s 2,0 s 4 344 KiB
Kategorie mobil 39 96 75 100 23,8 s 1 040 ms 0,042 4,6 s 6,0 s 4 255 KiB
Kategorie desktop 76 97 74 100 1,3 s 0 ms 0,352 0,9 s 1,6 s 4 514 KiB
Produkt mobil 34 95 71 100 28,5 s 1 200 ms 0 4,9 s 7,9 s 4 273 KiB
Produkt desktop 81 95 74 100 1,1 s 0 ms 0,269 0,9 s 1,7 s 4 475 KiB

Poznámky: Lighthouse měří v laboratoři (simulované pomalé 4G a zpomalené CPU), reálná data CrUX se u e-shopu této velikosti obvykle nezobrazují. CLS na desktopu nad 0,1 u kategorie a produktu (posun layoutu po načtení vlastního JS/fontů) je potřeba opravit v etapě 8. Best Practices snižují chyba v konzoli (CookieHub), cookies třetích stran a varování prohlížeče.

Skladba přenosu (produkt, mobil): Script 37 souborů / 2 864 KiB · Image 41 / 957 KiB (WebP z CDN Shoptetu) · Font 7 / 259 KiB (Raleway 300/400/700, Roboto 400, Yanone Kaffeesatz ×2, ikonový font Shoptet) · CSS 10 / 89 KiB · DOM 870 až 1 710 prvků.

Třetí strany (homepage, mobil): Google Tag Manager 2 424 KiB / 975 ms blokování · Facebook 274 KiB / 261 ms · myshoptet.com 1 298 KiB · seznam.cz 51 KiB · Google Fonts 44 KiB · Google Analytics 21 KiB · Bing Ads 16 KiB · im9.cz (Heureka widget) 6 KiB · GoPay 1 KiB.

Nasazené kódy a doplňky: šablona Classic (template-11), Shoptet doplňky Dominik Martini Blog products a Order remark, News box plus (Classic), vlastní CSS/JS externího vývojáře (jkbase.js, yoggspiration.css/js), vlastní style.css, script.js, script-variants.js, CookieHub (nefunkční, 403), GTM GTM-TRS5RSN, GA4 ×4, UA ×1, Google Ads ×3, Facebook Pixel a Facebook SDK, Bing UET, Seznam retargeting (rtgId 30904), Heureka ověřeno zákazníky, GoPay, affiliate partneri.yoggspiration.cz, jQuery 1.11.3.

SEO meta (výběr):

Stránka Title Description
Homepage Podložky na jógu a cvičení | Jogamatky | YOGGSPIRATION (54) Nejlepší podložky na jógu a cvičení. Ekologické materiály…
Podložky na jógu Podložky na jógu | Eko jogamatky | YOGGSPIRATION (48) 🌿 Stylové i profi podložky z ekologických materiálů…
GOLD PRO GOLD PRO | Profesionální protiskluzová podložka na jógu (55) GOLD PRO od YOGGSPIRATION je profesionální…
O nás O nás (5) oznejte příběh značky YOGGSPIRATION…
Kontakty Kontakty | YOGGSPIRATION (24) Kontakty, YOGGSPIRATION (automatická)

Přístupnost (axe-core 4, WCAG 2.2 AA, desktop): color-contrast: homepage 39, kategorie 78, podkategorie 66, pomůcky 59, produkty 18 až 29, obsahové stránky 16 až 18 · heading-order na produktech · empty-heading 5 (Doprava a platba) · image-alt 1 (O nás) · label 1 (varianta) · region 6 až 14 · landmark-no-duplicate-main 1 (homepage). Kompletní data: data/analyze.json.

Změny mezi 21. a 23. 9.: Při druhém kole se ukázalo, že se mezitím rozjela nativní cookie lišta Shoptetu, která 21. 9. vidět nebyla (F-01 je přepsané podle nového stavu). Ostatní zjištění z prvního kola zůstávají v platnosti; měření layoutu v kapitole 3.13 jsou z 23. 9.

Omezení auditu: Nic nebylo odesláno (objednávka ani formuláře). Captcha ani blokace botů se nevyskytla. Cookie lišty konkurence se nepodařilo automaticky zavřít, a proto jsou ve screenshotech. Vyprodaný produkt se ve výpisech nezobrazuje (zřejmě nastavení „skrýt vyprodané“), a proto chybí jeho screenshot. Desktopové hover menu nemá co zobrazit (F-10), takže existuje jen 1 screenshot. Mobilní submenu neexistuje. Na full-page screenshotech bývá hlavička „přilepená“ uprostřed stránky nebo chybí některé líně načítané obrázky. Jde o artefakt focení, proto se hodnotily i snímky jednotlivých obrazovek (home-obrazovka-XX.png), kde se vše načítá správně.

11.2 Seznam screenshotů

Desktop (screenshots/desktop/) a mobil (screenshots/mobile/), stejné názvy:

Soubor Obsah
00-prvni-dojem-s-popupy.png první načtení, bez zavření lišt (cookie lišta chybí)
home.png, home-full.png, home-obrazovka-01…13.png homepage, první obrazovka, celá stránka a jednotlivé obrazovky při scrollu
menu-hover-1.png, menu-hover-1b.png (D) / menu-hamburger.png, menu-tap-podlozky.png (M) hlavní menu
kat-podlozky[-full].png, kat-podlozky-razeni.png, kat-podlozky-razeni-cena.png, kat-podlozky-strana2[-full].png, kat-podlozky-filtry-otevrene.png (M) kategorie Podložky, řazení, stránkování, (neexistující) filtry
kat-vsechny-podlozky, kat-pomucky, kat-tasky, kat-vyprodej další hlavní kategorie
podkat-designove, podkat-korkove podkategorie
produkt-bez-variant-gold-pro produkt bez variant
produkt-varianty-polstar, produkt-varianty-nevybrano produkt s variantami, pokus o přidání bez výběru
produkt-akce-svicka akční/výprodejový produkt
produkt-akce-zoo-404 výprodejový produkt z výpisu → 404
produkt-na-dotaz-na-miru produkt „na dotaz“ (B2B)
produkt-novinka-terra-oval novinka
produkt-levny-tycinky levný doplněk
produkt-galerie-lightbox otevřená galerie
hledani-naseptavac, hledani-naseptavac-nula, hledani-vysledky, hledani-nula vyhledávání
kosik-prazdny, kosik-po-pridani-popup, kosik-po-pridani-varianty, kosik-plny košík
checkout-1-doprava-levna-objednavka (D), kosik-levna-objednavka (D) doprava u objednávky za 120 Kč
checkout-1-doprava-platba[-full], checkout-1-vybrano, checkout-2-udaje[-full], checkout-2-chyby-validace, checkout-2-souhrn-pred-odeslanim pokladna až před odeslání
registrace, prihlaseni účet
blog, blog-clanek, clanek-nejlepsi-podlozky obsah
o-nas, kontakt, doprava-platba, obchodni-podminky, pro-lektory informační stránky
paticka.png patička
404, hp-dlazdice-tasky-404, hp-dlazdice-joga-pro-deti-404 chybové stránky a rozbité dlaždice

Měření a anotované snímky z 23. 9. (jen desktop, screenshots/desktop/):

Soubor Obsah
detail-cookie-lista.png nativní cookie lišta Shoptetu, stav k 23. 9.
detail-hlavicka-fixed.png, detail-hlavicka-anotace.png fixní hlavička 240 px se zakreslením
detail-mrizka-kategorie.png, detail-mrizka-bloky.png, detail-mrizka-anotace.png dvě různé mřížky sekcí s vodicími čarami
detail-text-v-obrazku-anotace.png, detail-hero-titulek-2x.png, detail-menu-text-2x.png srovnání ostrosti textu v obrázku a textu z prohlížeče
detail-blok-lektori-2x.png, detail-bloky-jako-obrazky.png B2B bloky včetně tlačítek vypálených v obrázku
detail-paticka.png, detail-paticka-anotace.png patička 596 px
detail-varianty-1-vychozi.png, detail-varianty-2-ruzenin.png, detail-varianty-anotace.png varianty krystalu bez vazby na fotku
detail-checkout-doprava.png, detail-checkout-anotace.png řádky dopravy se změřenými osami a výškami

Benchmark (screenshots/benchmark/): {yoggys|yogainstyle|yogashop|liforme|manduka}-{desktop|mobile}-{home|home-s-popupy|produkt}[-full].png

Produkty konkurence: Yoggys „Cestovní podložka FANTASY“, Yogainstyle „Podložka na jógu Kabir“, Yogashop „Podložka Flow Poa Summer“, Liforme „Cosmic Moon Yoga Mat“, Manduka „PRO Yoga Mat 6mm“.

11.3 Reprodukce

Skripty ve složce audit/: capture.mjs (screenshoty), benchmark.mjs, analyze.mjs (SEO, a11y, tap targety), lh.sh (Lighthouse). Spuštění: node capture.mjs [desktop|mobile] [krok].

12. Slovníček pojmů

Abecedně, vlastními slovy.

Pojem Co to znamená
404 Stránka, která hlásí „nenalezeno“. Vznikne, když odkaz vede na adresu, kde už nic není.
alt text Popisek obrázku, který se ukáže, když se obrázek nenačte. Čtou ho vyhledávače a čtečky pro nevidomé.
cache Dočasná paměť prohlížeče. Když je nastavená dobře, podruhé se stránka načte rychleji.
Consent Mode Nastavení Googlu, které měřicím kódům říká, jestli návštěvník souhlasil s cookies.
cookie Malý soubor, který si web uloží v prohlížeči. Nutné cookies drží přihlášení a košík, marketingové sledují chování a ty vyžadují souhlas.
CSS Jazyk, kterým se webu říká, jak má vypadat: barvy, velikosti, rozmístění.
cross-sell Nabídka doplňků k tomu, co si zákazník prohlíží. Například popruh k podložce.
CTA Výzva k akci, tedy hlavní tlačítko na stránce, třeba „Přidat do košíku“.
Core Web Vitals Tři čísla, kterými Google měří, jak rychle a klidně se stránka načítá. Ovlivňují pozice ve vyhledávání.
fixed / sticky Prvek, který zůstává na obrazovce i při posouvání stránky. Typicky hlavička.
HTML Jazyk, ve kterém je stránka napsaná: nadpisy, odstavce, odkazy, obrázky.
JavaScript (JS) Kód, který na stránce něco dělá: rozbaluje menu, počítá košík, měří návštěvnost. Čím víc ho je, tím pomaleji se web načítá.
kontrast Rozdíl mezi barvou textu a pozadím. Když je malý, text se špatně čte, hlavně na mobilu na slunci.
LCP Čas, za který se ukáže největší prvek na obrazovce, obvykle hlavní fotka nebo nadpis. Google chce pod 2,5 vteřiny.
Lighthouse Měřicí nástroj od Googlu, dává známku 0 až 100 za rychlost, přístupnost, technický stav a SEO.
meta description Krátký popis stránky, který se ukazuje ve výsledcích vyhledávání pod názvem.
mřížka (grid) Neviditelná síť, podle které jsou prvky na stránce zarovnané. Když ji sekce nedodržují, web působí rozházeně.
nadpisy H1, H2, H3 Úrovně nadpisů. H1 je hlavní nadpis stránky, H2 jsou kapitoly, H3 podkapitoly. Vyhledávače podle nich chápou, o čem stránka je.
parametr produktu Údaj, který se dá u produktu vyplnit v administraci (tloušťka, materiál, barva). Až podle parametrů může e-shop nabídnout filtry.
přesměrování 301 Trvalé přesměrování ze staré adresy na novou, aby se návštěvník ani Google nedostali na chybovou stránku.
retina displej Displej s vysokou hustotou bodů (dnes skoro každý telefon a notebook). Potřebuje obrázky ve dvojnásobném rozlišení, jinak jsou měkké.
SEO Souhrn úprav, díky kterým e-shop lépe najdou vyhledávače.
strukturovaná data Skrytý popis produktu pro vyhledávače (cena, dostupnost, hodnocení). Díky nim se ve výsledcích ukazují hvězdičky a cena.
upsell Nabídka dražší nebo větší varianty toho, co si zákazník vybral.
variantа Provedení jednoho produktu, například barva polštáře nebo druh krystalu v lahvi.
WCAG Mezinárodní pravidla přístupnosti webu, tedy aby web zvládl použít i člověk se zhoršeným zrakem nebo bez myši.
WebP Modernější formát obrázků, který je při stejné kvalitě výrazně menší než JPG a PNG.