Proč Shoptet šablona nestačí
Shoptet je skvělá platforma pro české e-shopy. Má solidní zázemí, pravidelné aktualizace, propojení s dopravci, platebními branami a českou podporou. Pro spuštění e-shopu je to rozumná volba, zvláště pro živnostníky a menší firmy.
Jenže každý plán Shoptetu přichází s omezenou sadou šablon. A ty šablony používají tisíce dalších e-shopů. Zákazník, který nakupuje online pravidelně, je pozná na první pohled. Výsledek? Váš e-shop nevypadá jako váš brand, vypadá jako Shoptet.
Právě tady vstupuje do hry vlastní CSS. Shoptet umožňuje vkládat vlastní styly přes administraci a výsledek může být radikálně jiný než výchozí šablona. Beze změny platformy, bez migrace dat, bez ztráty SEO pozic.
CSS (Cascading Style Sheets) je jazyk, který říká prohlížeči, jak má web vypadat. Barvy, fonty, rozestupy, zaoblení, stín, animace. Neovlivňuje logiku košíku, platby ani správu produktů. Tu obsluhuje Shoptet. Design je ale to první, co zákazník vidí. A první dojem rozhoduje.
Co přes CSS na Shoptetu změnit lze – a co ne
Co CSS změní
- Barvy celého e-shopu (brand palette)
- Fonty a typografie (velikost, řez, řádkování)
- Design tlačítek a formulářů
- Hlavička a patička (layout, logo, menu)
- Produktové karty (stín, hover efekty, odznak)
- Stránka produktu (pořadí a styl prvků)
- Bannery a promo sekce na úvodní stránce
- Mobilní verze a responzivní chování
- Animace a přechody (transitions)
- Skrytí nebo vizuální potlačení nepotřebných prvků
Co CSS nezmění
- Strukturu stránek (pořadí bloků v HTML)
- Nové funkce (konfigurátor, porovnání produktů)
- Logiku košíku nebo objednávkového procesu
- URL strukturu a přesměrování
- Výkon a rychlost načítání (to řeší šablona a hosting)
- Správu produktů, kategorií nebo zákazníků
- Napojení na dopravce nebo platební brány
Jak se CSS do Shoptetu vkládá
Shoptet nabízí v administraci pole Vlastní CSS, kam lze vložit libovolný CSS kód. Ten se načte na každé stránce e-shopu a přepíše styly výchozí šablony. Díky tomu jsou úpravy bezpečné vůči aktualizacím. Když Shoptet aktualizuje šablonu, vaše CSS zůstane nedotčené.
Cesta v administraci je zpravidla: Vzhled → Šablony → Editovat šablonu → Vlastní CSS. Přesné umístění se může lišit podle verze šablony a plánu Shoptetu.
Někteří vývojáři zasahují přímo do souborů šablony (.less nebo
.css souborů). To funguje, ale při každé aktualizaci šablony
Shoptetem o změny přijdete. Správná cesta je vždy pole Vlastní CSS nebo
samostatný soubor nahraný přes FTP, na který šablona odkazuje.
Co konkrétně CSS úprava změní na vašem e-shopu
Abstrakt nestačí. Tady jsou konkrétní příklady toho, co se po profesionální CSS úpravě na Shoptet e-shopu změní:
Brand identita místo generické šablony
Výchozí Shoptet šablona má svou vlastní barevnou paletu, výchozí font (zpravidla systémový) a zaoblení prvků, které nikomu nepatří. Po CSS úpravě váš e-shop používá vaše firemní barvy, vaše písmo a váš vizuální styl. Zákazník, který zná váš Instagram nebo firemní web, e-shop okamžitě pozná jako váš.
Produktové karty, které prodávají
Výchozí produktové karty na Shoptetu jsou funkční, ale vizuálně průměrné. CSS umožní přidat jemný stín, zaoblit rohy, zvýraznit hover efekt (co se stane, když zákazník najedede myší), změnit polohu ceny nebo odznaku „Novinka" a upravit font a velikost názvu produktu. Malé změny, ale prodejní dopad je měřitelný.
Mobilní verze na míru
Přes 60 % nákupů dnes probíhá na mobilu. Výchozí responsivní chování Shoptet šablony je přijatelné, ale ne optimální. CSS media queries dovolí přesně řídit, jak se e-shop chová na různých velikostech obrazovky, od kompaktního menu v hlavičce po správné zobrazení produktových fotek na malém displeji.
Hlavička a patička jako součást brandu
Hlavička je první věc, kterou zákazník vidí. Výchozí Shoptet hlavičky jsou navrženy univerzálně. Fungují pro všechny, ale nevynikají pro nikoho. CSS úprava umožní změnit výšku, pozadí, styl navigace, umístění vyhledávání a košíku, nebo přidat barevný pruh s akční nabídkou.
DIY vs. profesionální úprava – v čem je rozdíl
Technicky může CSS do Shoptetu vložit kdokoliv. Stačí otevřít pole Vlastní CSS, napsat pár řádků a uložit. Proč tedy vůbec platit za profesionála?
DIY (sami nebo ChatGPT)
- Výsledek závisí na vašich znalostech CSS
- Generované kódy z AI často kolidují se Shoptet šablonou
- Změna se rozbije na mobilu, i když na desktopu funguje
- Přidání jedné věci může rozhodit jinou sekci
- Bez znalosti specifik šablony hledáte správné selektory hodiny
- Po aktualizaci šablony nevíte, co se rozbilo a proč
Profesionální CSS úprava
- Kód je psaný přesně pro vaši šablonu a verzi Shoptetu
- Testováno na desktopu, tabletu i mobilu
- Změny jsou strukturované a komentované, snadno se upraví
- Nekoliduje s budoucími aktualizacemi šablony
- Výsledek odpovídá vaší brand identitě, ne náhodě
- Rychlejší – co vám zabere dny, profesionál vyřeší za hodiny
Kolik CSS úprava Shoptet e-shopu stojí
Záleží na rozsahu. Orientační přehled:
(barvy, fonty, tlačítka)
(hlavička, patička, produkty)
(celý e-shop + mobil)
Ve srovnání s migrací na jinou platformu nebo vývojem e-shopu na míru je to výrazně levnější a rychlejší cesta, jak získat e-shop, který vypadá jako váš.
Jak spolupráce probíhá
Konzultace a analýza
Podíváme se na váš e-shop, šablonu, brand manuál nebo inspiraci. Ujasníme, co chcete změnit a co musí zůstat. Konzultace je zdarma.
Nabídka a náhled
Pošlu nezávaznou nabídku s rozsahem prací a cenou. U větších projektů připravím vizuální náhled před samotným kódováním.
CSS úprava a testování
Kód píšu a zároveň testuji na desktopu, tabletu i mobilu. Pracuji buď na testovacím prostředí, nebo přímo v administraci, záleží na rozsahu.
Předání a zpětná vazba
Po dokončení dostanete e-shop ke kontrole. Případné drobné korekce jsou součástí ceny. Předám vám i CSS soubor pro případ budoucích úprav.
Pro koho to má smysl
CSS restyling Shoptet e-shopu je ideální řešení, pokud:
- Shoptet máte a jste s ním spokojeni funkčně, ale vizuálně vám nesedí
- Váš e-shop vypadá „jako ze šablony" a chcete se odlišit od konkurence
- Provozujete zavedený e-shop a migrace na jinou platformu by znamenala ztrátu dat a SEO
- Máte brand manuál nebo alespoň jasnou představu o barvách a stylu
- Nechcete platit za vývoj celého e-shopu od nuly, ale základní šablona vám nestačí
Nejčastěji se na mě obrací majitelé e-shopů, kteří Shoptet spustili sami ze šablony a po půl roce chtějí vypadat profesionálněji, aniž by měnili platformu nebo přepisovali celý e-shop. CSS restyling jim dá výsledek za zlomek ceny a ve zlomku času oproti jiným cestám.
Časté otázky
Lze na Shoptetu udělat vlastní design?
Ano, Shoptet umožňuje vkládat vlastní CSS kód do každé šablony. Lze změnit barvy, fonty, rozložení sekcí, styl tlačítek, hlavičku, patičku i produktové karty. Výsledek závisí na zvoleném plánu a šabloně.
Kolik stojí úprava Shoptet designu přes CSS?
Záleží na rozsahu změn. Základní úprava barev a fontů (brand kit) začíná od 3 000 Kč. Kompletní restyling celého e-shopu včetně mobilní verze vychází na 10 000–20 000 Kč. Oproti výměně platformy nebo vývoji e-shopu na míru je to výrazně rychlejší a levnější.
Co CSS na Shoptetu změnit nedokáže?
CSS ovlivňuje pouze vizuální vrstvu. Nemůže měnit strukturu stránek, přidávat nové funkce, upravovat logiku košíku ani měnit URL strukturu. Pro tyto změny by bylo potřeba vlastní Shoptet doplněk nebo migrace na jinou platformu.
Přepíše Shoptet moje CSS úpravy při aktualizaci šablony?
Pokud vkládáte CSS přes pole Vlastní CSS v administraci Shoptetu, aktualizace šablony vaše úpravy nepřepíše. Problém nastává, pokud byly změny prováděny přímo v souborech šablony. Ty aktualizace přepsat může.
Jak dlouho trvá úprava Shoptet designu?
Základní brand úprava (barvy, fonty, tlačítka) trvá 1–3 dny. Kompletní restyling e-shopu včetně všech stránek a mobilní verze počítejte na 1–2 týdny. Záleží na složitosti šablony a rozsahu požadavků.
