Šablona MirandaFashion – manuál

V tomto manuálu se dozvíte, jak instalovat, používat a nastavit šablonu MirandaFashion. Vysvětlíme různé funkcionality. Pokud o ně nemáte zájem, nebo byste chtěli s nastavením e-shopu poradit, prosím kontaktujte nás. Není pro nás problém vám e-shop plně upravit podle vašich přání.

Chápeme, že čtení návodu není v top žebříčku nejoblíbenějších aktivit a zdá se jako ztráta času, my však věříme, že přečtením návodu se dozvíte mnoho důležitých informací, takže zvláště pokud jste u Shoptetu noví, čas vám to ještě spíše ušetří.

Instalace

Po instalaci je potřeba pár věcí nastavit. Ať už přecházíte ze staré šablony, nebo zakládáte nový e-shop na Shoptetu, prosím zkontrolujte nebo přenastavte následující:

1. Šablona je navržena tak, že na hlavní straně a stránkách detailu produktu není sidebar. Prosím v tedy sekci Vzhled a obsah > Šablony > Rozvržení nastavte v sekcích Úvodní stránka a Detail produktu možnost vpravo, tedy bez sidebaru. V „Kategorie“ a „Články a stránky“ si můžete vybrat, jaké rozvržení chcete.
2. Na stejné stránce dole v sekci Mobilní zobrazení se ujistěte, že „Zobrazit dva produkty vedle sebe“ není zaškrtlé.
3. Ve vedlejším oddílu Prvky (Vzhled a obsah > Šablony > Prvky) nahrajte do patičky Instagram, Sociální sítě v patičce, Menu box, Newsletter, Banner s registrací, Banner v megamenu, Banner s registrací v kategorii, pokud chcete, aby se tyto prvky objevovaly v patičce a na dalších místech e-shopu. Pokud budete využívat sidebar, zde vložte, jaké prvky potřebujete, pro šablonu byly připraveny prvky Kategorie, Filtry, Top produkty.
4. V Nastavení > Produkty > Zobrazení zkontrolujte tyto položky, u kterých silně doporučujeme následující nastavení: Popis v sidebaru – nezaškrtnut Cena, Standartní cena, Sleva, tlačítko Košík – zobrazit Tlačítko Detail – zobrazit, pokud je tlačítko košíku skryté Filtr produktů – zobrazit sbalené Ostatní položky jsou na vás.
5. Pokud máte zájem o HTML bannery, které šablona nabízí, vytvořte banner a vložte kód podle návodu u bannerů.
6. Pokud využijete zobrazování příspěvků z Instagramu a propojíte účty v Propojení>Sociální sítě>Instagram, prosíme nastavte zde také zobrazování na 3 příspěvky v řadě a 2 řady.

Používání

Po instalaci a nastavení prvků již můžete šablonu používat stejně jako e-shop na Shoptetu – tedy pomocí administrace nahrajte produkty, popisky, vlastní obsah, upravte dokumenty jako obchodní podmínky a podmínky ochrany osobních údajů a propojte si e-shop s externími službami, jak je libo.

Ohledně doplňků třetích stran – je možné je instalovat, ale u těch, které mění vzhled e-shopu, se může stát, že jejich nastavení a podoba se bude lišit kvůli nastavení šablony. Také nemusí ani graficky zapadnout do šablony. Pokud tedy budete mít problém nebo žádost o úpravu, dejte nám vědět.

Nastavení prvků

Šablona vám umožní nastavení několika prvků jako bannery, které si poté můžete částečně upravovat. V této části se dozvíte, jak je nastavit či upravit. Sekce jsou rozděleny podle toho, kde je hlavní umístění prvků.

Bannery

Napřed si obecně vysvětlíme, jak fungují bannery na této šabloně. Téměř všechny bannery se nastavují v administraci v sekci Vzhled a obsah > Bannery (https://www.vaseshop.cz/admin/bannery/).

Obecně platí, že bannery se dají vytvořit dvěma způsoby:

1. Obrázek + nadpis + text + text odkazu - Zde stačí pouze v administraci nahrát obrázek, doplnit texty/odkazy do příslušných kolonek a případně vybrat pozici (to, jakou pozici máte vybrat, se dozvíte u každého banneru dále v tomto návodu) a uložit. Doporučujeme využít možnost mít pro každý banner 2 verze – mobilní a tu pro PC.

   Pokud není vyplněn odkaz, nezobrazí se texty, je tedy nutné při obrázkovém banneru rovnou zadat odkaz na daný produkt/stránku.

2. HTML banner - Vytvořili jsme HTML kód, který vložíte do editoru v administraci. Vy si pak můžete měnit texty, odkazy a cesty k obrázkům přímo v HTML kódu. Je to jednoduché – prostě přepíšete daný text, je však důležité zachovat původní HTML strukturu a omylem neumáznout značky jako <, > nebo “. HTML kódy naleznete v xxx. Budete je mít k dispozici i do budoucna, můžete je použít jako zálohu.

Základní bannery jako carousel, konkurenční výhody a většina dalších bannerů na homepage tedy fungují stejně, jak je znáte z ostatních šablon Shoptetu, jen je šablona graficky upravuje. Bannery v HTML jsou myšleny jako nadstavba, kterou můžete využít k ještě lepší komunikaci směrem k zákazníkům. A ani na jejich implementaci se nemusíte učit kódovat, z vaší strany jde pouze o doplnění obsahu podle vašeho přání.

Jak tvořit HTML bannery?

Zde si ukážeme, jak vytvořit HTML banner, jako příklad použijeme Banner Registrace po kliknutí na „Přihlášení“.

1. V administraci přejděte do Vzhled a obsah > Bannery. Klikněte na nějaký již vytvořený banner, nebo na tlačítko Přidat.

2. Vyplňte políčko Název (spíše interní označení, na venek se neukáže), v políčku Typ banneru vyberte Textový banner, zaškrtněte Zobrazit banner a kde bude viditelný (u našich HTML bannerů můžete u jednoho banneru zaškrtnout Mobil i Desktop). Do pole v sekci Nastavení vložte kód, který je uveden u každého HTML banneru. Může to tedy vypadat takto:

   Poté klikněte na Uložit.

3. Přejděte do Vzhled a obsah > Šablony a na záložce Prvky přetáhněte vámi vytvořený banner z koše do patičky (tedy spodní části) a uložte.

Pokud by se vám nějaký formát, rozměr etc. nelíbil, není problém ho změnit.

Hlavička

Logo – na této šabloně máte možnost nahrát jedno logo, které se zobrazí černě v hlavičce a bílé v patičce (ta má černé pozadí). Je však potřeba nahrát logo, které je bílé a ve formátu PNG nebo SVG (obecně se doporučuje formát SVG). Nahrajete ho v Vzhled a obsah > Editor > Záhlaví. Pokud tuto funkci nechcete (třeba proto, že používáte barevné logo), dejte do HTML kódu v sekci Záhlaví:

#header .site-name img {
    mix-blend-mode: normal;
}          

Rozměr loga - šířka: max 480px, výška: max 75px (pokud obrázek bude větší, bude zmenšen na tyto rozměry). V patičce se zobrazí výška max 95px a šířka 80px, na mobilu max šířka 125px a max. výška 50px.

Banner Registrace po kliknutí na „Přihlášení“

Typ

HTML

Umístění v administraci

Bannery > záložka Bannery (přidejte podle návodu výše)

Umístění na e-shopu

Všude, kde je tlačítko Přihlášení, banner se zobrazí po kliknutí na tlačítko

Popis

Díky tomuto banneru můžete jednoduše nalákat zákazníky na registraci tím, že vyjmenujete výhody registrace. Můžete si tam vložit, jaké výhody chcete, my jsme pro vás připravili některé v kódu.

Kód, který vložíte do editoru

        <div class="registration-banner-login">
        <h2>Ještě nemáte účet?</h2>
        <p>Zaregistrujte se a získejte spousty výhod!</p>
        <ul>
            <li>Informace o stavu objednávky</li>
            <li>Zapojení se do programu Bonus+</li>
            <li>Historie všech vašich objednávek
            <li>Při objednávce nemusíte vyplňovat znovu vaše údaje</li>
            <li>Přednostní přístup ke slevám</li>
            <li>Body za každý nákup</li>
        </ul>
        </div>  
    

Banner po najetí myší na Prázdný košík – v naší šabloně máte možnost upravit si vzhled banneru, který se zobrazí po najetí na košík.

Banner v rozbaleném menu vedle kategorií

Typ

HTML

Umístění v administraci

Bannery > záložka Bannery (přidejte podle návodu výše)

Umístění na e-shopu

V rozbaleném menu (i na mobilu) v každé hlavní kategorii

Doporučené rozměry obrázku

Šířka 315px, výška 470px

Popis

Po najetí na hlavní kategorii v menu na PC, nebo po kliknutí na hamburger na mobilu se zobrazí podmenu s podkategoriemi. Vy si můžete zvolit, jestli a jaký obrázek se ukáže na PC napravo od podkatgorií, na mobilu pod podkategoriemi.

Kód, který vložíte do editoru

    <div class="megamenu-banner">
        <img alt="Rukavice od Versáčiho" height="470" width="315" src='https://cdn.myshoptet.com/usr/mirandamedia.myshoptet.com/user/documents/upload/menubanner.jpg'>
    </div>   
    

Úvodní strana e-shopu (homepage)

Také zvána hlavní nebo titulní strana.

Šablona je navržena tak, že na úvodní straně není sidebar. Prosím v sekci Vzhled a obsah > Šablony > Rozvržení nastavte v Úvodní stránce možnost vpravo, tedy bez sidebaru.

Patička

Instagram

Pokud chcete zobrazovat příspěvky z vašeho účtu na Instagramu, v Propojení>Sociální sítě>Instagram propojte e-shop s vaším účtem, můžete využít návod od Shoptetu zde, jen se prosím ujistěte, že rozložení příspěvků děláte takto: 3 do řady a 2 řady.

• Banner s logem a dalšími informacemi v patičce
  • Logo: viz sekce logo v hlavičce.
  • Ikonky pod logem: zde si můžete nahrát, jaké ikonky chcete, součet jejich šířek by neměl přesahovat 125px celkem. Ikonky nahrajete v Vzhled a obsah > Ikonky
• Soupis s kategoriemi v patičce (MENU) – nastavíte tak, že přidáte položky do Menu boxu. Může to být až 15 položek (kategorie, odkazy, stránky,…)
• Newsletter - zobrazuje se pouze při aktivovaném doplňku Hromadné rozesílání e-mailů a při vložení prvku Newsletter do patičky v Vzhled a obsah > Šablony > Prvky. Znění věty (zaškrtávátka) pod políčkem můžete měnit v Nastavení > Administrace > Zabezpečení obchodu, záložka Nastavení souhlasů (momentálně zní text „Vložením e-mailu souhlasím s podmínkami ochrany osobních údajů“, vy si ho upravte, jak potřebujete, ale mějte na paměti, že z legálních důvodů potřebujete od zákazníka souhlas s tím, že mu newslettery můžete zasílat a odkazovat na GDPR).

Kategorie

V kategorii můžete mít sidebar, pokud chcete.

Úvodní banner kategorie

Šablona umožňuje nahrát úvodní fotku každé kategorie, která se zobrazí po celé šířce. Funguje to tak, že do krátkého popisu kategorie nahrajete jeden obrázek pro mobil (max. šířka 767px, doporučená výška 410px) a jeden pro PC (doporučená šířka 1920px, doporučená výška 300px). Do krátkého popisu tedy nenahrávejte další obrázky. Pokud byste tuto úpravu nechtěli, kontaktujte nás.

Pokud nic nenahrajete, zobrazí se takto:

<div class="registration-category">
<strong>Registrujte se a užívejte si výhod, které vám nabízíme</strong>
<p>Získejte až 10% slevu na nákup za registraci</p>
<a href="/registrace/">Registrovat</a>
</div>        
    

Detail produktu

Šablona je navržena tak, že na stránkách s detaily produktu není sidebar. Prosím v sekci Vzhled a obsah > Šablony > zžení nastavte v Detail produktu možnost vpravo, tedy bez sidebaru.

Velikost obrázku

Minimálně 1024px na šířku, 1365px na výšku.

Podobné a související produkty se zobrazují ve slideru.

Blog

Fotka, kterou nahrajete jako fotku blogového článku, se bude zobrazovat ve výpisu článků, ale i jako úvodní fotka v článku. Používejte prosím rozlišení fotky nejméně 960px na šířku, výšku doporučujeme alespoň 500px.

Registrace

Fotka vedle formuláře

Košík

Patička v košíku

Informace v patičce v krocích nákupního košíku (viz screenshot) se upravují pomocí proměnných, které vložíte do HTML editoru kódu (Vzhled a obsah>Editor>HTML, část Záhlaví). Upravte pouze text/odkaz mezi uvozovkami. Je na vás, co budete mít v textech, obrázku a odkazu, my jsme tam vložili informace o možnostech platby a reklamace. Pokud v určitém políčku nechcete nic mít, prosím vložte řádek i tak, jen vymažte text mezi uvozovkami.

První sekce, o platbě, proměnné jsou následující:

let platbaKosikText = "Bezpečná platba"
let platbaKosikObrazek = "/user/documents/upload/moznosti_platby.png"

Druhá sekce, s odkazem:

let infoKosikText = "Jak funguje reklamace?";
let infoKosikOdkaz = "/obchodni-podminky/"

Třetí, s e-mailem:

Zde se automaticky berou kontaktní informace z Nastavení>Základní nastavení>Nastavení obchodu – Kontaktní údaje. Aby se zobrazily v košíku, musí být zaškrtnuto ve sloupci Košík u těchto položek. Doporučujeme max. 3 položky, e-mail a telefon mají i vlastní ikonku.