Kódování oživuje grafický návrh webu, ale také umožní ohnout šablony Shoptetu na míru a vytvořit funkce, které nedokážete v základní verzi nakonfigurovat.

Kódování webu je převod grafického návrhu do funkční interaktivní podoby. Na Shoptetu se nejčastěji řeší úprava základní šablony pomocí HTML, CSS a JavaScriptu. Shoptet je krabicová platforma, takže se neupravuje úplně všechno tak snadno, jako u vlastního řešení na míru s inhouse týmem programátorů.

Ale zkušený kodér toho umí ohnout překvapivě hodně a právě na to se podíváme.

Redesign e-shopu Dudlu.cz — Kódování webu

Co je kódování webu?

Kódování webu je proces, při kterém se grafický návrh převádí do HTML, CSS a JavaScriptu. HTML určuje strukturu stránky, CSS řeší vzhled a JavaScript přidává interaktivitu.

U e-shopu kódování neřeší jen barvy a obrázky. Řeší se chování menu, zobrazení produktů, úprava košíku, responzivita, fasetová navigace, podkategorie, produktové štítky, recenze, doporučené produkty, informační proužky, stránka „O nás“, doplňky a všechno, co zákazník používá cestou k objednávce.

Správně nakódovaný web musí být rychlý, přehledný, funkční na mobilu a čitelný pro vyhledávače.

Jak se kóduje Shoptet?

Shoptet se obvykle nekóduje od nuly, ale upravuje se existující šablona. Vyberete základní šablonu, případně hotovou vylepšenou šablonu, a kodér nad ní provede úpravy pomocí HTML, CSS a JavaScriptu. Tím se dá základní Shoptet šablona výrazně přiblížit individuálnímu designu a potřebám projektu.

Individuální úpravy Shoptetu dávají smysl ve chvíli, kdy základní šablona neodpovídá značce, sortimentu nebo nákupní cestě zákazníka. Nemusí jít rovnou o kompletní redesign. Často stačí několik chytrých zásahů, které zlepší orientaci, důvěru a konverzní poměr.

Typická úprava na míru je například vlastní dropdown menu. Místo obyčejného seznamu kategorií může obsahovat obrázky, top kategorie, top produkty, odkazy na články, sezónní výběry nebo doporučené značky. U většího e-shopu to může zákazníkovi výrazně zrychlit cestu k sortimentu.

Podobně lze upravovat homepage bloky, produktové výpisy, blogové články nebo košík. Do článku lze přidat výpis produktů, do kategorie vlastní bannery, do produktového detailu lepší blok výhod a do košíku například progress bar dopravy zdarma. Ale vždy musí platit, že úprava pomáhá zákazníkovi.

• Dropdown menu s obrázky, kategoriemi, produkty nebo články.
• Vlastní produktové widgety v článcích a poradnách.
• Úprava produktových karet ve výpisu kategorie.
• Zvýraznění recenzí, dopravy zdarma a benefitů.
• Vlastní bloky na homepage a v kategoriích.
• Úprava košíku a nákupního procesu v rámci možností šablony.

Kódování grafického návrhu vs. UX designer

Kódování samo o sobě neřeší, jestli je design dobrý. Kodér obvykle převádí zadání do funkční podoby. Pokud je grafický návrh nepřehledný a špatně navržený, kódování z něj UX zázrak neudělá.

Ideální postup je UX návrh wireframu, potom grafik a až pak kódování. UX designer navrhne rozložení podle dat a chování zákazníků. Grafik tomu dá vizuální styl. Kodér to převede do funkční šablony.

UX designér, který z malých Shoptet e-shopů vytváří jedničky na trhu — Lukáš Dubina

Jak jsme kódovali Dudlu?

U Dudlu jsme kódování řešili jako pokračování redesignu po grafickém návrhu. Grafika byla jedna věc, ale teprve beta verze ukázala, jak se návrh chová v reálném prostředí Shoptetu. Testovali jsme desktop, mobil, tablet, rozlišení, menu, filtry, košík, produktové prvky a různé detaily.

Samotné testování probíhalo na beta verzi, která nebyla plným klonem ostrého e-shopu. Měli jsme spíš lite verzi s několika ilustrativními produkty a bez části externích doplňků.

Okolo redesignu jsme si vyměnili přes 60 e-mailů. Zhruba 20 se týkalo designu a 40 kódování. To krásně ukazuje, že největší práce často nepřichází při kreslení návrhu, ale při ladění detailů.

Checklist kontroly kódování

Kontrola kódování musí probíhat systematicky. Nestačí otevřít homepage, říct „vypadá to dobře“ a poslat e-shop na ostrou. Musíte projít jednotlivé typy stránek na všech zařízení od mobilu po tablet.

1. Zkontrolovat prázdná místa a zbytečně velká odsazení.
2. Zkontrolovat parametrické filtry a jejich zobrazení.
3. Zkontrolovat dropdown menu a hamburger menu.
4. Zkontrolovat vizualizaci interních odkazů.
5. Zkontrolovat ikonky dárků a dopravy zdarma.
6. Zkontrolovat recenze obchodu v kartě produktu.
7. Zkontrolovat zobrazení podobných a souvisejících produktů.
8. Zkontrolovat jazykovou sadu textů včetně microcopy.
9. Zkontrolovat přidání zboží do košíku a celý košík.
10. Zkontrolovat shopping bar „do dopravy zdarma zbývá XY Kč“.
11. Zkontrolovat zobrazení USP a jejich responzivitu.
12. Zkontrolovat zobrazení podkategorií a jejich responzivitu.
13. Zkontrolovat články a jejich formátování.
14. Zkontrolovat nadpisy, odrážky a číslování napříč webem.
15. Zkontrolovat informační proužek při aktivaci.

Co testovat na mobilu?

Mobilní verze je u e-shopu kritická. Zákazník na mobilu často přichází z reklam, sociálních sítí, organiku nebo e-mailingu. Pokud se menu špatně ovládá, filtrace je schovaná, tlačítko do košíku není vidět nebo se texty lámou jako český rozpočet, konverzní poměr půjde dolů.

Na mobilu testujte hlavně rychlost orientace. Vidí zákazník menu? Najde kategorii? Chápe filtry? Je produktová fotka dostatečně velká? Je jasná cena, dostupnost, doprava a tlačítko do košíku?

Mobil není zmenšený desktop. Některé prvky, které vypadají skvěle na široké obrazovce, jsou na mobilu nepoužitelné. Typicky velké bannery, složitá menu, karusely, široké tabulky a dlouhé bloky textu.

🎯 PPC pro Shoptet e-shopy už od 10 000 Kč měsíčně (PPC tým: Tomáš Zahálka)

Externí doplňky a vlastní kód

U Dudlu jsme část doplňků nahradili vlastním kódem. Tím jsme snížili závislost na kompatibilitě třetích stran. Některé složitější doplňky jsme ale nechali, například Rozbalené dárky v košíku, Product widgets nebo Poznámka k produktu. Naštěstí do designu zapadly, ale i to lze řešit vlastním kódem.

Obecně platí, že čím víc doplňků e-shop používá, tím opatrněji je potřeba redesign testovat. Každý doplněk může přidávat vlastní HTML, CSS nebo JavaScript. A když se potká několik doplňků, vlastní kód a nová šablona, může vzniknout technologický balast, který zpomaluje e-shop a efektivitu redesignu.

Rizika kódování s JavaScriptem z pohledu SEO

Kódování webu může SEO výrazně pomoct, ale také ho může poškodit. Největší rizika jsou špatně dostupný obsah, pomalé načítání, rozbité interní odkazy, chybějící nadpisy, špatná práce s kategoriemi, změny URL bez přesměrování a důležité prvky vykreslené jen JavaScriptem.

Čistě JavaScriptový e-shop může být pro SEO problém. Google a Gemini umí JavaScript zpracovat a procházet lépe než v minulosti, ale pořád je bezpečnější pro ostatní vyhledávače a AI nástroje, když důležitý obsah, odkazy, produkty, kategorie, texty a navigace existují v HTML a jsou pro roboty snadno dostupné. Pokud se vše vykreslí až po spuštění skriptů, zvyšujete riziko problémů s indexací.

U Shoptetu bych si dával pozor hlavně na to, aby vlastní úpravy neschovávaly důležité odkazy, texty a produkty před vyhledávači. Dropdown menu, výpisy produktů, interní odkazy, související produkty a blogové bloky musí být technicky provedené tak, aby je zákazník viděl a vyhledávač pochopil.

• Důležitý obsah neschovávat jen za JavaScript.
• Nerozbít H1, H2 a strukturu nadpisů.
• Neodstraňovat interní odkazy z kategorií a produktů.
• Kontrolovat rychlost načítání po úpravách.
• Hlídát canonical, indexaci a sitemapu.
• Otestovat web v Google Search Console po nasazení.

🔎 SEO pro Shoptet e-shopy už od 15 000 Kč měsíčně (SEO tým: Tomáš Zahálka)

Rychlost webu po kódování

Každá úprava kódu může ovlivnit rychlost webu. Nové skripty, animace, karusely, fonty, špatně optimalizované obrázky, widgety a doplňky mohou stránku zpomalit. U e-shopu je to problém, protože pomalý web snižuje konverzní poměr a zhoršuje uživatelský zážitek.

Po kódování je potřeba měřit rychlost na mobilu i desktopu. Nestačí subjektivní pocit na rychlém internetu v kanceláři. Zákazník může být na mobilních datech, starším telefonu a ještě v metru. Pokud se mu kategorie načítá dlouho, nečeká. Internet vychoval zákazníky k netrpělivosti.

🧠 Marketingové konzultace a audity pro Shoptet e-shopy už od 5 000 Kč (Autor: Tomáš Zahálka)

Co očekávat po kódování a nasazení redesignu?

Po nasazení redesignu počítejte s tím, že ještě budete ladit. I když testování v betě proběhne dobře, ostrý provoz ukáže věci, které na testovací verzi nevidíte. Reálné produkty, reálné doplňky, reálné objednávky a reální zákazníci jsou vždycky nejlepší destrukční test.

Po spuštění sledujte hlavně konverzní poměr, tržby, chování v košíku, rychlost webu, výkon mobilu, chyby v Search Console a data z reklamních systémů. Pokud se něco výrazně změní, hledejte příčinu hned. Redesign není konec práce, ale začátek další optimalizace.

Zkušenost z Dudlu ukazuje, že kódování bývá náročnější než samotný grafický návrh. Design vypadá hezky na obrázku, ale teprve kódování ukáže, jestli bude fungovat v reálném e-shopu.

Tak nezahálejte, testujte kódování, hlídejte rychlost a ať i vám e-shopy rostou — celý seriál zde!