V tomto článku vás provedeme tím nejdůležitějším o šablonách. Dozvíte se, co jsou šablony, jaké šablony máte k dispozici a co nabízejí.
Specifikace rozměrů pro loga, carousely a další prvky najdete v našem článku Rozměry bannerů, loga a záhlaví na šablonách.
Obsah:
Co je šablona?
Šablona obchodu udává vzhled vašeho e-shopu. Jedná se o kostru, která udává rozvržení vašeho menu, produktů, kategorií a rubrik.
Šablonu můžete kdykoliv změnit. Data, která jste do e-shopu nahráli (produkty, zákazníci, objednávky atd.), vám nezmizí.
Změnou šablony se změní pouze vzhled obchodu. Za změnu šablony se považuje i přepnutí mezi barevnými schématy v rámci jedné šablony. Prvky, které jste umístili do zápatí, pravého nebo levého sloupce a které šablona v základním zobrazením nemá, se přesunou do Koše. Resetuje se také Rozvržení stránky.
Změnou šablony vám také zůstávají všechny zakoupené doplňky.
Změnou šablony se nezmění ani obsah bannerů, uvidíte tedy ty, které už nahrány byly, upraví se jen jejich grafické znázornění.
Naše šablony
Na nových šablonách pro váš e-shop pravidelně pracujeme a v administraci pravidelně přibývají. Jejich výběr naleznete v sekci Vzhled a Obsah → Šablony. Po zvolení vybrané šablony klikněte na Uložit a změna šablony se projeví.
Pod obrázkem každé šablony najdete tlačítko Ukázkový e-shop, kde si můžete šablonu prohlédnout v akci.
Proč si s šablonami co nejvíce vyhrát?
Protože je to velmi jednoduché. Náš editor umí velkou spoustu věcí, i když to není na první pohled zřejmé. Kombinací vzhledu stránky, ať už jde o boční panely, počet produktů na řádek, barvy atd., je nespočet. Vždy hodně záleží na vašem vkusu a chuti všechny vyzkoušet. Je to jen na vás, co si namixujete.
Nejvhodnější chvílí pro testování šablony je fáze přípravy e-shopu. Pokud si chcete otestovat šablonu a její grafické možnosti v ostrém provozu, doporučujeme si na to založit nový testovací e-shop. Více informací o možných postupech naleznete v článku Testování změn v e-shopu.
V tomto článku si ukážeme, jaké jsou přednosti a vlastnosti jednotlivých šablon, co umějí a neumějí.
10 věcí, které byste měli vědět o šablonách
- Šablony, které nemají daný prvek v základním nastavení, ho při přepnutí na jinou šablonu vyhazují do Koše.
- Šablony, které v základním nastavení doplňkové bannery a carousel nemají, si ho ale ponechávají.
- Vzhled šablony do velké míry ovlivňuje Rozvržení stránky a Prvky.
- Různé šablony umožňují různý poměr obrázků.
- Pravý sloupec umí zobrazit šablony Soul, Rock a Pop.
- Levý sloupec umí všechny šablony kromě Echa.
- Méně je někdy více, pro vzdušný a úhledný design doporučujeme používat levý sloupec jen na podstránce.
- Bannery (kromě doplňkových), které přidáte v zobrazení na ploše (desktop) nebudou v mobilním zobrazení vidět.
- V mobilním zobrazení mizí všechny efekty po přejetí myší.
- Mobilní zobrazení testujte. Nejlepší jsou na to Vývojářské nástroje v prohlížeči Edge (záložka Emulace). Používejte vždy nejnovější verzi prohlížeče.
Šablony
Samba
Jedná se o jednoduchou a zároveň moderní šablonu s velkým prostorem pro prezentaci jednotlivých produktů. Hodí se spíše pro menší počet produktů a kategorií, ale nabízí pro ně prémiový vzhled. V rámci našich šablon je unikátní umístění článků z blogu na homepage a vzhled vyhledávání. Jednotlivé bannery jsou přizpůsobeny pro vkládání textu přímo v administraci, není tedy potřeba připravovat bannery s textem v obrázku. Stejně jako šablona Disco umí zobrazit podkategorie z levého sloupce nad výpis produktů a pro produkty na homepage nabízí slider.
- Carousel.
- Až dva doplňkové bannery na pozici Top.
- Jeden doplňkový banner na pozicích Střed, Zápatí, Kategorie.
- Jednotlivé bannery jsou připravené pro vkládání textů z administrace.
- Články z blogu na homepage.
- Slider produktů pro hlavní stránku.
- Unikátní vzhled vyhledávání.
- V kategorii je možné po přejetí myší zobrazit druhý obrázek.
- Možnost přesunout podkategorie z levého menu nad výpis produktů.
- Zaoblené rohy prvků.
- Prvek Newsletter je vždy zobrazen nad patičkou.
- Dvoubarevné ikonky.
- Jako jediná šablona zobrazuje vyhledávání v košíku.
Mobilní zobrazení
- Při scrollování se skrývá hlavička.
- V mobilní hlavičce je umístěný přepínač měny a jazyků.
- Skrývání záložek v detailu produktu do hamburger menu.
Disco
Šablona zaujme čistým a elegantním designem s výrazným carouselem na hlavní stránce. Mezi unikátní funkce patří slider produktů pro hlavní stránku, související a podobné produkty. Ojedinělé je v rámci našich šablon také zpracování nákupního košíku zaměřené na přehlednost a jednoduchost a možnost vložit články z blogu přímo na hlavní stránku.
- Carousel.
- Dva doplňkové bannery na pozici Top vpravo od carouselu.
- Až dva doplňkové bannery na pozici Střed.
- V Zápatí libovolný počet bannerů.
- Možnost umístit banner na pozici Kategorie.
- Slider produktů pro titulní stránku.
- Pro okno vyhledání jsou zvětšené produktové fotografie nabízených produktů.
- Jedinečně řešený košík s přehledným zobrazením dárků.
- Ve výpisu kategorie se nezobrazuje značka.
- V kategorii je možné po přejetí myší zobrazit druhý obrázek.
- Možnost přesunout podkategorie z levého menu nad výpis produktů.
- Slider pro zobrazení Podobných a Souvisejících produktů.
- Záložku Parametry je možné umístit buď vedle popisu nebo jako samostatnou záložku.
- Efekt lupy v detailu produktu.
- V náhledu kategorie podporuje zobrazení tlačítka pro košík včetně počtu kusů.
Mobilní zobrazení
- Slider produktů zůstává i v mobilním zobrazení.
- Zvětšené horní menu.
- Podkategorie jsou vždy zobrazeny nad výpisem produktů.
- Možnost sbalení záložek Podrobný popis, Popis značky, Diskuse a Hodnocení.
Step
Šablona s výrazným velkým carouselem a třemi doplňkovými bannery, které ho překrývají. Zaujme také výrazným minimalistickým horním menu a fotografiemi produktu na výšku.
- Carousel.
- 3 doplňkové bannery na pozici Top, které ho částečně překrývají (v základním nastavení o 100 px).
- Ideální rozměr obrázku banneru v základním nastavení má výšku 200 px, šířka je libovolná. Doporučujeme pro nejlepší efekt zachovat obdélníkový tvar.
- Doporučený počet bannerů pod carouselem jsou tři.
- Je možné nahrát libovolný počet, velikost banneru se automaticky upraví.
- 4 malé doplňkové bannery na pozici Střed.
- Doporučujeme pro ně tvar obdélníku, ideální počet jsou čtyři.
- Do zápatí je možné vložit ikonky s odkazy nebo s doplňujícími informacemi.
- Atypicky řešená okna košíku, přihlášení a hledání.
- Po kliknutí na ikonku hledání se vysune celé okno s lištou hledání a s doporučenými šesti produkty (to zajišťuje doplněk Top 10 nejprodávanějších v obchodě).
- Skupiny zboží na titulní straně se zobrazují jako přepínatelné záložky.
- Doplňkové bannery je možno umístit i na pozici Kategorie.
- Možnost přesunout podkategorie z levého menu nad výpis produktů.
- V kategorii je možné po přejetí myší zobrazit druhý obrázek.
- V kategorii se nezobrazuje hodnocení produktu a značka.
- Obrázky produktů na výšku s poměrem stran 3:2 (doporučené rozlišení 1024 x 1536 px).
- Efekt lupy v detailu produktu.
- Související a podobné produkty jsou sbalené v menu pod produktem v detailu produktu.
Mobilní zobrazení
- V kategorii a v detailu produktu není drobečková navigace.
- Skupiny zboží na titulní straně se sbalí do hamburgerové nabídky.
- V detailu produktu jsou do hamburgerové nabídky sbalené: Popis (produktu), Související, Podobné, Diskuse a Hodnocení.
Classic
Šablona, která vám nejlépe poslouží pro velké množství kategorií a velké množství produktů. Strohý ale efektivní design vypadá skvěle na mobilních zařízeních.
- Má nejširší lištu menu ze všech šablon.
- Po najetí myši se podkategorie v horním menu zobrazují s obrázkem a výčtem podkategorií.
- Carousel.
- 2 doplňkové bannery na pozici Top napravo od carouselu.
- 1 doplňkový banner na pozici Střed.
- 3 doplňkové bannery na pozici Zápatí.
- Do zápatí je možné vložit ikonky s odkazy nebo s doplňujícími informacemi.
- Výrazná drobečková navigace.
- V kategorii není vidět značka produktu.
- Doplňkové bannery možno umístit na pozici Kategorie.
- Možnost přesunout podkategorie z levého menu nad výpis produktů.
- Na hlavní stránce a v kategorii je u produktu vidět část krátkého popisu produktu.
- Efekt lupy u produktu.
- Související produkty jsou vidět rovnou pod produktem v detailu produktu.
- Podobné produkty jsou sbalené v menu v detailu produktu pod produktem.
Mobilní zobrazení
- Drobečková navigace mizí.
- Zobrazení částí krátkého popisu na titulní stránce a v kategorii zůstává.
- Související produkty jsou vidět rovnou pod produktem v detailu produktu.
- Podobné produkty jsou sbalené v menu v detailu produktu pod produktem.
Vzhled šablony si můžete vylepšit doplňky:
- Úprava šablony Classic (Amber),
- Úprava šablony Classic (Crystal),
- Úprava šablony Classic (Jaspis),
- Úprava šablony Classic (Paxio).
Můžete si také vybrat jednu z doplňkových šablon odvozených od šablony Classic
Waltz
Vizuálně podmanivá šablona s možností nahrání videa na titulní stranu přes celou šířku obrazovky. Vyniká také panelem hledání, kde je možné zákazníkovi doporučit největší množství produktů ze všech šablon.
Z funkcí pak oceníte hlavičku s horním menu, která zůstává přichycena nahoře k obrazovce. Zákazník tak má menu stále po ruce bez nutnosti použít boční panel.
Jedna ze dvou šablon, která používá u produktu naše designová tlačítka pro sdílení na sociálních sítích.
- Video se zobrazuje pouze na titulní straně.
- Podporujeme pouze formát *.mp4.
- Doporučujeme nahrát do záhlaví obrázek, který se na mobilním zařízení a na všech stránkách kromě úvodní zobrazí místo videa.
- Lze také použít pouze obrázek v záhlaví, i s ním docílíte skvělých výsledků.
- Nelze použít carousel.
- 4 doplňkové bannery na pozici Top.
- 2 doplňkové bannery na pozicí Zápatí.
- Do zápatí je možné vložit ikonky s odkazy nebo s doplňujícími informacemi.
- Hlavička přichycená nahoře na obrazovce.
- Při najetí myší na ikonku hledání se zobrazí hledací lišta a 9 doporučených produktů.
- Tyto produkty zobrazí, jen když máte aktivní doplněk Top 10 nejprodávanějších v obchodě.
- Doplňkové bannery je možné umístit na pozici Kategorie.
- Možnost přesunout podkategorie z levého menu nad výpis produktů.
- V kategorii není vidět značka produktu.
- Produkty lze řadit maximálně tři na řádek, zobrazení čtyř produktů na řádek není podporováno.
- Efekt lupy u produktu.
- Související a podobné produkty jsou sbalené v menu pod produktem v detailu produktu.
- V náhledu kategorie podporuje zobrazení tlačítka pro košík včetně počtu kusů.
Mobilní zobrazení
- Příchytná hlavička při rolování dolů mizí, při rolování nahoru se zase objeví.
- Video mizí, objeví se obrázek nahraný do záhlaví.
- Související a podobné produkty jsou sbalené v menu pod produktem v detailu produktu.
Tango
Jednoduchá a elegantní šablona s velkým množstvím prostoru. Vzdušný design dává vyniknout vzhledu vašich produktů. Přes svoji jednoduchost má vše, co zákazník očekává.
Jediná šablona, která má logo uprostřed obrazovky a drobečkovou navigaci v mobilním zobrazení.
- V základu nemá šablona zapnutý carousel.
- Carousel se může zobrazit přes celou šířku obrazovky.
- V základu nemá doplňkové bannery, ale lze je přidat na pozici Zápatí.
- Do zápatí je možné vložit ikonky s odkazy nebo s doplňujícími informacemi.
- Na pozadí e-shopu doporučujeme použit plnou barvu místo obrázku.
- Sloupec s hlavním obsahem i oba postranní sloupce jsou transparentní, obrázek na pozadí by tak prosvítal v celém e-shopu.
- Krátké horní menu, zbytek položek je sbalený do hamburgerové nabídky.
- Po kliknutí na ikonku hledání se vysune celé okno s lištou hledání a s doporučenými šesti produkty (to zajišťuje doplněk Top 10 nejprodávanějších v obchodě).
- V kategorii není vidět hodnocení produktu a značka.
- Nelze použít zobrazení druhého obrázku po najetí myší na produkt v kategorii.
- Možnost přesunout podkategorie z levého menu nad výpis produktů.
- V kategorii není možné použít doplněk Top nejprodávanější v kategorii.
- Sociální sítě se zobrazují jen v podobě ikonek.
- Produkty na titulní straně je třeba umístit do záložky, která je v Produkty → Titulní strana první v pořadí.
- Produkty z dalších záložek se na titulní stranu nepřenášejí.
- Jeden z produktů se vždy zobrazuje přes dvě pole s produkty.
- Při rozvržení produktů po třech na řádek se jedná o pátou položku, při rozvržení po čtyřech je to pak produkt sedmý.
- Tuto vlastnost šablony nelze v administraci deaktivovat.
- Na takovém produktu nefunguje efekt po přejetí myší a vždy se zobrazuje krátký popis.
- Zobrazení přes dvě políčka je na titulní straně i v kategorii.
- Nemá efekt lupy u produktu.
- Související a podobné produkty jsou sbalené v menu pod produktem v detailu produktu.
Mobilní zobrazení
- Produkt, který je v desktopovém zobrazení přes dvě pole, je zde vidět normálně v jednom poli.
- V kategorii a podkategorii zůstává drobečková navigace.
- Související a podobné produkty jsou sbalené v záložce v menu pod produktem.
Techno
Šablona po grafické stránce střídmá, s důrazem na velké produktové fotografie. Ty nejlépe vyniknou bez použití bočních panelů v detailu produktu. Proto jistě využijete hlavičku s horním menu, která zůstává přichycena nahoře k obrazovce. Zákazník tak má navigaci vždy na dosah.
Jako jedna ze dvou šablon používá u produktu naše designová tlačítka pro sdílení na sociálních sítích. Tlačítka jsou umístěna vpravo od obrázku produktu.
- Velký a výrazný carousel.
- Lze použít i doplňkové bannery, které se na pozici Top zobrazují napravo od carouselu.
- Příchytná hlavička s menu.
- V základu má 2 bannery na pozici Střed.
- Do zápatí je možné vložit ikonky s odkazy nebo s doplňujícími informacemi.
- Po kliknutí na ikonku hledání se vysune celé okno s lištou hledání a s doporučenými šesti produkty (to zajišťuje doplněk Top 10 nejprodávanějších v obchodě).
- Odkazy na sociální sítě jsou pouze ikonkou.
- Není pro ně třeba prvek Kontakt.
- Jsou umístěny v patičce napravo.
- Doplňkové bannery možno umístit na pozici Kategorie.
- Možnost přesunout podkategorie z levého menu nad výpis produktů.
- V kategorii a v detailu produktu nefunguje pravý panel.
- V kategorii nejde zobrazit značku a hodnocení produktu.
- První produkt v kategorii je přes čtyři další produkty.
- Nemá efekt lupy v detailu produktu.
- V detailu produktu je krátký popis produktu pod názvem, pod ním cena a tlačítko Do košíku, pod nimi pak velký obrázek produktu.
- Pokud je zapnutý levý sloupec, je toto rozložení jiné.
- Související a podobné produkty jsou vidět rovnou pod produktem v detailu produktu.
- V náhledu kategorie podporuje zobrazení tlačítka pro košík včetně počtu kusů.
Mobilní zobrazení
- V detailu produktu je název, pod ním krátký popis, pod ním cena, tlačítko Do košíku a až pak obrázek produktu.
- Pod obrázkem produktu jsou velké ikony pro sdílení na sociálních sítích.
- Související produkty jsou vidět rovnou pod produktem v detailu produktu.
- Podobné produkty jsou v záložce v menu pod produktem.
Šablony, kterým skončila podpora
Následující šablony můžete používat stejným způsobem jako výše uvedené šablony z nejnovější generace. Novější funkce, které jsou vyvíjeny primárně pro nejnovější šablony, však nemusí být na šablonách Echo, Soul, Rock a Pop dostupné.
Echo
Jedná se o atypickou šablonu, na které je možné zobrazit maximálně 10 produktů. Nejlépe pracuje s jedním produktem. Všechny produkty se zobrazují na titulní stránce.
Jediná šablona, která si ponechává všechny doplňkové bannery i v mobilním zobrazení.
- Všechny produkty jsou na titulní stránce.
- Je třeba je vždy přidat v sekci Produkty → Titulní strana.
- Šablona nenabízí klasický strom kategorií.
- Nelze použít carousel.
- Má 3 doplňkové bannery na pozici Top.
- 2 doplňkové bannery na pozici Střed.
- Zobrazují se pod posledním produktem, nad popisem e-shopu.
- 1 doplňkový banner na pozici Zápatí.
- Tento banner se objeví na pozici dole vedle popisu titulní stránky.
- Do zápatí je možné vložit ikonky s odkazy nebo s doplňujícími informacemi.
- Do záhlaví je třeba nahrát fotografii úvodního produktu jako obrázek na pozadí.
- Pokud nahrajete pouze obrázek, nebude šablona pracovat správně.
- Varianty úvodního produktu jsou zobrazené nad sebou pod doplňkovými bannery na pozici Top.
- Neplatí tu pravý a levý sloupec a možnost rozvržení stránky.
- Všechny důležité prvky je třeba vložit do patičky stránky.
- Efekt lupy u produktu.
- V detailu u produktu není možné zobrazit popis značky a použít doplněk Hlídací pes.
- Podporuje zobrazení tlačítka pro košík včetně počtu kusů.
Mobilní zobrazení
- Varianty úvodního produktu jsou zobrazené nad sebou pod doplňkovými bannery na pozici Top.
- Nejsou vidět prvky umístěné do patičky webu.
Soul
Šablona, která váš jistě osloví krásným a účelným designem. Do horního menu na úvodní stránce snadno dostanete velkém množství odkazů.
Po najetí myší na produkt uvidí zákazníci krátký popis produktu spolu s dalšími informacemi.
- Carousel.
- 2 doplňkové bannery na pozici Top napravo od carouselu.
- 1 přes celou stránku široký doplňkový banner na pozici Střed.
- 3 doplňkové bannery na pozici Zápatí umístěné pod popisem e-shopu.
- Do zápatí je možné vložit ikonky s odkazy nebo s doplňujícími informacemi.
- V kategorii nelze použít zobrazení druhého obrázku po přejetí myší.
- Po přejetí myší nad produktem v kategorii je vidět krátký popis produktu, dostupnost, kód, značka a záruka.
- Efekt je podbarvený konverzní barvou e-shopu.
- Efekt lupy v detailu produktu (dostupný pouze při rozlišení obrázku 1024 x 768 px).
- Související a podobné produkty jsou vidět rovnou pod produktem v detailu produktu.
- V náhledu kategorie podporuje zobrazení tlačítka pro košík včetně počtu kusů.
Mobilní zobrazení
- Nejsou vidět prvky umístěné do patičky webu.
- Související a podobné produkty jsou vidět rovnou pod produktem v detailu produktu.
Rock
Jedná se o šablonu, která je velice flexibilní v zobrazení kategorií a produktů. Dokáže zaujmout jemným a vkusným dekorem, který slouží jako dělící čára.
Jako jediná z šablon má v hlavičce ikonky sociálních sítí. Používá je tedy mimo prvek Kontakt. Po najetí myší na produkt také ukáže krátký popis produktu.
- Carousel.
- V základu nemá žádné doplňkové bannery, ale lze je využít.
- Pod carouselem je popis obchodu, který se v základu zobrazuje vycentrovaný na střed, ale lze zvolit i jiné zarovnání.
- Popis obchodu je oddělen od carouselu jemným dekorem.
- Stejným dekorem jsou odděleny jednotlivé řádky s produkty v kategorii.
- Odkazy sociální sítě v hlavičce stránky pomocí ikon.
- Do zápatí je možné vložit ikonky s odkazy nebo s doplňujícími informacemi.
- Po najetí myší na produkt se políčko s produktem zvětší směrem dolů a ukáže krátký popis produktu a ikonku oka.
- Tento efekt je na titulní stránce a v kategorii.
- Efekt lupy v detailu produktu.
- Související a podobné produkty jsou vidět rovnou pod produktem v detailu produktu.
- V náhledu kategorie podporuje zobrazení tlačítka pro košík včetně počtu kusů.
Mobilní zobrazení
- Mizí ikony sociálních sítí z hlavičky stránky.
- Dekor zůstává i v mobilním zobrazení.
- Nejsou vidět prvky umístěné do patičky webu.
- V náhledu kategorie se u produktů nezobrazují tlačítka Košík a detail.
- Související a podobné produkty jsou sbalené do speciálního roletkového menu.
- Pod souvisejícími a podobnými produkty v detailu produktu se objevuje tlačítko, které uživatele vrátí zpět do kategorie.
Pop
Šablona na první pohled zaujme carouselem a výrazným tlačítkem hledání posazeným uprostřed hlavičky.
Jedná se o jedinou šablonu, která nepodporuje doplňkové bannery.
- Carousel.
- S touto šablonou nelze používat doplňkové bannery.
- Na hlavní stránce a v kategorii je u produktu vidět část krátkého popisu produktu.
- V kategorii není vidět hodnocení produktu.
- Efekt lupy v detailu produktu.
- Do zápatí je možné vložit ikonky s odkazy nebo s doplňujícími informacemi.
- Související a podobné produkty jsou vidět rovnou pod produktem v detailu produktu.
- V náhledu kategorie podporuje zobrazení tlačítka pro košík včetně počtu kusů.
Mobilní zobrazení
- Nejsou vidět prvky umístěné do patičky webu.
- Část krátkého popisu produktu, která byla vidět na titulní stránce a v kategorii, mizí.
- Související a podobné produkty jsou sbalené do speciálního roletkového menu.
- Pod souvisejícími a podobnými produkty v detailu produktu se objevuje tlačítko, které uživatele vrátí zpět do kategorie.