Vzhled obchodu

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.

Jak se ukládá

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í.

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

Šablona

Š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.

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

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 nastavíte v Vzhled → Barvy & písma.

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

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.

Písma

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

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í, 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í

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í 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

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

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

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

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

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.