Úvodní stránka » Dokumentace

Dokumentace

Níže naleznete návod a doporučení, jak pracovat se základními prvky šablony. Postupně vás provedeme nastavením tak, aby pro vás byla konfigurace šablony co nejjednodušší.

Instalace

Šablonu je nutné pouze objednat na oficiálním webu Shoptet doplňky, po objednání je šablona plně aktivována. Variantu šablony Apeti Standard lze objednat zde, Apeti Clear zde.

Jestliže se neprojeví žádná změna, zkuste načíst stránku znovu a zkontrolovat aktivaci doplňku v sekci Propojení > Správce doplňků > Vzhled.

Barevné schéma

Šablona umožňuje nastavení barevného schématu v administraci vašeho e-shopu. Můžete tak jednoduše přizpůsobit barevnost vašemu brandu a odlišit e-shop od konkurence.

Nastavení barevnosti šablony se nachází v sekci Vzhled a obsah > Editor > Editor vzhledu.

V ukázkovém e-shopu jsou použity následující barvy:

  • Konverzní barva: #f74040
  • Konverzní barva po najetí: #b81c1c
  • Barva šablony 1: #f74040
  • Barva šablony 2: #b81c1c
  • Barva šablony 3: #343434
  • Barva šablony 4: #000000
Výběr barvy

Nastavení barevného schématu v administraci

Výběr písma

Tak jako barevné schéma je možné nastavit v administraci i písmo. Můžete tak vašemu brandu přizpůsobit i font textu. V ukázkovém e-shopu je použit pro nadpisy font Roboto, jako font textu je použit font Open Sans.

Výběr písma

Nastavení písma v administraci

Carousel

Carousel je místem pro hlavní a největší banner na hlavní stránce e-shopu. Jestliže těchto bannerů přidáte více, vznikne animovaný slider/carousel.

Apeti Carousel

Apeti Carousel

V administraci se tyto bannery nachází v sekci Vzhled a obsah > Bannery > Carousel. Pomocí tlačítka přidat lze vložit nový banner.

Šablona Apeti podporuje carousel bannery jak defaultního obrázkového typu, tak i typu textového, pro který byl vytvořen nový specifický styl. Tento textový banner využívá následujícího kódu.

<div class="banner-custom-main">
  <div>
    <h2>Zde doplníme nadpis</h2>
    <p>Zde doplníme text</p>
    <a class="btn btn-primary" href="zde-doplnime-odkaz">Zde doplníme text tlačítka</a>
  </div>
  <img src="https://cdn.myshoptet.com/usr/klubus.myshoptet.com/user/documents/extras/apeti/img/banner-1.png">
</div>

Pro vytvoření nového hlavního banneru je nutné nejprve v sekci Vzhled a obsah > Bannery > Carousel kliknout na tlačítko přidat. Po této akci se zobrazí následující editační strana. Zde určíte nejprve název banneru, následně typ a zvolíte parametry pro zobrazení. Aby bylo možné vložení kódu uvedeného výše, je nutné zvolit textový typ banneru. Do zobrazeného textového pole (na obrázku vyznačeno červeně) tento kód vložíte.

Vytvoření carousel banneru

Vytvoření carousel banneru

Posledním krokem je přizpůsobení vloženého banneru. Jak již kód napovídá, nadpis, text a text tlačítka nahradíte jednoduchým způsobem, a to nahrazením textové části začínající frází “Zde doplníme”. Odkaz tlačítka je nutno vložit jako atribut href. To znamená, že text “zde-doplnime-odkaz” nahradíte požadovanou url adresou. Pozor, je nutné, aby zde byly zachovány uvozovky. Obrázek nahradíte obdobným způsobem jako odkaz tlačítka, cesta k souboru se nachází v atributu src.

Bannery

Aby byla šablona více prezentační, byl vytvořen nový styl doplňkových bannerů. Ten se skládá z hlavního textu, podkladového fota a CTA tlačítka. Je možné zvolit normální či reverzní pořadí prvků (foto nalevo či napravo).

V administraci se tyto bannery nachází v sekci Vzhled a obsah > Bannery > Doplňkové bannery.

Banner (normální řazení):

Apeti Banner (normální řazení)

Apeti Banner (normální řazení)

<div class="banner-custom">
  <div>
    <h3>Zde doplníme nadpis</h3>
    <p>Zde doplníme text</p>
    <a class="btn btn-primary" href="/zde-doplnime-odkaz">Zde doplníme text tlačítka</a>
  </div>
  <img src="https://cdn.myshoptet.com/usr/klubus.myshoptet.com/user/documents/extras/apeti/img/banner-2.png">
</div>

Banner (reverzní řazení):

Apeti Banner (reverzní řazení)

Apeti Banner (reverzní řazení)

<div class="banner-custom banner-custom--reverse">
  <div>
    <h3>Zde doplníme nadpis</h3>
    <p>Zde doplníme text</p>
    <a class="btn btn-primary" href="/zde-doplnime-odkaz">Zde doplníme text tlačítka</a>
  </div>
  <img src="https://cdn.myshoptet.com/usr/klubus.myshoptet.com/user/documents/extras/apeti/img/banner-3.png">
</div>

Tyto bannery se vkládají stejným způsobem jako carousel bannery – do textového pole vložíte vždy jeden z kódů výše, podle požadovaného řazení. Rozlišuje se zde navíc jen pozice banneru (top, střed, zápatí).

Vygenerování URL obrázků

V bannerech je potřeba vložit adresu požadovaného obrázku. Obrázek můžete v Shoptet administraci nahrát pomocí správce souborů a následně potřebnou URL adresu tohoto obrázku získat. Níže si předvedeme ukázkový postup.

V administraci se správce souborů nachází v sekci Vzhled a obsah > Správce souborů. Po kliknutí na odkaz sekce se zobrazí následující okno.

Správce souborů

Správce souborů

Pro nahrání nového souboru je zde tlačítko nacházející se jako první zleva na navigační liště. Po kliknutí na toto tlačítko se zobrazí nahrávací okno. Zde lze soubory vložit jednoduchou funkcí drag&drop (uchop a táhni), nebo lze kliknout do zobrazeného okna, načež se zobrazí klasické systémové okno pro výběr souborů.

Nahrávání souborů

Nahrávání souborů

Pokud již máte potřebné soubory nahrány, zbývá poslední krok, a to získání samotné URL adresy. Ve výpisu nahraných souborů klikněte pravým tlačítkem myši na požadovanou položku. Po tomto úkonu se zobrazí nabídka pro práci s vybraným souborem. Vyberete akci Zobrazit URL adresu.

Zobrazení URL adresy

Zobrazení URL adresy

Zobrazenou URL adresu zkopírujte a vložte do požadovaného banneru jako atribut src.

Okno s URL adresou souboru

Okno s URL adresou souboru

Kompatibilita

Jestliže budete šablonu Apeti Clear kombinovat s dalším doplňkem, nelze zaručit 100% kompatibilitu. Pokud nějaká kolize nastane, kontaktujte autora, pokusí se nalézt řešení.

Známé problémy:

  • Kolize s doplňkem Sticky hlavička. Šablona Apeti obsahuje fixní (sticky) hlavičku již v základu, docházelo by k nekorektnímu zobrazení, je proto potřeba tento doplněk vypnout.
  • Šablona není kompatibilní s doplňkem Sbalení filtrů a řazení, bude docházet k nekorektnímu zobrazení.