---
title: "Návrhár šablón"
articleId: "themeEditor"
lastEdited: "2026-01-08 11:09 UTC"
canonical: https://podpora.shoptet.sk/navrhar-sablon/
breadcrumb: "Shoptet Podpora / Nastavenia / Vzhľad"
language: sk
sections:
  - { title: "Čo Návrhár šablón prináša?", level: 2, url: "https://podpora.shoptet.sk/navrhar-sablon/#co-navrhar-sablon-prinasa" }
  - { title: "Čo všetko sa dá v Návrhári upraviť?", level: 4, url: "https://podpora.shoptet.sk/navrhar-sablon/#co-vsetko-sa-da-v-navrhari-upravit" }
  - { title: "Čo všetko (zatiaľ) nejde v Návrhári upraviť?", level: 4, url: "https://podpora.shoptet.sk/navrhar-sablon/#co-vsetko-zatial-nejde-v-navrhari-upravit" }
  - { title: "Ako Návrhár funguje?", level: 2, url: "https://podpora.shoptet.sk/navrhar-sablon/#ako-navrhar-funguje" }
  - { title: "Ukladanie a zverejnenie zmien", level: 3, url: "https://podpora.shoptet.sk/navrhar-sablon/#ukladanie-a-zverejnenie-zmien" }
  - { title: "Zmazanie konceptu", level: 4, url: "https://podpora.shoptet.sk/navrhar-sablon/#zmazanie-konceptu" }
  - { title: "Rozhranie editora", level: 3, url: "https://podpora.shoptet.sk/navrhar-sablon/#rozhranie-editora" }
  - { title: "Horná lišta", level: 4, url: "https://podpora.shoptet.sk/navrhar-sablon/#horna-lista" }
  - { title: "Ľavý panel", level: 4, url: "https://podpora.shoptet.sk/navrhar-sablon/#lavy-panel" }
  - { title: "Zmena šablóny", level: 3, url: "https://podpora.shoptet.sk/navrhar-sablon/#zmena-sablony" }
  - { title: "Úpravy prvkov šablóny", level: 3, url: "https://podpora.shoptet.sk/navrhar-sablon/#upravy-prvkov-sablony" }
  - { title: "Nastavenie šablóny", level: 3, url: "https://podpora.shoptet.sk/navrhar-sablon/#nastavenie-sablony" }
  - { title: "HTML editor", level: 3, url: "https://podpora.shoptet.sk/navrhar-sablon/#html-editor" }
---

# Návrhár šablón

Návrhár šablón je nový editor, ktorý prináša mnoho vylepšení oproti pôvodným úpravám vzhľadu šablóny v administrácii. Jednoducho, bezpečne a z jedného miesta teraz upravíte logo obchodu, bannery, favicon a ďalšie prvky.

Editor nájdete v administrácii e-shopu v **Vzhľad a obsah → Návrhár šablón**, a to zdarma vo všetkých tarifách.

## Čo Návrhár šablón prináša?

![](https://res.cloudinary.com/shoptet/image/upload/podpora/contents/sk/theme-editor-01-sk.png)

**Všetko dôležité je na jednom mieste**. Úpravy rôznych prvkov, ktoré boli doteraz na rôznych miestach administrácie, nájdete teraz prehľadne na jednom mieste v novom Návrhári.

**Upravujte bez obáv**. Úpravy v Návrhári sa ihned zobrazia v náhľade vášho obchodu, ale iba vám vo vašej administrácii. Pokiaľ úpravy nezverejníte, vaši zákazníci ich neuvidia. Môžete si tak všetky úpravy vzhľadu vášho obchodu, vrátane úprav kódu šablóny, v pokoji vyskúšať a odladiť, než ich zobrazíte svojim zákazníkom.

**Všetky úpravy v Návrhári sa priebežne automaticky ukladajú**, takže môžete úpravy kedykoľvek vrátiť tlačidlom Späť. A tiež môžete opustiť editor a vrátiť sa k rozpracovaným úpravám neskôr.

**Jednoducho nájdete to, čo chcete upraviť – inšpektor prvkov**. Návrhár prináša jednoduchý výber prvku, ktorý chcete upraviť. Stačí na neho kliknúť priamo v náhľade obchodu a možnosti úprav sa vám otvoria v postrannom menu.

#### Čo všetko sa dá v Návrhári upraviť?

Návrhár šablón vám umožní jednoducho a z jedného miesta zmeniť [farebnosť šablóny](https://podpora.shoptet.sk/farebnost-sablony/), [logo a záhlavie e-shopu](https://podpora.shoptet.sk/zahlavie-e-shopu/), [pozadie e-shopu](https://podpora.shoptet.sk/pozadie-e-shopu/), [rozvrhnutie stránok](https://podpora.shoptet.sk/rozvrhnutie-layout-stranky/) a [prvkov](https://podpora.shoptet.sk/prvky/), [favicon](https://podpora.shoptet.sk/ostatne-nastavenia-vzhladu/#favicon), [bannery](https://podpora.shoptet.sk/bannery/) a vybrané [ostatné nastavenia vzhľadu](https://podpora.shoptet.sk/ostatne-nastavenia-vzhladu/). Upravovať cez Návrhár môžete tiež [HTML kódy šablóny](https://podpora.shoptet.sk/html-kody/).

Všetky tieto funkcie môžete naďalej upravovať priamo z administrácie e-shopu mimo Návrhára. Jedinou výnimkou je zmena [šablóny obchodu](https://podpora.shoptet.sk/sablona-obchodu/). **[Šablónu obchodu](https://podpora.shoptet.sk/sablona-obchodu/) je možné meniť iba z Návrhára šablón**.

#### Čo všetko (zatiaľ) nejde v Návrhári upraviť?

Návrhár šablón postupne vyvíjame a vylepšujeme. Niektoré vzhľadové a obsahové funkcie a prvky v ňom zatiaľ nie je možné upravovať. Ide napríklad o položky v menu, uvítací text na titulnej strane, zoznam kategórií v pätičke atď. U týchto prvkov je v Návrhárovi vždy odkaz na ich nastavenie v administrácii e-shopu.

V rámci Návrhára tiež nie je možné upravovať niektoré nastavenia, ktoré sa týkajú zobrazenia objednávok a produktov. Návrhár ďalej neslúži na editáciu samotného obsahu (textu) článkov, stránok, popisov produktov a kategórií.

Návrhár šablón budeme ďalej vyvíjať a upravovať a počítame s tým, že mnoho tu spomínaných prvkov bude možné v budúcnosti upraviť priamo v Návrhárovi. Veľmi uvítame akúkoľvek vašu [spätnú väzbu](https://podpora.shoptet.sk/helpdesk-ako-nas-kontaktovat/#spatna-vazba-k-systemu), ako ste s editorom spokojní, alebo čo by ste v ňom radi videli za ďalšie funkcie.

## Ako Návrhár funguje?

### Ukladanie a zverejnenie zmien

**Všetky úpravy vášho obchodu, ktoré vykonáte v Návrhárovi, sa prejavia iba v náhľade obchodu v editore**. Priamo vo vašom obchode sa zmeny prejavia až po ich zverejnení, kliknutím na tlačidlo **Zverejniť**.

![Zmeny sa prejavia iba po kliknutí na tlačidlo zverejniť.](https://res.cloudinary.com/shoptet/image/upload/podpora/contents/sk/theme-editor-02-sk.png)

Všetky zmeny, ktoré v editore vykonáte, sa automaticky ukladajú do konceptu. Vykonané zmeny tak môžete ľahko vrátiť späť. V histórii zmien sa môžete posúvať dopredu i dozadu, podobne ako v iných aplikáciách a programoch.

Koncept úprav je naviazaný na [účet správcu administrácie](https://podpora.shoptet.sk/spravcovia-obchodu/). To znamená, že rozpracovaný koncept vidíte iba vy vo vašom účte.

Koncept zostáva trvalo uložený, a to aj po zatvorení editora. Takže sa nemusíte obávať, že o rozpracované úpravy šablóny prídete. K rozpracovanému konceptu sa môžete kedykoľvek vrátiť.

#### Zmazanie konceptu

> **Upozornenie**
>
> **Zmazanie konceptu úprav je nevratné. Zmazaný koncept nemožno nijak obnoviť ani vrátiť späť.**

![](https://res.cloudinary.com/shoptet/image/upload/podpora/contents/sk/theme-editor-03-sk.png)

Ak nie ste spokojní s rozpracovaným konceptom zmien a chcete začať odznova, môžete celý koncept zmazať. Zmazaním konceptu sa všetky nastavenia v editore vrátia do stavu, v akom ich aktuálne vidia vaši zákazníci.

### Rozhranie editora

Rozhranie editora je navrhnuté na mieru pre účely úprav šablón, a preto sa líši od administrácie e-shopu. Preto jednotlivé prvky rozhrania editora opisujeme podrobne v tejto sekcii.

Rozloženie niektorých prvkov editora sa môže líšiť na základe šírky obrazovky vášho zariadenia.

> **Info**
>
> **Návrhár šablón aktuálne nie je dostupný v zobrazení pre mobilné zariadenia. Pre úpravy z mobilných zariadení je potrebné využiť nastavenia priamo v administrácii e-shopu.**

#### Horná lišta

![](https://res.cloudinary.com/shoptet/image/upload/podpora/contents/sk/theme-editor-05-sk.png)

**Výber stránky** – zvoľte, aký typ stránky chcete v náhľade vidieť. Na výber máte napríklad *Úvodnú stránku*, *Kategóriu*, *Detail produktu*, *Články a stránky*, apod.

To, ktorá kategória, produkt, článok alebo stránka sa v náhľade editora zobrazí ako predvolená, je dané systémovými pravidlami a nie je možné toto nastavenie zmeniť. Ak by ste si napríklad chceli zobraziť detail produktu pre vami zvolený produkt, stačí si vypnúť inšpektor prvkov a môžete sa v e-shope pohybovať úplne bez obmedzení a otvoriť si akúkoľvek stránku vášho obchodu.

**Výber jazyka** – v prípade, že na e-shope využívate [viac jazykov](https://podpora.shoptet.sk/cudzie-jazyky/), môžete si tu vybrať, v akom jazyku chcete úpravy e-shopu vykonávať, a zároveň v akom jazyku sa vám bude zobrazovať náhľad obchodu.

![](https://res.cloudinary.com/shoptet/image/upload/podpora/contents/sk/theme-editor-07-sk.png)

**Vypnúť/Zapnúť inšpektor prvkov** – týmto tlačidlom môžete vypnúť alebo zapnúť inšpektor prvkov. Zapnutý inšpektor prvkov vám v náhľade obchodu po prejdení na konkrétny prvok ukáže, o aký prvok ide, a kliknutím naň vám otvorí nastavenie daného prvku.

Pri vypnutom inšpektore prvkov sa v náhľade obchodu môžete pohybovať po celom e-shope prakticky bez obmedzenia a otvoriť si tak ľubovoľnú stránku, a alebo si napríklad vytvoriť aj testovaciu objednávku.

![](https://res.cloudinary.com/shoptet/image/upload/podpora/contents/sk/theme-editor-08-sk.png)

**Typ zobrazenia** – ukáže vám, ako by vaše úpravy obchodu vyzerali na rôznych typoch zariadení (mobil, tablet, počítač).

![](https://res.cloudinary.com/shoptet/image/upload/podpora/contents/sk/theme-editor-09-sk.png)

**Späť v úpravách / Dopredu v úpravách** – týmito šípkami sa môžete pohybovať históriou vykonaných úprav späť a vpred.

Ak ste už v koncepte vykonali nejaké úpravy, zobrazuje sa vedľa šípok ukazovateľ, či boli zmeny úspešne uložené, a kedy bola vykonaná posledná úprava.

![](https://res.cloudinary.com/shoptet/image/upload/podpora/contents/sk/theme-editor-10-sk.png)

**Zverejniť** – kliknutím na tlačidlo sa všetky zmeny vykonané v editore zverejnia vo vašom e-shope a uvidia ich tak všetci návštevníci vášho obchodu.

![](https://res.cloudinary.com/shoptet/image/upload/podpora/contents/sk/theme-editor-11-sk.png)

**Zobraziť obchod** – v novom okne vám otvorí aktuálnu zverejnenú podobu vášho obchodu.

#### Ľavý panel

![](https://res.cloudinary.com/shoptet/image/upload/podpora/contents/sk/theme-editor-12-sk.png)

**Zmeniť šablónu** – otvorí stránku pre výber a zmenu šablóny. Podrobnosti v sekcii [Zmena šablóny](https://podpora.shoptet.sk/navrhar-sablon/#zmena-sablony).

**Prvky** – otvorí vám menu pre úpravu jednotlivých prvkov na aktuálne zvolenom type stránky. Podrobnosti v sekcii [Úpravy prvkov šablóny](https://podpora.shoptet.sk/navrhar-sablon/#upravy-prvkov-sablony).

**Nastavenie** – zobrazí vám všetky všeobecné nastavenia šablóny obchodu. Podrobnosti v sekcii [Nastavenie šablóny](https://podpora.shoptet.sk/navrhar-sablon/#nastavenie-sablony).

**HTML editor** – otvorí editor HTML kódov. Podrobnosti v sekcii [HTML editor](https://podpora.shoptet.sk/navrhar-sablon/#html-editor).

**Celá obrazovka** – skryje postranné panely editora.

![](https://res.cloudinary.com/shoptet/image/upload/podpora/contents/sk/theme-editor-13-sk.png)

**Koncepty používateľov** – prehľad rozpracovaných konceptov ostatných [správcov administrácie](https://podpora.shoptet.sk/spravcovia-obchodu/). Ich koncept si môžete jednoducho skopírovať a upraviť zo svojho účtu.

**Zahodiť koncept** – po kliknutí na ikonu koša sa vám zobrazí okno na potvrdenie, či naozaj chcete rozpracované zmeny zahodiť. Zahodenie rozpracovaného konceptu je nevratné, a teda nie je možné sa k zmazaným úpravám vrátiť.

**Pomocník** – odkaz na tento článok v pomocníkovi.

**Vrátiť sa do administrácie** – zavrie editor a vráti vás do administrácie e-shopu. Rozpracované úpravy v editore zostanú vo vašom účte uložené, môžete sa k nim kedykoľvek vrátiť.

### Zmena šablóny

![](https://res.cloudinary.com/shoptet/image/upload/podpora/contents/sk/theme-editor-14-sk.png)

Aktuálnu šablónu v náhľade obchodu môžete zmeniť kliknutím na ikonu **Zmeniť šablónu** v ľavom paneli editora. Otvorí sa vám prehľad so všetkými dostupnými šablónami. Pri zvolenej šablóne kliknite na tlačidlo **Vyskúšať v editore**.

Pre zverejnenie vybranej šablóny v obchode je potrebné kliknúť v editore na tlačidlo **Zverejniť**.

> **Upozornenie**
>
> **Zmeniť šablónu e-shopu je možné iba v Návrhári šablón.** Zmenu šablóny už nie je možné vykonať priamo v administrácii e-shopu vo Vzhľad a obsah → Šablóny.

### Úpravy prvkov šablóny

V ľavom menu editora môžete priamo upravovať jednotlivé prvky šablóny. Zoznam prvkov na úpravu sa líši podľa toho, aký typ stránky máte v editore zvolený – *Úvodnú stránku*, *Kategóriu*, *Detail produktu* alebo *Články a stránky*. Niektoré prvky sú spoločné pre všetky typy, niektoré sú dostupné iba v jednom type (napr. na úvodnej stránke).

Jednotlivé prvky môžete vybrať buď v ľavom menu, alebo kliknutím na daný prvok priamo v náhľade šablóny obchodu (k tomu je potrebné mať zapnutý inšpektor prvkov).

V Návrhári šablón je možné upraviť väčšinu prvkov priamo v editore. Niektoré prvky je ale naďalej možné upraviť iba priamo v administrácii e-shopu. Pri takých prvkoch sa vám zobrazí odkaz na konkrétnu stránku s nastaveniami. Do budúcna bude možné všetky tieto prvky upraviť priamo v editore.

### Nastavenie šablóny

Všeobecné nastavenia šablóny, ktoré sú spoločné pre všetky stránky v obchode, môžete spravovať v sekcii Nastavenia. Ide napríklad o výber farebnosti a písma šablóny, zmenu pozadia obchodu, alebo napríklad zmenu [favicony](https://podpora.shoptet.sk/ostatne-nastavenia-vzhladu/#favicon).

> **Prístupnosť**
>
> Farby šablóny, pozadia a ďalších vzhľadových prvkov voľte tak, aby boli vzájomne dostatočne [kontrastné](https://podpora.shoptet.sk/pristupnost/#farebnost-a-kontrast), a spĺňali tak [pravidlá prístupnosti](https://podpora.shoptet.sk/pristupnost/).

### HTML editor

> **Varovanie**
>
> **Funkcia HTML editora je určená pokročilým používateľom**, ktorí majú skúsenosti s tvorbou webových stránok a ovládajú HTML, CSS, a prípadne aj JavaScript. **Vložením neodbornej alebo nevhodnej úpravy môže dôjsť k narušeniu funkčnosti e-shopu**.

> **Varovanie**
>
> **Vložený kód nemusí byť kompatibilný s budúcimi úpravami systému a neručíme za jeho správnu funkčnosť.**

V Návrhári šablón môžete prostredníctvom HTML editora vkladať kódy s vašimi vlastnými úpravami. Rovnako ako pri všetkých iných úpravách v Návrhári šablón sú aj vykonané úpravy v HTML editore viditeľné iba v náhľade obchodu pre váš účet. Váš kód si tak môžete najprv odladit v Návrhári šablón a až potom ho zverejniť pre návštevníkov vášho obchodu.

HTML editor v Návrhári šablón funguje takmer rovnako ako HTML editor v administrácii e-shopu vo **Vzhľad a Obsah → Editor → HTML kód**. Podrobnosti k práci s vlastnými HTML kódmi nájdete v [samostatnom článku](https://podpora.shoptet.sk/html-kody/).

> **Tip**
>
> **Existujúce úpravy HTML kódu, ktoré máte vložené v e-shope, sa prenesú aj do Návrhára šablón.**

![](https://res.cloudinary.com/shoptet/image/upload/podpora/contents/sk/theme-editor-15-sk.png)