Úprava Shoptet šablony bez zásahu do backendu

Co je úprava Shoptet šablony a kdy dává smysl

Úprava Shoptet šablony je změna vzhledu nebo chování e-shopu pomocí vlastního kódu (CSS pro vzhled, JavaScript pro chování), který se přidá k šabloně od Shoptetu.

Dává smysl ve chvíli, kdy jste vyčerpali nastavení v Návrháři šablon a pořád chcete něco, co tam není: jiné rozložení detailu produktu, vlastní štítky, výraznější tlačítko do košíku, upravenou mobilní hlavičku nebo informační blok, který se ukáže jen v určité kategorii. Shoptet tyhle úpravy umožňuje, ale sám u nich nepomáhá: podle nápovědy Shoptetu jeho technická podpora k individuálním úpravám přes HTML, CSS a JS neposkytuje pomoc a odkazuje na partnery kodéry.

Pro koho se úprava hodí a pro koho ne

Hodí se, když:

• máte e-shop na Shoptetu a chcete ho odlišit vzhledem, ne jen barvou a logem,
• potřebujete drobné změny chování (zobrazit, skrýt nebo přesunout prvek, doplnit text podle kategorie),
• chcete úpravu nejdřív vidět na vlastním e-shopu a až pak ji pustit zákazníkům.

Nehodí se, když:

• potřebujete jinou logiku objednávky, výpočtu cen nebo skladu. To se odehrává na serveru Shoptetu a CSS ani JavaScript to nezmění.
• chcete e-shop postavit od nuly. To webrocks nedělá, úpravy se týkají jen existujícího e-shopu.
• zvažujete úplně vlastní design bez kódu Shoptetu. To je funkce tarifu Shoptet Premium, viz níže.

Co jde přes CSS a JavaScript upravit a co ne

CSS a JavaScript běží v prohlížeči zákazníka nad stránkou, kterou vygeneroval Shoptet. Můžou tedy změnit, jak stránka vypadá a jak se chová, ale ne to, jaká data do ní Shoptet pošle.

Co upravit jde

• Vzhled: barvy, písma, rozestupy, rozložení výpisu i detailu produktu, mobilní zobrazení, vzhled košíku a formulářů.
• Obsah na stránce: doplnění textů, štítků nebo bloků, skrytí nebo přesun prvků, které šablona sama skrýt neumí.
• Chování: reakce na kliknutí, přepínače, upozornění v košíku. Shoptet k tomu v aktuálních šablonách nabízí sadu funkcí Shoptet Developers Tools včetně vlastních událostí.
• Kontrolu formulářů: podle dokumentace Shoptetu jde před odesláním objednávky, newsletteru nebo dotazu doplnit vlastní kontrolu (shoptet.custom.postSuccessfulValidation).

Co upravit nejde

• výpočet cen, dopravy a slev, stav skladu, zpracování objednávek a data v administraci,
• struktura dat, kterou Shoptet do stránky posílá (jaké údaje o produktu stránka vůbec má),
• úplně vlastní šablona bez CSS a JavaScriptu Shoptetu a privátní přístup k API. Obojí je podle Shoptetu v tarifu Shoptet Premium, ne v běžných tarifech.

Kam se kód vkládá

Podle nápovědy Shoptetu se vlastní kód vkládá ve Vzhled a obsah → Editor → HTML kód. Sekce Záhlaví se vkládá před </head> (CSS, meta tagy, skripty), Zápatí před </body> (skripty), Dokončená objednávka jen na děkovací stránku. Každá sekce má limit 8 192 znaků. Delší kód se nahraje jako soubor přes (S)FTP do složky /user/documents/ a v záhlaví nebo zápatí se na něj jen odkáže.

Druhá cesta je HTML editor v Návrháři šablon. Ten je zdarma ve všech tarifech a změny ukládá do konceptu, který vidí jen administrátor. Zákazníci je uvidí až po kliknutí na Zveřejnit. Návrhář šablon ale zatím nejde používat na mobilu.

Jak úprava probíhá

1. Zadání. Ujasní se, co se má změnit, na kterých typech stránek (úvod, kategorie, detail, košík) a jak to má vypadat na mobilu.
2. Kontrola šablony. Zjistí se, na jaké šabloně e-shop běží a jestli už v něm není vlastní kód, se kterým by se nová úprava srazila.
3. Kód. CSS a JavaScript se napíšou tak, aby se opíraly o stabilní části šablony a funkce, které Shoptet označuje za stabilní.
4. Živý náhled přes odkaz. Úpravu uvidíte na svém e-shopu ještě předtím, než ji uvidí zákazníci, a můžete ji připomínkovat.
5. Nasazení a kontrola. Po odsouhlasení se kód vloží do administrace a projdou se upravené stránky na počítači i mobilu, včetně košíku.

Co dostanete

• CSS a JavaScript vložený do e-shopu, bez zásahu do backendu,
• odkaz na živý náhled před nasazením, abyste nic neschvalovali naslepo,
• přehled, které stránky a prvky úprava mění, a co zkontrolovat, když Shoptet ohlásí změnu šablony,
• u delšího kódu soubor ve /user/documents/ místo kódu nacpaného do limitu sekce.

Na co si dát pozor

Aktualizace šablony můžou úpravy rozbít

Shoptet šablony průběžně aktualizuje a u HTML editoru v nápovědě k Návrháři šablon výslovně uvádí, že vložený kód nemusí být kompatibilní s budoucími úpravami systému. Hlavní riziko je v tom, že se změní HTML, o které se úpravy opírají, a ony pak přestanou sedět. Příklad: Shoptet ohlásil na 30. 9. 2026 úpravu popisků variant a barevných filtrů ve všech šablonách nejnovější generace kvůli přístupnosti a sám upozornil, že to může rozbít selektory ve vlastním CSS a JS.

Riziko jde zmenšit, ne odstranit:

• psát selektory co nejméně závislé na konkrétním zanoření HTML,
• v JavaScriptu používat funkce shoptet.MODULE_NAME., jejichž změny Shoptet podle dokumentace ohlašuje předem,
• sledovat ohlášení změn na vývojářském webu Shoptetu,
• využít odložené aktualizace šablon. E-shop s úpravami tak může kritickou změnu odložit a vyzkoušet si ji v náhledu. Po termínu se ale aktualizace přijme sama, takže je to čas na úpravu, ne trvalá výjimka.

Část stránky se načítá dodatečně

Některé části stránky, třeba košík, se na Shoptetu načítají AJAXem, tedy bez přenačtení celé stránky. Kód, který se spustí jen jednou po načtení stránky, pak na nový obsah nedosáhne. Shoptet proto podle dokumentace Shoptet Developers Tools vyvolává událost ShoptetDOMContentLoaded pokaždé, když se část stránky načte znovu, a k ní konkrétnější události, třeba ShoptetDOMCartContentLoaded po přenačtení košíku. Úpravy košíku by na ně měly reagovat.

Měření a rychlost

Do HTML kódů se často vkládá i měřicí kód. Shoptet ale v nápovědě k Google Analytics varuje, že stejné měření nasazené víc cestami zároveň (propojení, HTML editor, Google Tag Manager) způsobuje konflikty a chyby. Měření proto patří do samostatné práce, viz měření e-shopu v GA4.

Každý přidaný skript se navíc načítá všem zákazníkům. Když po sérii úprav e-shop zpomalil, pomůže audit rychlosti webu. A když nevíte, co upravit, nejdřív se vyplatí UX audit, který ukáže, kde zákazníci váhají.

Úprava šablony, nebo Shoptet Premium

Shoptet Premium není služba na úpravy vzhledu, ale vyšší tarif Shoptetu. Podle dokumentace Shoptetu přidává privátní přístup k datům přes API a režim blank template, kde e-shop nenačítá CSS a JavaScript Shoptetu a vzhled se staví celý vlastní. Na běžné úpravy přes CSS a JavaScript Premium potřeba není.

webrocks pracuje jen na straně prohlížeče. Úpravy serveru a změny v datech Shoptetu nedělá, ty jsou věcí Shoptetu a jeho tarifů.

Kolik stojí úprava Shoptet šablony

Orientační hodinová sazba podle ceníku je od 500 Kč/hod. Cena závisí na rozsahu a složitosti, konkrétně na tom:

• kolik typů stránek úprava zasahuje (jen detail produktu, nebo i kategorie a košík),
• jestli stačí CSS, nebo je potřeba i JavaScript, který reaguje na dodatečně načítaný obsah,
• jak se má úprava chovat na mobilu,
• jestli je v e-shopu starší vlastní kód, který se musí nejdřív projít nebo uklidit.

Drobná změna vzhledu jednoho prvku je o hodně menší práce než přestavba detailu produktu s vlastní logikou. Pokud máte e-shop na WordPressu, podobně funguje úprava WooCommerce. Popište, co chcete změnit, přes kontaktní formulář a dostanete odpověď do 24 hodin.

Časté otázky

Dá se na Shoptetu udělat vlastní design?

V běžných tarifech ano, ale vždy jako úprava existující šablony přes CSS a JavaScript. Design úplně bez kódu Shoptetu umožňuje jen režim blank template v tarifu Shoptet Premium.

Přepíše aktualizace šablony moje úpravy?

Hlavní riziko je jinde: aktualizace může změnit HTML, na které se úpravy odkazují, a ty pak přestanou fungovat. Odložené aktualizace dávají čas úpravy zkontrolovat, po termínu se ale aktualizace přijme automaticky.

Jak se vlastní kód do Shoptetu vkládá?

Ve Vzhled a obsah → Editor → HTML kód do sekcí Záhlaví a Zápatí, nebo přes HTML editor v Návrháři šablon. Kód nad 8 192 znaků se podle nápovědy Shoptetu nahraje jako soubor přes (S)FTP a v sekci se na něj odkáže.

Co se stane s úpravami, když změním šablonu?

Data e-shopu podle nápovědy k šabloně obchodu zůstanou, mění se jen vzhled. Vlastní CSS a JavaScript ale vychází z HTML konkrétní šablony, takže po změně je potřeba ho projít a upravit. Šablona se mění jen v Návrháři šablon.

Postaví webrocks i nový e-shop od nuly?

Ne. webrocks upravuje existující e-shopy na Shoptetu a WooCommerce. Pro nový e-shop je potřeba hledat jiného dodavatele, úpravy pak můžou navázat.