# Vzhled obchodu

> Jak vybrat šablonu, nastavit barvy a písma, nahrát loga, upravit záhlaví, menu a patičku, zapnout animace a proč se loga ukládají zvlášť.

- Sekce: Vzhled a obsah
- Stránka: https://shopzi.cz/dokumentace/vzhled/vzhled-obchodu
- Popisuje v administraci: /administrace/vzhled
- Ověřeno: 2026-10-20

---

**Vzhled** (skupina **Obsah** v levém menu) je studio, ve kterém rozhodujete, jak
obchod vypadá: šablona, barvy, písma, loga, záhlaví, patička a animace. Vpravo běží **Náhled
obchodu**, který se překresluje při každé změně.

Měnit vzhled smí **Editor**, **Manažer** a **Vlastník**. **Prohlížeč** studio otevře, ale ovládací
prvky má neaktivní.

Obsah úvodní stránky se skládá jinde, v editoru bloků, viz [Editor úvodní
stránky](/dokumentace/vzhled/editor-uvodni-stranky).

## Jak se ukládá [#jak-se-uklada]

Studio má vlevo šest sekcí: **Šablona**, **Barvy & písma**, **Logo & ikonka**, **Záhlaví**,
**Patička** a **Pohyb & efekty**. Všechno, co v nich měníte, je jen **rozpracovaná verze**. Na
web se to dostane až tlačítkem **Uložit změny** vpravo nahoře v **Vzhled**. Vedle
je **Zahodit**, které rozpracovanou verzi zruší bez ptaní.

> **Loga mají vlastní tlačítko** Sekce **Logo & ikonka** se ukládá samostatným tlačítkem **Uložit loga**, protože nahrává soubory. Hlavní **Uložit změny** loga neuloží a naopak. Je to jediná výjimka v celém studiu.

Při neplatné barvě uložení neproběhne a nahoře se objeví **Neplatná barva: použijte formát
\#RRGGBB.**

## Šablona [#sablona]

Šablona (**Vzhled → Šablona**) určuje typografii, zaoblení a stíny. Vyberete ji
kliknutím na dlaždici a **náhled se přepne okamžitě**. Žádné potvrzení se neobjeví, protože se
zatím nikde nic nezměnilo: dokud neuložíte, můžete odejít nebo použít **Zahodit**.

*Snímek obrazovky: Vzhled: šablonu vyberete kliknutím na dlaždici a na web ji pošle až tlačítko Uložit změny vpravo nahoře.*

Dlaždice se kreslí ve vaší primární barvě, takže hned vidíte, jak bude šablona vypadat s vaším
brandem. U každé je název šablony a jejího písma. Odkaz **Změnit primární barvu** nad dlaždicemi
vás přepne do sekce barev.

## Obrázek v pásu s nadpisem [#obrazek-v-pasu-s-nadpisem]

V **Vzhled → Šablona** je pod šablonami karta **Obrázek v pásu s nadpisem**.
Obrázek, který sem nahrajete, se ukáže za nadpisem a drobečkovou navigací na všech stránkách
obchodu: v katalogu, kategoriích, blogu, na kontaktu i na vlastních stránkách. Bez obrázku zůstává
pás v barvě šablony.

* Nahrajte širokou fotku, alespoň 1600 px. Nadpis na ní automaticky ztmavíme, aby byl čitelný.
* **Rozostření** má volby **Bez rozostření**, **Jemné** a **Silné**. Rozostřená fotka působí jako
  textura a neruší nadpis. Volba jde měnit, až když je obrázek nahraný.
* Uložte tlačítkem **Uložit změny** nahoře, jako ostatní změny vzhledu.

Stránka, která má vlastní obrázek (třeba dodavatel s fotkou), si ho nechá. Náhled vpravo pás
s fotkou nekreslí, výsledek uvidíte v obchodě.

## Barvy [#barvy]

Barvy nastavíte v **Vzhled → Barvy & písma**.

*Snímek obrazovky: Sekce Barvy & písma: primární a doplňkové barvy, režim povrchu a karta Kontrast a čitelnost s verdiktem pro každé místo obchodu.*

Karta **Primární barva** řídí tlačítka, odkazy a akcenty. Barvu vyberete dvěma způsoby:

* **Kliknutím na barevný čtvereček** otevřete výběr barvy: plochu sytosti a jasu a pod ní pruh
  odstínu. Obojí jde ovládat i šipkami na klávesnici.
* **Do pole vedle napíšete kód barvy.** Mřížka není povinná a stačí i zkrácený zápis, takže projde
  `8B0000`, `#8b0000` i `#abc`. Rozepsaný kód se neuloží, dokud není celý; do té doby pod polem svítí
  **Zadejte barvu jako #RRGGBB nebo #RGB, mřížka není povinná.**

Vedle se dopočítají dva odvozené odstíny (**Tmavší odstín** a **Světlejší odstín**).

Karta **Doplňkové barvy** má pole **Sekundární barva** a **Akcentová barva** a obě jsou nepovinná.
**Prázdné pole znamená barva podle šablony**, ne bílá: čtvereček v tu chvíli ukazuje barvu, kterou
šablona použije. Vlastní barvu zrušíte tlačítkem se šipkou zpět (**Zpět: Podle šablony**) nebo tím,
že pole vyprázdníte.

Pod poli je napsané, co sekundární barva v právě zvolené šabloně obarví. Akcent se používá na malá zvýraznění:
nadtitulky, štítky a hvězdičky u recenzí.

**Režim povrchu** má tři volby: **Podle šablony**, **Světlý** a **Tmavý**. Rozhoduje o pozadí,
textu a rámečcích celého obchodu. Pod volbou je napsané, jaký výchozí režim má zvolená šablona.

## Kontrast a čitelnost [#kontrast-a-citelnost]

V **Vzhled → Barvy & písma** je pod barvami karta **Kontrast a čitelnost**.
Pro sedm míst obchodu (**Text na tlačítku**, **Odkazy na pozadí stránky**, **Text v pruhu s názvem
stránky**, **Text v CTA pruhu**, **Text v záhlaví**, **Text v patičce** a **Akcent (velký text)**)
spočítá kontrastní poměr pro zvolený režim povrchu a napíše jeden ze tří verdiktů: **vyhovuje
(AA).**, **hraniční.**, nebo **nevyhovuje.** U záhlaví a patičky počítá i s barvami, které jste
nastavili přímo v jejich sekcích.

> **Měřič radí, ale nezakáže uložit** Nevyhovující kontrast vám v uložení nebrání. Je to upozornění, že text bude pro část zákazníků špatně čitelný; pod seznamem se pak objeví věta, že WCAG 2.1 AA vyžaduje 4,5:1 pro běžný text a 3:1 pro velký text. U posledního řádku (**Akcent**) se měří proti mírnější hranici 3:1, protože jde o velký text.

## Písma [#pisma]

Písma vybíráte v **Vzhled → Barvy & písma** v kartě **Písma**, zvlášť pro
**Nadpisy** a zvlášť pro **Text**. U obou je první volbou **Podle šablony** i s názvem písma, které
šablona používá, v závorce. Pod výběrem se ukazuje živá ukázka české věty („Příliš žluťoučký kůň“),
takže hned vidíte, jak si písmo poradí s diakritikou. Tlačítka používají písmo textu.

## Logo a ikonka webové stránky [#logo-a-ikonka-webove-stranky]

V **Vzhled → Logo & ikonka** je karta **Logo & ikonka webové stránky** se
třemi místy:

* **Logo (tmavé)** pro světlé pozadí,
* **Logo (světlé)** pro tmavé pozadí,
* **Ikonka webové stránky**, tedy malá ikona v záložce prohlížeče (favicon), ideálně čtverec
  64×64 px.

Každé místo naplníte jednou ze tří cest: kliknutím na **Nahrát** vyberete soubor z počítače,
tlačítkem **Knihovna** obrázek z [knihovny médií](/dokumentace/vzhled/media), nebo tlačítkem
**Generovat** ho necháte vytvořit AI (za kredity). Křížkem u náhledu logo odeberete. Nakonec klikněte
na **Uložit loga**.

Z počítače nahrajete PNG, JPG, WebP nebo GIF do 2 MB (tak to píše i nápověda u každého místa),
logo s průhledným pozadím i ikonku tedy jako PNG. Soubor SVG nebo ICO nahrání odmítne hláškou
o nepodporovaném formátu: převeďte ho na PNG. Ikonka vygenerovaná tlačítkem **Generovat** je
výjimka, ta vznikne rovnou jako ICO.

Záhlaví a patička loga odsud použijí, pokud v jejich sekcích nemáte nastavené vlastní.

## Záhlaví [#zahlavi]

Hlavičku obchodu nastavíte v **Vzhled → Záhlaví**. Nejdůležitější volby ve
skupině **Vzhled**:

* **Umístění loga**: **Vlevo (klasické)** nebo **Uprostřed**. Prostřední varianta přesune odkazy
  doleva a ikony doprava, ale do lišty se pak vejdou jen čtyři odkazy místo sedmi.
* **Šířka záhlaví**: **V rámečku (max. 1200 px)** nebo **Přes celou šířku**.
* **Barva pozadí**, **Barva textu** a **Barva nadpisů v mega menu**. Prázdné pole znamená barvu
  podle šablony.
* **Připnout při posouvání (sticky)**, **Spodní okraj** a **Průhledné záhlaví (přes hero)**.

Průhledné záhlaví splyne s úvodním obrázkem a má bílý text. Když je zapnuté i připnutí, po sjetí pod
úvodní obrázek se vrátí plné pozadí; bez připnutí zůstane průhledné na celé stránce. S připnutím
a nahraným světlým logem ukáže nad obrázkem světlé logo a po sjetí přepne na logo zvolené v záhlaví.
Nahrajte proto v sekci **Logo & ikonka** obě varianty.

Další skupiny:

* **Logo**: **Zdroj loga** (**Tmavé logo (z Loga)**, **Světlé logo (z Loga)** nebo **Vlastní**).
* **Ikony**: **Ikona košíku** a **Ikona účtu**.
* **Vyhledávání**: zaškrtávátko **Zobrazit vyhledávací pole** schová lupu v hlavičce. Samotné
  [vyhledávání](/dokumentace/marketing/vyhledavani) tím nevypnete.
* **Oznamovací pruh** nad hlavičkou, zapínaný zaškrtávátkem **Zobrazit pruh nad hlavičkou**.
  Vyplňuje se **Text**, **Odkaz (volitelný)**, **Text tlačítka (volitelný)**, **Barva pruhu**
  (**Barva obchodu**, **Tmavý**, **Světlý**) a **Odpočet do (volitelný)**; po uplynutí termínu pruh
  sám zmizí, takže po akci není co vypínat. Zaškrtávátko **Návštěvník může pruh zavřít** rozhoduje,
  jestli si ho zákazník smí odklikat.
* **Tlačítko v liště**: zaškrtávátko **Zobrazit tlačítko vpravo v liště**, **Text tlačítka**
  a **Odkaz tlačítka**. Tlačítko má vzhled hlavního tlačítka šablony, nepočítá se do odkazů a na
  mobilu je na začátku rozbalovacího menu.

Když se odkazy, vyhledávání a tlačítko do lišty nevejdou (záleží na šířce okna i na šabloně), lišta
si pomůže sama: nejdřív z vyhledávacího pole udělá lupu a přiblíží odkazy k sobě, a když ani to
nestačí, přesune menu do rozbalovacího menu jako na mobilu. Jakmile je místa dost, vrátí se zpět.

## Odkazy v menu a mega menu [#odkazy-v-menu-a-mega-menu]

Skupina **Odkazy v menu** v **Vzhled → Záhlaví** ukazuje počítadlo, kolik odkazů
ještě smíte přidat: sedm při logu vlevo, čtyři při logu uprostřed. Odkazy nad limit zůstanou uložené
a vrátí se, když logo přepnete zpět vlevo.

Odkaz přidáte tlačítkem **Přidat odkaz** a šipkami ho posunete. Každý má:

* **Popisek** a **Typ**: **Odkaz**, **Rozbalovací nabídka** nebo **Mega menu**,
* u běžného odkazu **Odkaz (URL / cesta)**. Sem patří i ruční odkaz na `/blog`, který se do menu
  sám nepřidá,
* u **Rozbalovací nabídky** **Položky nabídky** (popisek a odkaz) a u ní i u **Mega menu** pole
  **Odkaz po kliknutí (volitelné)**: najetí myší nabídku otevře, kliknutí na samotný popisek vede
  na zadanou stránku (třeba „Dodavatelé“ na `/dodavatele`),
* **Barva odkazu (volitelná)**, která obarví popisek, třeba barvou značky partnera. Po zvolení barvy
  se objeví **Zobrazit jako odznak (vyplněný barvou)**: odkaz se pak zobrazí jako štítek v té barvě
  a barvu textu dopočítáme tak, aby byl čitelný. Odznaky se hodí na konec menu.

Mega menu upravíte tlačítkem **Upravit mega menu**. V okně skládáte sloupce: **Sloupec** přidá
prázdný sloupec, **Sestavit z kategorií** je poskládá z vašich kategorií (přepíše rozložení)
a **Obrázky** zapne fotky kategorií. Kliknutím na nadpis sloupce nebo položku ji upravíte vpravo:
položka je **Kategorie** nebo **Vlastní URL**, nadpis sloupce může vést na kategorii, na vlastní URL,
nebo nikam. Okno zavřete tlačítkem **Hotovo** a změny pak uložte přes **Uložit změny**.

## Patička [#paticka]

Patičku nastavíte v **Vzhled → Patička**. Skládá se ze skupin:

* **Vzhled**: **Barva pozadí**, **Barva textu** a **Barva nadpisů sloupců**.
* **Logo & popis**: **Zdroj loga** (**Pouze název obchodu**, tmavé, světlé nebo vlastní logo)
  a **Popis pod logem**.
* **Sloupce odkazů**: počet není omezený. Sloupec přidáte tlačítkem **Přidat sloupec**, odkaz v něm
  tlačítkem **Přidat odkaz** (**Popisek** a **Odkaz (URL / cesta)**).
* **Sociální sítě**: tlačítkem **Přidat síť** vyberete **Síť** a vyplníte **Odkaz**.
* **Newsletter v patičce**, zapínaný zaškrtávátkem **Zobrazit přihlášení k newsletteru**: **Nadpis**,
  **Text (volitelný)**, **Text tlačítka**, **Placeholder pole** a **Text souhlasu (GDPR)**.
* **Kontakt & právní** se zaškrtávátkem **Zobrazit kontakt (telefon/e-mail z nastavení Firmy)**.

Spodní lišta s copyrightem, textem „Pohání SHOPZI“ a odkazy na obchodní podmínky, ochranu údajů,
reklamace a nastavení cookies (je-li zapnutá cookie lišta) se doplňuje **automaticky** podle toho,
které dokumenty máte vyplněné. Ručně se needituje.

Pokud zapnete newsletter v patičce, nepřidávejte už blok Newsletter na úvodní stránku: zákazník by
ho viděl dvakrát.

## Pohyb a efekty [#pohyb-a-efekty]

V **Vzhled → Pohyb & efekty** jsou dvě karty.

**Uvítací animace** je krátká úvodní obrazovka s vaším logem, ve výchozím stavu vypnutá. Zapnete ji
přepínačem **Zapnout uvítací animaci**, vyberete **Styl** (**Jemné prolnutí**, **Přiblížení loga**,
**Opona**, **Logo s prstencem**), posuvníkem nastavíte **Doba trvání** (0,8 až 6 s), můžete přidat
**Text (nepovinné)** a celé to otestujete tlačítkem **Přehrát ukázku**. Zákazníkovi se zobrazí
jednou za relaci prohlížeče.

**Načítání stránky** nabízí čtyři styly: **Proužek nahoře**, **Překryv s logem**, **Proužek +
překryv** (výchozí) a **Vypnuto**.

## Náhled [#nahled]

**Náhled obchodu** vpravo v **Vzhled** je **ilustrační**: ukazuje šablonu, barvy,
písma a rozložení na vzorovém obsahu, ne vaše skutečné bannery. Přepíná se mezi **Domovská stránka**
a **Blog** a mezi počítačem a mobilem.

Kliknutím na proužek záhlaví nebo patičky v náhledu skočíte rovnou do jejich nastavení.

## Časté potíže [#caste-potize]

**Uložil jsem, ale logo se nezměnilo.** Použili jste **Uložit změny** místo **Uložit loga**.

**Logo nejde nahrát.** Soubor je větší než 2 MB, nebo je v nepodporovaném formátu (SVG, ICO).
Zmenšete ho, nebo ho uložte jako PNG. Hláška „Úložiště je plné (…)“ po kliknutí na **Uložit loga**
znamená, že jste vyčerpali úložiště tarifu: zkontrolujte ho v **Nastavení →
Úložiště**.

**Barva se po smazání pole vrátila na jinou.** Prázdné pole znamená „podle šablony“. Chcete-li
konkrétní odstín, vyplňte ho.

**Tlačítko Uložit změny je šedé.** Buď nemáte nic rozpracovaného, nebo máte roli **Prohlížeč**.

**Nejde přidat další odkaz do menu.** Došli jste na limit sedmi odkazů (čtyř při logu uprostřed).
Méně důležité odkazy dejte do rozbalovací nabídky nebo mega menu.

**Napsal jsem kód barvy a nic se nezměnilo.** Kód ještě není celý: barva se převezme až ve chvíli,
kdy má šest (nebo tři) platné znaky, například `#8b0000` nebo `#abc`.

**Na webu to vypadá jinak než v náhledu.** Náhled kreslí vzorový obsah. Po uložení si obchod vždy
prohlédněte naživo, ideálně i na telefonu.