Šablona obchodu
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.
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.
Změnou šablony vám také zůstávají všechny zakoupené rozšiřující funkce a 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
Přehled šablon naleznete v sekci Vzhled a Obsah → Šablony. Pod obrázkem každé šablony najdete tlačítko Ukázkový e-shop, kde si můžete šablonu prohlédnout v akci.
Změnit šablonu vašeho obchodu můžete v Návrháři šablon, kde si také můžete šablonu nejprve prohlédnout a vyzkoušet, než jí zveřejníte zakázníkům.
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 využít funkci Návrháře šablon.
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 funkce 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í 1536 x 1024 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é tyto prvky: 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:
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í funkci 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 funkce 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 funkci 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 funkce 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 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 funkci 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.
