Návod pro šablonu

Než začnete

Připravte si fotky do carouselu

Nic jiného předem chystat nemusíte. Stačí 4 až 5 fotek na výšku bez textu, nadpis, text i tlačítko vyplníte až v administraci banneru.

Carousel nutné4 až 5 fotek na výšku, bez textu440 × 620 pxostřejší je dvojnásobek 880 × 1240 px
Bannery pod carouselem a uprostřed stránky volitelnéKdyž je nevyplníte, šablona je nezobrazí.732 × 252 pxmobil 320 × 276 px

Nechcete to nastavovat sami?Šablonu za vás zdarma aktivujeme a nastavíme, nebo ji s vámi projdeme na online schůzce.

shoptet@sniperdesign.cz +420 775 181 634Po–Pá 11:00–16:00Rezervovat online schůzku

Rychlý start

Nastavení, které projdete hned po aktivaci šablony. Zabere asi 15 minut.

Barvy nejdůležitější krok

Kde to najdeteVzhled a obsah → Editor → Editor vzhledu

Šablona si ze šesti hodnot sama dopočítá všechny ostatní odstíny. S výchozími barvami Shoptetu by text na tlačítkách mohl být špatně čitelný.

Na ukázkovém e-shopu jsou nastavené tyto barvy. Můžete si zvolit vlastní, jen dodržte rozložení světlých a tmavých barev.

1563EDKonverzní barvahlavní tlačítka (Do košíku) a zvýrazněné prvky
142D59Konverzní barva po najetípozadí patičky, obrysová tlačítka a efekty po najetí myší
1C1C1DBarva šablony 1běžný text a nadpisy, volte tmavě šedou, ne čistou černou
FFFFFFBarva šablony 2text v tlačítkách a na barevném pozadí, musí být světlá, prakticky vždy bílá
838383Barva šablony 3drobné popisky a méně důležité informace, středně šedá
D0D5DEBarva šablony 4linky, rámečky a ohraničení karet, velmi světle šedá

Barevnost šablony v Editoru vzhledu

Logo a záhlaví

Kde to najdeteVzhled a obsah → Editor → Editor vzhledu

Logo: šablona ho zmenší na šířku nejvýš 180 px a výšku dopočítá. Nahrajte ho klidně větší, ostré je od 360 px šířky.
Barva záhlaví: ve většině případů bílá (FFFFFF).
Pozadí: nechte vypnuté. Světlé odstíny pro oddělení sekcí si šablona dopočítá sama.

Záhlaví a pozadí v Editoru vzhledu

Favicona

Kde to najdeteVzhled a obsah → Editor → Další nastavení

Nahrajte čtvercový obrázek, ideálně zjednodušené logo.

Favicona v Dalším nastavení

Rozvržení stránek

Kde to najdeteVzhled a obsah → Šablony → Rozvržení

Úvodní strana, kategorie i detail produktu: vždy varianta bez levého sloupce, tedy na plnou šířku. Šablona s postranním panelem nepočítá.
Články a stránky: také varianta bez postranního sloupce.
Výpis produktů: mřížka se 4 sloupci.
Dva produkty vedle sebe na mobilu: nechte nezaškrtnuté. Mobilní zobrazení je odladěné na jeden produkt na řádek.

Volba rozvržení bez levého sloupce a mřížky se čtyřmi sloupci

Varianta bez levého sloupce a mřížka se 4 sloupci

Fotky do carouselu

Kde to najdeteVzhled a obsah → Bannery → Carousel

Nahrajte 4 až 5 fotek na výšku 440 × 620 px (ostřejší je 880 × 1240 px). Stačí fotky bez textu, nadpis, text i tlačítko vyplníte v polích banneru. Jak je šablona ořízne, je v návodu Hlavní bannery (carousel).

Diskuze u stránek a článků

Kde to najdeteVzhled a obsah → Stránky → Nastavení diskuzí a Vzhled a obsah → Články → Nastavení diskuzí

Na obou místech zrušte zaškrtnutí Aktivovaný. Jinak by stránky jako Kontakty nebo Obchodní podmínky měly pod textem formulář diskuze.

Patička

Kde to najdeteVzhled a obsah → Bannery

Založte aspoň banner ###footer-nav###, jinak zůstane patička bez odkazů. Kód a umístění jsou v návodu Patička.

Seznam bannerů v administraci, bannery patičky mají pozici Zápatí

V seznamu bannerů mají bannery patičky pozici Zápatí

Textový banner s kódem sloupců patičky v administraci

Textový banner s kódem sloupců odkazů

Konkurenční výhody

Kde to najdeteVzhled a obsah → Bannery → Konkurenční výhody

Vyplňte 4 výhody. Rozměr ikon a délky textů jsou v návodu Konkurenční výhody.

Záložka Konkurenční výhody v Bannerech se čtyřmi výhodami

Výhody mají v Bannerech vlastní záložku

Formulář konkurenční výhody Doprava zdarma v administraci

Výhoda: Název banneru, Text banneru a ikona

Texty a obrázky v patičce volitelné

Krok je volitelný. Bez vlastního loga patičky šablona použije logo z hlavičky převedené na bílou. Doporučujeme nastavit aspoň otevírací dobu a fotku poradce.

Kde to najdeteVzhled a obsah → Editor → HTML kód → Záhlaví (před koncovým tagem HEAD)

Vyplněné pole Záhlaví v HTML kódu s nastavením textů patičky a otevírací doby

Ukázka vyplněného pole Záhlaví

<script>
  window.projectTranslations = {
    cs: {
      contactPerson: { title: "Potřebujete poradit?", img: "/user/documents/upload/fotka.png" },
      emailSubText: "Napište kdykoliv",
      footerLogo: "/user/documents/upload/logo-paticka.svg",
      heureka: { img: "/user/documents/upload/heureka.svg", href: "https://obchody.heureka.cz/vas-obchod/recenze/" },
      login: { benefits: ["Výhoda 1", "Výhoda 2", "Výhoda 3"] }
    }
  };
  window.projectOpeningHours = "Po - Pá 8:00 – 16:30 h";
</script>

V kódu nechte jen to, co měníte. Klíč cs nahraďte zkratkou jazyka (cs, sk, de, en, pl, hu), pro další jazyk přidejte vedle další blok. Cesty k obrázkům berte ze Správce souborů.

Klíč	Co nastavuje
`projectOpeningHours`	otevírací doba u telefonu v hlavičce i v patičce
`contactPerson.img`	fotka nebo ikona poradce v horní části patičky
`contactPerson.title`	nadpis kontaktního bloku vedle fotky
`emailSubText`	drobný popisek pod e-mailovou adresou
`footerLogo`	logo v levém sloupci patičky, bez něj šablona použije bílé logo z hlavičky
`heureka.img`	odznak Heureky „Ověřeno zákazníky“ pod logem
`heureka.href`	kam odznak vede, typicky stránka recenzí obchodu
`login.benefits`	výhody registrace v přihlášení v košíku

Ostatní texty šablony, třeba tlačítka v košíku nebo hlášky, mají výchozí znění ve všech šesti jazycích a měnit je nemusíte.

Až budete mít hotovo, projděte si e-shop na mobilu i na počítači. Když něco nebude sedět, ozvěte se nám.

Nemáte fotky?Fotky i bannery vám připravíme jako placenou službu. Šablonu k tomu zdarma aktivujeme a nastavíme, stačí nám dočasný přístup do administrace.

Objednat grafiku Aktivace zdarma

Návody k prvkům úvodní stránky

Prvky jdou v pořadí, v jakém jsou na úvodní stránce. Popisujeme jen to, co je pro šablonu SNIPER ONE jiné než v ostatních šablonách Shoptetu.

Informační lištaJak nastavit Informační lišta na úvodní stránce ukázkového e-shopu

Úzký pruh nad hlavičkou s textem a volitelným odpočtem.

Kde to najdeteVzhled a obsah → Editor → Další nastavení → Informační proužek

Datum ve tvaru #DD.MM.RRRR# šablona nahradí odpočtem do 23:59:59 toho dne. Převede jen první takové datum v textu.
Po uplynutí data odpočet zmizí a text zůstane. Po skončení akce proto text lišty změňte.
Barvy lišty jsou z Editoru vzhledu: pozadí Konverzní barva po najetí, text Barva šablony 2.

Text lišty s odpočtem

Doprava zdarma končí za #31.12.2026#

Datum pište bez mezer. Den a měsíc můžete psát i bez úvodní nuly, rok vždy čtyřmístně.

Pole Textový obsah informačního proužku s datem odpočtu

Text lišty s odpočtem v Dalším nastavení

Hlavička a menuJak nastavit

Hlavička a menu na úvodní stránce ukázkového e-shopu

Kde to najdeteVzhled a obsah → Menu → Horní menu (hlavní menu) a Informace pro vás (horní lišta)

K telefonu šablona připíše otevírací dobu, bez nastavení Po - Pá 10:00 – 17:00 h. Změníte ji v Rychlém startu, krok Texty a obrázky v patičce.
V rozbalovacím menu šablona ořízne obrázek podkategorie na čtverec nejvýš 50 × 50 px, střed zůstane.
Položky, které se do řádku nevejdou, jsou pod ikonou na konci menu. Podkategorie v ní šablona neukáže.

Hlavní bannery (carousel)Jak nastavit Hlavní bannery (carousel) na úvodní stránce ukázkového e-shopu

Bannery na výšku pod hlavičkou, posouvají se šipkou a samy se nepřepínají.

Kde to najdeteVzhled a obsah → Bannery → Carousel

Typ banneru: Obrázek. Nadpis, text a tlačítko vyplníte v polích Název banneru, Text banneru a Text odkazu, do fotky je nedávejte.
Obrázek 440 × 620 px (ostřejší 880 × 1240 px) šablona ořízne na střed. Spodní třetinu zakryje plocha s textem, obličej a produkt proto dejte do horních dvou třetin.
Štítek: vyplňuje se do pole Název banneru v tvaru z ukázky níže. Šablona ho vykreslí jako červené kolečko s textem, který vyplníte.
Video: adresu videa (.mp4, .webm, .mov, .ogg) vyplňte do pole Text banneru a nic dalšího tam nepište. Obrázek je povinné pole, nahrajte proto i tak libovolný, šablona místo něj přehraje video bez zvuku dokola.
Vedle sebe jsou nejvýš čtyři. S menším počtem bannerů jich šablona dá vedle sebe méně a zvětší je.

Štítek do pole Název banneru

Sniper Design <span>TOP</span>

Video do pole Text banneru

/user/documents/upload/video.mp4

Adresa musí začínat / nebo http.

Ukázka vyplnění

Vyplněný banner carouselu v administraci

Banner s fotkou a štítkem

Video banner

Bannery pod carouselemJak nastavit Bannery pod carouselem na úvodní stránce ukázkového e-shopu

Dvojice širokých bannerů pod carouselem, obrázek je jen podklad pod text.

Kde to najdeteVzhled a obsah → Bannery → Doplňkové bannery (pozice Top)

Bannery jsou volitelné: když žádný nezaložíte, šablona místo nich nic nezobrazí.
Počítač: obrázek 732 × 252 px šablona ukotví vlevo, přizpůsobí výšce banneru a co přečnívá, vpravo ořízne.
Levých 415 px zabírá text, ilustraci dejte do pásu 428 až 596 px. Dvouřádkový nadpis banner zvýší a ilustrace se ořízne.
Mobil je samostatný banner s obrázkem 320 × 276 px. Je vysoký jako obrázek a text leží přes jeho horní část, ilustraci dejte vpravo dolů.
Text prvního banneru je bílý, druhého tmavý. Podklad prvního volte tmavý, druhého světlý.

Záložka Doplňkové bannery s bannery top a mid pro počítač i mobil

Pozice Top je pod carouselem, Střed uprostřed stránky

Formulář doplňkového banneru top-1 s pozicí Top pro počítač

Banner pro počítač: Pozice Top, Viditelný na Desktop

Konkurenční výhodyJak nastavit Konkurenční výhody na úvodní stránce ukázkového e-shopu

Kde to najdeteVzhled a obsah → Bannery → Konkurenční výhody

Ikonu šablona kreslí 32 × 32 px a nepřebarví ji. Připravte ji v barvě webu: SVG, nebo PNG 64 × 64 px s průhledností.
Název nejvýš 20 znaků a text nejvýš 25, aby se každý vešel na jeden řádek.
Pruh má 4 sloupce, při šířce okna do 1124 px dva. Se 3 nebo 5 výhodami zůstane na počítači v pruhu prázdné místo.

Výhody mají v Bannerech vlastní záložku

Výhoda: Název banneru, Text banneru a ikona

Slider pod výhodamiJak nastavit Slider pod výhodami na úvodní stránce ukázkového e-shopu

Posuvný pruh karet, který šablona složí z textového banneru s kódem.

Kde to najdeteVzhled a obsah → Bannery a Vzhled a obsah → Šablony → Prvky

Banner s kódem dejte v Prvcích do zóny Patička. Šablona ho přesune pod konkurenční výhody, jen na úvodní stránce.
Karta je mezi dvěma znaky #: popisek, odkaz a obrázek oddělené středníkem. Obrázek musí být ze Správce souborů, s /documents/ v cestě.
Obrázek se vejde do rámečku 165 × 115 px. Čtvercový nahrajte 345 × 345 px s průhledným pozadím, karta je podbarvená.
Na velkém monitoru se vejde 7 karet, na mobilu 2. Když je karet víc, než se vejde, přibudou šipky, jinak je šablona vycentruje.
HTML v nadpisu i popiscích šablona odstraní.

Text banneru

###favourite-categories###
##Postup péče o auto##
#Předmytí;/adresa-produktu/;/user/documents/upload/karta-1.png#
#Mytí;/adresa-produktu/;/user/documents/upload/karta-2.png#
#Mycí rukavice;/adresa-produktu/;/user/documents/upload/karta-3.png#

Odkaz musí začínat / nebo http, jinak ho šablona vezme jako popisek. Bez odkazu adresu odvodí z popisku.

Produkty na úvodní stránceJak nastavit Produkty na úvodní stránce na úvodní stránce ukázkového e-shopu

Šablona složí skupiny produktů do bloku se záložkami a nadpisem „Vybírejte z nejoblíbenějších produktů“.

Kde to najdeteProdukty → Titulní strana

Záložky vzniknou z prvních tří skupin s produkty. Při méně než třech je šablona neudělá a každou skupinu ukáže zvlášť.
Názvy skupin šablona použije jako texty záložek. Volte krátké, všechny tři záložky stojí v jednom řádku i na mobilu.
Na počítači jsou vidět 4 produkty, při větším počtu přibudou šipky.

Uvítací textJak nastavit Uvítací text na úvodní stránce ukázkového e-shopu

Text a koláž tří obrázků ve světlém pruhu pod produkty.

Kde to najdeteVzhled a obsah → Titulní strana

Každý odkaz v Popisu, i na telefon nebo e-mail, šablona vykreslí jako tlačítko. Atribut class="inline-block" ho změní na bílé s rámečkem, class="secondary" na tmavé.
Koláž vložte do zdrojového kódu Popisu. Velikost a místo obrázků určí šablona a rozměry zapsané v kódu přebije.
Dodržte poměr stran obrázků v pořadí z kódu: 500 × 625, 480 × 300 a 870 × 476 px.
Bez koláže zůstane vpravo prázdné místo, text zabírá jen asi 40 % šířky.

Koláž

<div class="plus-gallery-wrap">
<div class="plus-gallery-item"><img src="/cesta/k/obrazku-1.jpg" alt="Popis obrázku" /></div>
<div class="plus-gallery-item"><img src="/cesta/k/obrazku-2.jpg" alt="Popis obrázku" /></div>
<div class="plus-gallery-item"><img src="/cesta/k/obrazku-3.jpg" alt="Popis obrázku" /></div>
</div>

Cesty nahraďte adresami obrázků ze Správce souborů.

Bannery uprostřed stránkyJak nastavit Bannery uprostřed stránky na úvodní stránce ukázkového e-shopu

Druhá dvojice širokých bannerů, níž na úvodní stránce.

Kde to najdeteVzhled a obsah → Bannery → Doplňkové bannery (pozice Střed)

Platí stejná pravidla jako u bannerů pod carouselem (počítač 732 × 252 px, mobil 320 × 276 px), včetně tmavého textu druhého banneru.

Nové článkyJak nastavit Nové články na úvodní stránce ukázkového e-shopu

Kde to najdeteVzhled a obsah → Články a Vzhled a obsah → Články → Rubriky

Karty jsou na počítači po třech. Počet článků zobrazených na domovské stránce nastavte na 3 nebo 6, jinak se poslední řádek roztáhne.
Fotku šablona ořízne na výřez v poměru asi 14 : 9, střed zůstane. Nahrajte ji na šířku, například 1400 × 900 px.
Nad název šablona doplní datum zveřejnění a pod karty tlačítko Další články do rubriky prvního článku.

PatičkaJak nastavit Patička na úvodní stránce ukázkového e-shopu

Základní nastavení

Vzhled a obsah → Bannery, tlačítko Přidat. Typ banneru Textový banner, zaškrtněte Zobrazit banner a do pole Text banneru vložte kód z části níže. Uložte.
Vzhled a obsah → Šablony → Prvky: nový banner je dole v části Koš. Přetáhněte ho do spodního pruhu schématu stránky (patička) a uložte.

V seznamu bannerů mají bannery patičky pozici Zápatí

Textový banner s kódem sloupců odkazů

Takhle založte každý blok zvlášť: sloupce s odkazy, ikony sítí, platby i dopravu. Mimo patičku je šablona nepřečte.

Co do banneru vyplnit

Sloupce s odkazy

###footer-nav###
##Vše o nákupu##
#Obchodní podmínky;/obchodni-podminky/#
#Doprava a platba;/doprava-a-platba/#
##Informace##
#O nás;/o-nas/#

##Nadpis## začíná sloupec, #Název;adresa# je odkaz. Všechny sloupce patří do jednoho banneru. Adresy nahraďte stránkami, které ve vašem e-shopu existují.

Ikony sociálních sítí

###socials-footer###
#instagram;https://www.instagram.com/vas-profil/#
#facebook;https://www.facebook.com/vase-stranka#
#youtube;https://www.youtube.com/@vas-kanal#

Ikony šablona má jen pro Instagram, Facebook a YouTube.

Odznaky plateb a dopravy

###footer-payment###
##Bezpečná platba##
#/user/documents/upload/platby.png;img#

###footer-shipping###
##Spolehlivá doprava##
#/user/documents/upload/doprava.png;img#

Platby a doprava jsou dva samostatné bannery. #cesta;img# je obrázek ze Správce souborů, na tmavou patičku světlý.

Pruh „Potřebujete poradit?“ a otevírací doba

Telefon a e-mail: Nastavení → Základní nastavení, kontaktní údaje pro zákazníky.
Otevírací doba u telefonu, popisek pod e-mailem, nadpis „Potřebujete poradit?“ a fotka vlevo: kódem v Rychlém startu, krok Texty a obrázky v patičce.
Ikony vpravo: banner Ikony sociálních sítí výše.

Logo a odznak Heureky

Logo: bez nastavení šablona použije logo z hlavičky převedené na bílou. Vlastní logo nastavíte kódem v Rychlém startu, krok Texty a obrázky v patičce.
Odznak Heureky: tamtéž, jen pokud máte certifikát Ověřeno zákazníky.