Šablóna obchodu
V tomto článku vás prevedieme tým najdôležitejším o šablónach. Dozviete sa, čo sú šablóny, aké šablóny máte k dispozícii a čo ponúkajú.
Špecifikácia rozmerov pre logá, carousely a ďalšie prvky nájdete v našom článku Rozmery bannerov, loga a hlavičke na šablónach.
Čo je šablóna?
Šablóna obchodu udáva vzhľad vášho e-shopu. Jedná sa o kostru, ktorá udáva rozvrhnutie vášho menu, produktov, kategórií a rubrík.
Šablónu môžete kedykoľvek zmeniť. Dáta, ktoré ste do e-shopu nahrali (produkty, zákazníci, objednávky atď.), vám nezmiznú.
Zmenou šablóny sa zmení iba vzhľad obchodu. Za zmenu šablóny sa považuje aj prepnutie medzi farebnými schémami v rámci jednej šablóny. Prvky, ktoré ste umiestnili do pätičky, pravého či ľavého stĺpca a ktoré šablóny v základnom zobrazení nemá, sa presunú do Koša. Resetuje sa taktiež Rozvrhnutie stránky.
Zmenou šablóny vám taktiež zostávajú všetky zakúpené doplnky.
Zmenou šablóny sa nezmení ani obsah bannerov, uvidíte teda tie, ktoré už nahrané boli, upraví sa len ich grafické znázornenie.
Naše šablóny
Nové šablóny pre váš e-shop naši grafici neustále pripravujú a v administrácii pravidelne pribúdajú. Ich výber nájdete v sekcii Vzhľad a Obsah → Šablóny. Po zvolení vybranej šablóny kliknite na Uložiť a zmena šablóny sa prejaví.
Pod obrázkom každej šablóny nájdete tlačidlo Ukážkový e-shop, kde si môžete šablónu prehliadnuť v akcii.
Prečo sa so šablónami čo najviac vyhrať?
Pretože je to veľmi jednoduché. Náš editor vie veľa vecí, aj keď to nie je na prvý pohľad zrejmé. Kombináciou vzhľadu stránky, či už ide o bočné panely, počet produktov na riadok, farby atď., je nespočetne. Vždy záleží na vašom vkuse a chuti všetky vyskúšať. Je to iba na vás, čo si namixujete.
Najvhodnejšou chvíľou pre testovanie šablóny je fáza prípravy e-shopu. Pokiaľ si chcete otestovať šablónu a jej grafické možnosti v ostrej prevádzke, odporúčame si na to založiť nový testovací e-shop. Viac informácií o možných postupoch nájdete v článku Testovanie zmien v e-shope.
V tomto článku si ukážeme, aké sú prednosti a vlastnosti jednotlivých šablón, čo vedia a nevedia.
U každej šablóny taktiež máte príklad toho, čo s ňou vedeli vykúzliť klienti pred vami.
10 vecí, ktoré by ste mali vedieť o šablónach
- Šablóny, ktoré nemajú daný prvok v základnom nastavení, ich pri prepnutí na inú šablónu vyhadzujú do Koša.
- Šablóny, ktoré v základnom nastavení doplnkové bannery a carousel nemajú, si ju ale ponechávajú.
- Vzhľad šablóny do veľkej miery ovplyvňuje Rozvrhnutie stránky a Prvky.
- Rôzne šablóny umožňujú rôzny pomer obrázkov.
- Pravý stĺpec vie zobraziť šablóny Soul, Rock a Pop.
- Ľavý stĺpec vedia všetky šablóny okrem Echa.
- Menej je niekedy viac, pre vzdušný a úhľadný design odporúčame používať ľavý stĺpec len na podstránke.
- Bannery (okrem doplnkových), ktoré pridáte v zobrazení na ploche (desktop) nebudú v mobilnom zobrazení vidieť.
- V mobilnom zobrazení miznú všetky efekty po prejedení myšou.
- Mobilné zobrazenie testujte. Najlepšie sú na to Vývojárske nástroje v prehliadači Edge (záložka Emulácia). Používajte vždy najnovšiu verziu prehliadača.
Šablóny
Samba
Jedná sa o jednoduchú a zároveň modernú šablónu s veľkým priestorom pre prezentáciu jednotlivých produktov. Hodí sa skôr pre menší počet produktov a kategórií, ale ponúka prémiový vzhľad. V rámci našich šablón je unikátne umiestnenie článkov z blogu na homepage a vzhľad vyhľadávania. Jednotlivé bannery sú prispôsobené pre vkladanie textu priamo v administrácii, nie je teda potrebné pripravovať bannery s textom v obrázku. Rovnako ako šablóna Disco vie zobraziť podkategórie z ľavého stĺpca nad výpis produktov a pre produkty na homepage ponúka slider.
- Carousel,
- až dva doplnkové bannery na pozícii Top,
- jeden doplnkový banner na pozíciách Stred, Pätička, Kategórie,
- jednotlivé bannery sú pripravené pre vkladanie textov z administrácie,
- články z blogu na homepage,
- slider produktov pre hlavnú stránku,
- unikátny vzhľad vyhľadávania,
- v kategórii je možné po prejdení myšou zobraziť druhý obrázok,
- možnosť presunúť podkategórie z ľavého menu nad výpis produktov,
- zaoblené rohy prvkov,
- prvok Newsletter je vždy zobrazený nad pätičkou,
- dvojfarebné ikonky,
- ako jediná šablóna zobrazuje vyhľadávanie v košíku.
Mobilné zobrazenie
- pri scrollovaní sa skrýva hlavička,
- v mobilnej hlavičke je umiestnený prepínač meny a jazykov,
- skrývanie záložiek v detaile produktu do hamburger menu.
Disco
Šablóna zaujme čistým a elegantným designom s výrazným carouselom na hlavnej stránke. Medzi unikátne funkcie patrí slider produktov pre hlavnú stránku, súvisiace a podobné produkty a presunutie podkategórií z ľavého stĺpca nad výpis produktov. Ojedinelé je v rámci našich šablón taktiež spracovanie nákupného košíka zamerané na priehľadnosť a jednoduchosť. Šablóna taktiež umožňuje vložiť články z blogu priamo na hlavnú stránku.
- carousel
- dva doplnkové bannery na pozícii Top vpravo od carouselu
- až dva doplnkové bannery na pozícii Stred
- v Pätičke ľubovoľný počet bannerov
- články z blogu na homepage
- možnosť umiestnenia banneru na pozícii Kategórie
- slider produktov pre titulnú stránku
- pre okno vyhľadania sú zväčšené produktové fotografie ponúkaných produktov
- jedinečne riešený košík s prehľadným zobrazením darčekov
- vo výpise kategórie sa nezobrazuje značka
- v kategórii je možné po prejdení myšou zobraziť druhý obrázok
- možnosť presunúť podkategórie z ľavého menu nad výpis produktov
- slider pre zobrazenie Podobných a Súvisiacich produktov
- záložku Parametre je možné umiestniť buď vedľa popisu alebo ako samostatnú záložku
- efekt lupy v detaile produktu
- v náhľade kategórie podporuje zobrazenie tlačidla pre košík vrátane počtu kusov
Mobilné zobrazenie
- slider produktov zostáva aj v mobilnom zobrazení
- zväčšené horné menu
- podkategórie sú vždy zobrazené nad výpisom produktov
- možnosť zbalenia záložiek Podrobný popis, Popis značky, Diskusie a Hodnotení
Step
Šablóna s výrazným veľkým carouselom a tromi doplnkovými bannermi, ktoré ju prekrývajú. Zaujme taktiež výrazným, avšak minimalistickým, horným menu a fotografiami produktu na výšku.
- Carousel
- 3 doplnkové bannery na pozícii Top, ktoré ju čiastočne prekrývajú, v základnom nastavení o 100 px
- ideálny rozmer obrázku banneru v základnom nastavení má výšku 200 px, šírka je ľubovoľná, ale odporúčame pre najlepší efekt zachovať obdĺžnikový tvar
- odporúčaný počet bannerov pod carouselom sú tri
- je možné nahrať ľubovoľný počet, veľkosť banneru sa automaticky upraví
- 4 malé doplnkové bannery na pozícii Stred
- odporúčame pre nich tvar obdĺžnika, ideálny počet sú štyri
- do pätičky je možné vložiť ikonky s odkazmi alebo s doplňujúcimi informáciami
- atypicky riešené okná košíku, prihlásenie a hľadanie
- po kliknutí na ikonku hľadanie sa vysunie celé okno s lištou hľadania a s odporúčanými šiestimi produktami (to zaisťuje doplnok Top 10 najpredávanejších v obchode)
- skupiny tovarov na titulnej stránke sa zobrazujú ako záložky, ktoré sa dajú prepínať
- doplnkové bannery je možné umiestniť na pozíciu Kategórie
- možnosť presunúť podkategórie z ľavého menu nad výpis produktov
- v kategórii je možné po prejdení myšou zobraziť druhý obrázok
- v kategórii sa nezobrazuje hodnotenie produktov a značka
- obrázky produktov na výšku s pomerom strán 3:2 (odporúčané rozlíšenie 1536 x 1024 px)
- v obrázkoch produktu nie je možné použiť vodoznak
- efekt lupy v detaile produktu
- súvisiace a podobné produkty sú zbalené v menu pod produktom v detailu produktu
Mobilné zobrazenie
- v kategórii a v detaile produktu nie je omrvinková navigácia
- skupiny tovarov na titulnej stránke sa zbalia do hamburgerovej ponuky
- v detaile produktu sú do hamburger menu zbalené: Popis (produktu), Súvisiace, Podobné, Diskusie a Hodnotenie
Classic
Šablóna, ktorá vám najlepšie poslúži pre veľké množstvo kategórií a veľké množstvo produktov. Strohý, ale efektívny design vyzerá skvelo na mobilných zariadeniach.
- má najširšiu lištu menu zo všetkých šablón
- podkategórie sa v hornom menu zobrazujú po nabehnutí myšou s obrázkom a zoznamom podkategórií
- carousel
- 2 doplnkové bannery na pozícii Top napravo od carouselu
- 1 doplnkový banner na pozícii Stred
- 3 doplnkové bannery na pozícii Pätičky
- do pätičky je možné vložiť ikonky s odkazmi alebo s doplňujúcimi informáciami
- výrazná omrvinková navigácia
- v kategórii nie je vidieť značka produktu
- doplnkové bannery je možné umiestniť na pozíciu Kategórie
- možnosť presunúť podkategórie z ľavého menu nad výpis produktov.
- na hlavnej stránke a v kategórii je pri produkte vidieť časť krátkeho popisu produktu
- efekt lupy pri produkte
- súvisiace produkty sú vidieť rovno pod produktom v detaile produktu
- podobné produkty sú zbalené v menu v detaile produktu pod produktom
Mobilné zobrazenie
- omrvinková navigácia zmizne
- zobrazené časti krátkeho popisu na titulnej stránke a v kategórii zostávajú
- súvisiace produkty sú vidieť rovno pod produktom v detaile produktu
- podobné produkty sú zbalené v menu v detaile produktu pod produktom
Vzhľad šablóny si môžete vylepšiť doplnkami
Môžete si taktiež vybrať jednu z doplnkových šablón odvodených od šablóny Classic
Waltz
Vizuálne podmanivá šablóna s možnosťou nahrania videa na titulnej strane cez celú šírku obrazovky. Vyniká taktiež panelom vyhľadávania, kde je možné zákazníkovi odporučiť najväčšie množstvo produktov zo všetkých šablón.
Z funkcií potom oceníte hlavičku s horným menu, ktorá zostáva prichytená hore k obrazovke. Zákazník tak má menu stále po ruke bez nutnosti použiť bočný panel.
Jedna z dvoch šablón, ktorá používa pri produkte naše dizajnové tlačidlá pre zdieľanie na sociálnych sieťach.
- video sa zobrazuje iba na titulnej strane
- podporujeme iba formát MP4
- odporúčame nahrať do hlavičky obrázok, ktorý sa na mobilnom zariadení a na všetkých stránkach okrem úvodnej zobrazí namiesto videa
- je možné taktiež použiť iba obrázok v hlavičke. I s ním je možné docieliť skvelé výsledky
- nie je možné využiť carousel
- 4 doplnkové bannery na pozícii Top
- 2 doplnkové bannery na pozícii Pätičky
- do pätičky je možné vložiť ikonky s odkazmi alebo s doplňujúcimi informáciami
- hlavička prichytená hore na obrazovke
- po nabehnutí myšou na ikonku hľadania zobrazí vyhľadávaciu lištu a 9 odporúčaných produktov (tieto produkty zobrazí len keď máte aktívny doplnok Top 10 najpredávanejších v obchode)
- doplnkové bannery je možné umiestniť na pozícii Kategórie
- možnosť presunúť podkategórie z ľavého menu nad výpis produktov.
- v kategórii nie je vidieť značku produktu
- produkty je možné radiť maximálne tri na riadok, zobrazenie štyroch produktov na riadok nie je podporované
- efekt lupy pri produkte
- súvisiace a podobné produkty sú zbalené v menu pod produktom v detaile produktu
- v náhľade kategórie podporuje zobrazenie tlačidla pre košík vrátane počtu kusov
Mobilné zobrazenie
- hlavička pri rolovaní dole mizne, pri rolovaní hore sa znova objaví
- video zmizne, objaví sa obrázok nahraný do záhlavia
- súvisiace a podobné produkty sú zbalené v menu pod produktom v detailu produktu
Tango
Jednoduchá a elegantná šablóna s veľkým množstvom priestoru. Vzdušný design dáva vyniknúť vzhľadu vašich produktov. Kvôli svojej jednoduchosti má všetko, čo zákazník očakáva.
Jediná šablóna, ktorá má logo v strede obrazovky a omrvinkovú navigáciu v mobilnom zobrazení.
- v základe nemá šablóna zapnutý carousel
- carousel sa môže zobraziť cez celú šírku obrazovky
- v základe nemá doplnkové bannery, ale je možné ich pridať na pozíciu Pätičky (na inú pozíciu ich nie je možné pridať)
- do pätičky je možné vložiť ikonky s odkazmi alebo s doplňujúcimi informáciami
- na pozadie e-shopu odporúčame použiť plnú farbu namiesto obrázku
- stĺpec s hlavným obsahom aj obidva postranné stĺpce sú transparentné, obrázok na pozadí by tak presvital v celom e-shope
- krátke horné menu, zbytok položiek je zbalený do hamburgerového menu
- po kliknutí na ikonku vyhľadávania sa vysunie celé okno s lištou hľadanie a s odporučenými šiestimi produktmi (to zaisťuje doplnok Top 10 najpredávanejších v obchode)
- v kategórii nie je vidieť hodnotenie produktu a značka
- nie je možné použiť zobrazenie druhého obrázku po nabehnutí myšou na produkt v kategórii
- možnosť presunúť podkategórie z ľavého menu nad výpis produktov.
- v kategórii nie je možné použiť doplnok Top najpredávanejšie v kategórii
- sociálne siete sa zobrazujú len v podobe ikoniek
- produkty na titulnej stránke je potrebné umiestniť do záložky, ktorá je v Produkty → Titulná strana prvá v poradí
- produkty z ďalších záložiek sa na titulnú stránku neprenášajú
- jeden z produktov sa vždy zobrazuje cez dve polia s produktmi
- pri rozvrhnutí produktov po troch na riadok sa jedná o piatu položku, pri rozvrhnutí po štyroch je to potom produkt siedmy
- tuto vlastnosť šablóny nie je možné v administrácii deaktivovať
- na takomto produkte nie je efekt po prejdení myšou
- pri takomto produkte je hneď vidieť krátky popis
- zobrazenie cez dve políčka je na titulnej strane aj v kategórii
- nemá efekt lupy pri produkte
- súvisiace a podobné produkty sú zbalené v menu pod produktom v detaile produktu
Mobilné zobrazenie
- produkt, ktorý je v desktopovom zobrazení cez dve polia, je tu vidieť normálne v jednom poli
- v kategórii a podkategórii zostáva omrvinková navigácia
- súvisiace a podobné produkty sú zbalené v záložke v menu pod produktom
Techno
Šablóna je po grafickej stránke striedma, s dôrazom na veľké produktové fotografie. Tie najlepšie vyniknú bez použitia bočných panelov v detaile produktu. Preto určite využijete hlavičku s horným menu, ktorá zostáva prichytená hore k obrazovke. Zákazník tak má navigáciu vždy na dosah.
Ako jedna z dvoch šablón používa pri produkte naše designové tlačidlá pre zdieľanie na sociálnych sieťach. Tlačidlá sú umiestnené vpravo od obrázku produktu.
- veľký a výrazný carousel
- je možné použiť aj doplnkové bannery, ktoré sa na pozícii Top zobrazujú napravo od carouselu
- prichytávacia hlavička s menu
- v základe má 2 bannery na pozícii Stred
- do pätičky je možné vložiť ikony s odkazmi alebo s doplňujúcimi informáciami
- po kliknutí na ikonu vyhľadávania sa vysunie celé okno s lištou hľadania a s odporučenými šiestimi produktmi (to zaisťuje doplnok Top 10 najpredávanejších v obchode )
- odkazy na sociálne siete sú iba ikonky
- nie je pre nich potrebný prvok Kontakt
- sú umiestnené v pätičke napravo
- doplnkové bannery je možné umiestniť na pozíciu Kategórie
- možnosť presunúť podkategórie z ľavého menu nad výpis produktov.
- v kategórii nie je možné zobraziť značku a hodnotenie produktu
- prvý produkt v kategórii je cez štyri ďalšie produkty
- nemá efekt lupy v detaile produktu
- v detaile produktu je krátky popis produktu pod názvom, pod ním cena a tlačidlo Do košíka, pod nimi potom veľký obrázok produktu
- pokiaľ je zapnutý ľavý stĺpec, je toto rozloženie iné
- súvisiace a podobné produkty je možné vidieť rovno pod produktom v detaile produktu
- v náhľade kategórie podporuje zobrazenie tlačidla pre košík vrátane počtu kusov
Mobilné zobrazenie
- v detailu produktu je názov, pod ním krátky popis, pod ním cena, tlačidlo Do košíka a až potom obrázok produktu
- pod obrázkom produktu sú veľké ikony pre zdieľanie na sociálnych sieťach
- súvisiace produkty je možné vidieť rovno pod produktom v detaile produktu
- podobné produkty sú v záložke v menu pod produktom
Šablóny, ktorým skončila podpora
Následujúce šablóny môžete používať rovnakým spôsobom ako vyššie uvedené šablóny z najnovšej generácie. Novšie funkcie, ktoré sú vyvíjané primárne pre najnovšie šablóny, však nemusia byť na šablónach Echo, Soul, Rock a Pop dostupné.
Echo
Jedná sa o atypickú šablónu, na ktorej je možné zobraziť maximálne 10 produktov. Najlepšie pracuje s jedným produktom. Všetky produkty sa zobrazujú na titulnej stránke.
Jediná šablóna, ktorá si ponecháva všetky doplnkové bannery aj v mobilnom zobrazení.
- všetky produkty sú na titulnej stránke
- je potrebné ich vždy pridať v sekcii Produkty → Titulná strana
- šablóna neponúka klasický strom kategórií
- nie je možné použiť carousel
- má 3 doplnkové bannery na pozícii Top
- 2 doplnkové bannery na pozícii Stred
- zobrazujú sa pod posledným produktom, nad popisom e-shopu
- 1 doplnkový banner na pozícii Pätičky
- tento banner sa objaví na pozícii dole vedľa popisu titulnej stránky
- do pätičky je možné vložiť ikony s odkazmi alebo s doplňujúcimi informáciami
- do záhlavia je potrebné nahrať fotografiu úvodného produktu ako obrázok na pozadie
- pokiaľ nahráte iba obrázok, nebude šablóna pracovať správne
- varianty úvodného produktu sú zobrazené nad sebou pod doplnkovými bannermi na pozícii Top
- nezobrazuje sa tu pravý a ľavý stĺpec a možnosť rozvrhnutia stránky
- všetky dôležité prvky je potrebné vložiť do pätičky stránky
- efekt lupy pri produkte
- v detaile pri produkte nie je možné zobraziť popis značky a použiť doplnok Strážny pes
- podporuje zobrazenie tlačidla pre košík vrátane počtu kusov
Mobilné zobrazenie
- varianty úvodného produktu sú zobrazené nad sebou pod doplnkovými bannermi na pozícii Top
- nie sú vidieť prvky umiestnené do pätičky webu
Soul
Šablóna, ktorá vás iste osloví krásnym a účelným designom. Do horného menu na úvodnej stránke ľahko dostanete veľké množstvo odkazov.
Jedna z dvoch šablón, na ktoré po nabehnutí myšou nad produkt uvidia zákazníci krátky popis produktu spolu s ďalšími informáciami.
- carousel
- 2 doplnkové bannery na pozícii Top napravo od carouselu
- 1 cez celú stránku široký doplnkový banner na pozícii Stred
- 3 doplnkové bannery na pozícii Pätičky umiestnené pod popisom e-shopu
- do pätičky je možné vložiť ikony s odkazmi alebo s doplňujúcimi informáciami
- v kategórii nie je možné použiť zobrazenie druhého obrázku po prejdení myšou
- po prejdení myšou nad produktom v kategórii je vidieť krátky popis produktu, dostupnosť, kód, značka a záruka
- efekt je podfarbený konverznou farbou e-shopu
- efekt lupy v detaile produktu (prístupný iba pri rozlíšení obrázku 1024 x 768 px)
- súvisiace a podobné produkty sú vidieť rovno pod produktom v detailu produktu
- v náhľade kategórie podporuje zobrazenie tlačidla pre košík vrátane počtu kusov
Mobilné zobrazenie
- nie sú vidieť prvky umiestnené do pätičky webu
- súvisiace a podobné produkty sú vidieť rovno pod produktom v detaile produktu
Rock
Jedná sa o šablónu, ktorá je veľmi flexibilná v zobrazení kategórií a produktov. Dokáže zaujať jemným a vkusným dekorom, ktorý slúži ako deliaca čiara.
Ako jediná zo šablón má v hlavičke ikonky sociálnych sietí. Používa ich teda mimo prvku Kontakt. Po nabehnutí myšou nad produkt taktiež ukáže krátky popis produktu.
- carousel
- v základe nemá žiadne doplnkové bannery, ale je možné ich využiť
- pod carouselem je popis obchodu, ktorý sa v základe zobrazuje vycentrovaný na stred, ale je možné zvoliť aj iné zarovnanie
- popis obchodu je oddelený od carouselu jemným dekorom
- rovnakým dekorom sú oddelené jednotlivé riadky s produktami v kategórii
- odkazy sociálnej sietí v hlavičke stránky pomocou ikon
- do pätičky je možné vložiť ikony s odkazmi alebo s doplňujúcimi informáciami
- po nabehnutí myšou nad produkt sa políčko s produktom zväčší smerom dole a ukáže krátky popis produktu a ikonku oka
- tento efekt je na titulnej stránke a v kategórii
- efekt lupy v detaile produktu
- súvisiace a podobné produkty sú vidieť rovno pod produktom v detaile produktu
- v náhľade kategórie podporuje zobrazenie tlačidla pre košík vrátane počtu kusov
Mobilné zobrazenie
- zmiznú ikony sociálnych sietí z hlavičky stránky
- dekor zostáva aj v mobilnom zobrazení
- nie sú vidieť prvky umiestnené do pätičky webu
- v náhľade kategórie sa u produktov nezobrazujú tlačidlá Košík a detail.
- súvisiace a podobné produkty sú zbalené do špeciálneho roletkového menu
- pod súvisiacimi a podobnými produktami v detaile produktu sa objavuje tlačidlo, ktoré používateľa vráti späť do kategórie
Pop
Šablóna na prvý pohľad zaujme carouselom a výrazným tlačidlom vyhľadávania osadeným uprostred hlavičky.
Jedná sa o jedinú šablónu, ktorá nepodporuje doplnkové bannery.
- carousel
- s touto šablónou nie je možné používať doplnkové bannery
- na hlavnej stránke a v kategórii je pri produkte vidieť časť krátkeho popisu produktu
- v kategórii nie je vidieť hodnotenie produktu
- efekt lupy v detaile produktu
- do pätičky je možné vložiť ikony s odkazmi alebo s doplňujúcimi informáciami
- súvisiace a podobné produkty sú vidieť rovno pod produktom v detaile produktu
- v náhľade kategórie podporuje zobrazenie tlačidla pre košík vrátane počtu kusov
Mobilné zobrazenie
- nie sú vidieť prvky umiestnené do pätičky webu
- časť krátkeho popisu produktu, ktorá bola vidieť na titulnej stránke a v kategórii zmizne
- súvisiace a podobné produkty sú zbalené do špeciálneho roletkového menu
- pod súvisiacimi a podobnými produktami v detaile produktu sa objavuje tlačidlo, ktoré používateľa vráti späť do kategórie
