Bannery

V tomto článku se dozvíte, kde a jak nastavit různé typy bannerů. Více o rozměrech jednotlivých prvků v šablonách se dozvíte v článku Rozměry bannerů, loga a záhlaví na šablonách.

Využití bannerů

Pod kartou Vzhled a obsah → Bannery můžete ovlivnit vzhled vašeho e-shopu (obrázek 01). Lze přidat banner přímo na titulní stránku (jedná se o rotující banner, tzv. carousel), nebo do levého, případně pravého sloupce šablony. Je možné zde také nastavit doplňkové bannery a bannery konkurenčních výhod, které se svým umístěním liší dle šablony.

Všechny typy bannerů mají podobný detail nastavení, liší se jen v drobnostech. U obrázkového typu se nahraná fotografie vymaže jednoduše přes červený křížek. Pro jeho zobrazení stačí myší najet do sekce s obrázkem.

Bannery

Banner lze vložit do levého nebo pravého sloupce a patičky, záleží na nastavení Rozvržení stránky. Pravý sloupec je podporován pouze v šablonách Soul, Rock a Pop. Pro bannery můžete nastavit tyto vlastnosti (obrázek 02):

• Název: slouží pouze pro administraci a vaši orientaci.
• Typ banneru:
  • Obrázek: umožňuje nahrání obrázku z počítače.
  • Textový banner: umožní vložení HTML kódu.
• Datum vložení: určuje, od kdy se má obrázek zobrazit.
• Datum odstranění: datum, kdy se má obrázek skrýt. Toto datum je včetně, pokud chcete zobrazit banner do 1.2., nastavte 1.2.
• Zobrazit banner: viditelnost banneru.
• Popis obrázku: informace o obrázku, které se přenášejí do atributu alt.
• Cílová URL adresa: pokud je URL adresa vyplněná, obrázek funguje jako odkaz na danou URL adresu, můžete tedy zákazníky směrovat např. do kategorie.
• Otevřít v novém okně: určuje, jestli zákazník po kliknutí zůstane v otevřeném okně nebo se odkaz otevře v další záložce.

Doplňkové bannery

Liší se dle konkrétní šablony a jsou nejčastěji jen na úvodní stránce. Konkrétní pozice pro jednotlivé bannery si můžete ověřit v článku Rozměry bannerů, loga a záhlaví na šablonách.

Pořadí doplňkových bannerů určuje jejich název. Řadí se podle abecedy, od nejnižšího čísla k nejvyššímu. Změnou názvu banneru můžete změnit jeho pořadí.

V přehledu bannerů klikněte do sloupce Název. Otevře se detail doplňkového banneru. V detailu vyplňte pole Název. Ten slouží pro identifikaci banneru v systému.

Zákazníci na e-shopu však po najetí myší na banner uvidí text, který nastavíte v poli Popis obrázku. Pro přehlednost doporučujeme dát před samotný název číslo (např.: 01, 02, atp.).

Můžete nastavit tyto vlastnosti (obrázek 03):

• Název: slouží pouze pro administraci a vaši orientaci. Určuje pořadí banneru.
• Typ banneru:
  • Obrázek: umožňuje nahrání obrázku z počítače.
  • Textový banner: umožní vložení HTML kódu.
• Datum vložení: určuje, od kdy se má obrázek zobrazit.
• Datum odstranění: datum, kdy se má obrázek skrýt. Toto datum je včetně, pokud chcete zobrazit banner do 1.2., nastavte 1.2.
• Pozice:
  • Top: horní část úvodní stránky.
  • Střed: mezi popisem a produkty na titulní straně. Pro zobrazení na této pozici je nutné mít vytvořenou alespoň jednu skupinu produktů na titulní straně.
  • Zápatí: zobrazuje se nad patičkou.
  • Kategorie: banner se zobrazí ve výpisu produktů v kategorii.
• Zobrazit banner: viditelnost banneru.
• Popis obrázku: informace o obrázku, které se přenášejí do atributu alt.
• Cílová URL adresa: pokud je URL adresa vyplněná, obrázek funguje jako odkaz na danou URL adresu, můžete tedy zákazníky směrovat např. do kategorie.
• Otevřít v novém okně: určuje, jestli zákazník po kliknutí zůstane v otevřeném okně nebo se odkaz otevře v další záložce.

Postup vytvoření doplňkových bannerů a příklad jejich zobrazení najdete i na videu níže: 

Carousel

Jedná se o velký obrázek na titulní straně, který se v případě více obrázků mění v čase. Můžete nastavit tyto vlastnosti (obrázek 04):

• Název: slouží pouze pro administraci a vaši orientaci.
• Typ banneru:
  • Obrázek: umožňuje nahrání obrázku z počítače.
  • Textový banner: umožní vložení HTML kódu.
• Datum vložení: určuje, od kdy se má obrázek zobrazit.
• Datum odstranění: datum, kdy se má obrázek skrýt. Toto datum je včetně, pokud chcete zobrazit banner do 1.2., nastavte 1.2.
• Zobrazit banner: viditelnost banneru.
• Popis obrázku: informace o obrázku, které se přenášejí do atributu alt.
• Cílová URL adresa: pokud je URL adresa vyplněná, obrázek funguje jako odkaz na danou URL adresu, můžete tedy zákazníky směrovat např. do kategorie.
• Otevřít v novém okně: určuje, jestli zákazník po kliknutí zůstane v otevřeném okně nebo se odkaz otevře v další záložce.

Dobu, po kterou se zobrazí každý jeden snímek, nastavíte v umístění Vzhled a obsah → Bannery na záložce Další nastavení, sekce Carousel. Více informací najdete v článku Ostatní nastavení vzhledu.

Jak carousel vložit a příklad jeho zobrazení si můžete prohlédnout na našem videu: 

Konkurenční výhody

Pro úvodní stránku, kategorie a detail produktu je možné přidat bannery s tzv. konkurenční výhodou. Umožňují zákazníky jednoduše informovat, jaké výhody má nákup na vašem e-shopu (např. doprava zdarma, dárek zdarma nebo prodloužená záruka). 

Pro úvodní stránku se banner zobrazí pod carouselem nebo bannery. Jedinou je výjimkou je šablona Tango, která bannery zobrazuje ve spodní části stránky. V kategoriích je zobrazen nad zápatím stránky. V detailu produktu je umístěn mezi fotografií a popisem produktu.

Doporučený rozměr banneru Konkurenční výhody je 150 x 150 px a pro optimální ostrost je třeba dodržet poměr stran 1:1.  

Po založení banneru můžete nastavit následující informace (obrázek 05): 

• Název: slouží pouze pro administraci a vaši orientaci.
• Typ banneru: umožněna je pouze jedna volba Konkurenční výhody.
• Datum vložení: určuje, od kdy se má obrázek zobrazit.
• Datum odstranění: datum, kdy se má obrázek skrýt. Toto datum je včetně, pokud chcete zobrazit banner do 1.2., nastavte 1.2.
• Zobrazit banner: viditelnost banneru.
• Popis obrázku: informace o obrázku, které se přenášejí do atributu alt.
• Cílová URL adresa: pokud je URL adresa vyplněná, obrázek funguje jako odkaz na danou URL adresu, můžete tedy zákazníky směrovat např. do kategorie.
• Otevřít v novém okně: určuje, jestli zákazník po kliknutí zůstane v otevřeném okně nebo se odkaz otevře v další záložce.
• Název banneru: Název konkurenční výhody, která se zobrazí vpravo vedle obrázku.
• Text banneru: Slouží k popisu konkurenční výhody, rovněž se zobrazuje vpravo od obrázku pod názvem banneru.

Mobilní zobrazení

Pro bannery, doplňkové bannery, carousel a konkurenční výhody podporujeme možnost mobilního zobrazení. Toto nastavení je k dispozici v detailu každého z bannerů.

Jeden banner tedy můžete zobrazovat na desktopu, na mobilu nebo na obou zařízeních. Odpadá nutnost použít pro každé zařízení jiný banner. Samozřejmě je i tak možné používat jinou sadu bannerů pro mobilní zařízení a jinou pro desktop. 

Pro zobrazení na mobilních zařízeních doporučujeme volit poměr stran blízký čtverci. Takový obrázek bude vypadat na svislé mobilní obrazovce lépe než široký obrázek. Pomoci vám může průvodce velikostí bannerů v nápovědě Google. Doporučujeme volit rozlišení 800 x 665 px kvůli lepší viditelnosti na mobilech s vyšším rozlišením displeje. V případě carouselu je dobré mít pro plynulé střídání obrázků každý z nich stejně velký se stejným poměrem stran.

Pokud si chcete na počítači otestovat, jak budou vaše bannery nebo carousel na mobilu vypadat, doporučujeme použít např. v prohlížeči Edge Další nástroje → Vývojářské nástroje (klávesová zkratka Fn + F12) funkci Emulace (v záložkách nahoře), která nasimuluje zobrazení na mobilních telefonech.

Nebo můžete využít i Nástroje pro vývojáře v prohlížeči Chrome. Tam můžete v horní nástrojové liště použít nástroj Toggle Device Toolbar (zkratka Ctrl + Shift + I).