zákaznická linka: 235 350 350 info@fineeshop.cz

10 grafických rad - Jak si vyladit e-shop

10 08 2015

Štítky: design a grafika

Založili jste si demo a chcete si svůj nový e-shop upravit podle vašich představ? Jak ale začít? Vím, že začátky mohou být těžké, proto jsem pro vás připravila 10 typů, jak na to. Uvidíte, že je to hračka.

 

1) Výběr šablony

 

Začít se má od píky, proto i my začneme od samého základu a to výběrem šablony.  K dispozici jsou v současné době (10.8. 2015) 4 šablony, z nichž každá je trochu jiná a jedinečná.

 

EDIT: Aktualizovaný článek o výběru šablony naleznete zde: Výběr šablony - FineEshop

 

Demo e-shop standardně začínáte se šablonou Office v modrém provedení. Tuto šablonu bych nazvala takovou nadčasovou klasikou. Design s menu v levém sloupci působí klasicky, ale zároveň je tu řada moderních prvků, které dělají šablonu atraktivní i v 21. století. Skvěle ji využijete pro prodej zboží, jako jsou kancelářské potřeby, nábytek, knihy, drogerie a vše co je takové - řekla bych - klasické a seriózní.

Pokud hledáte něco více "cool" tak hurá do administrace vašeho e-shopu. V menu nastavení vzhledu najdete další šablony ve všech barevných variantách.

1_0_demo_office                   1_1

ukázka demo e-shopu – šablona Office a barevné varianty 

 

 

1_2_sport

Šablona Sport - jednoduše rafinovaná

 

Šablona Sport je moje favoritka. Trochu netradiční umístění menu v pravém sloupci je zajímavým oživením. Doporučila bych ji například pro prodej sportovního vybavení a oblečení, outdoorového vybavení, pro zahradnictví a pro vše, co je spjaté s aktivním životem a pobytem v přírodě.

  

1_3_simple

Šablona Simple – v  hlavní roli bílá

 

Prodáváte pestré šátky, autorské malby nebo cokoliv, co je samo o sobě designovým kouskem? Pak sáhněte po šabloně Simple. Děsí vás ty bílé plochy, zdá se Vám prázdná? A v tom to právě je! Čistý, bílý design nechá dokonale vyniknout vašemu zboží. Nic neruší a neodvádí pozornost.

  

1_4_DL

Šablona Dark leather – luxusní a šik

 

Šablona Dark leather se těší největší oblibě a to zcela právem. Tato šablona byla navržena pro prodej dámského zboží, jako jsou šperky, kosmetika, parfémy a podobně, ale jak už mě naši zákazníci několikrát přesvědčili, hodí se vlastně ke všemu.  Hlavní roli zde hraje velký grafický banner, který upoutá zákazníkovu pozornost, proto je důležité, dát si záležet na jeho výběru.

 

2) Barevné varianty

 

Máme už vybranou svou favoritku mezi šablonami a nyní ještě zbývá zvolit si barevnou variantu. Úplně jednoduchá rada zní:  Řiďte se zbožím, které budete prodávat.

Představte si například dětské zboží. Jakou barvu ve vás evokuje? Pastelové, jemné tóny. Zahradnictví? Hnědé, zemité tóny. Pokud se chystáte prodávat pestrá trička hrající všemi barvami, zvolte neutrální šablonu. Pokud naopak vaše zboží působí mdle, zvolte barvu, která jej oživí.

barvy

Nemáte dokonalý cit pro barvy? Nevadí. S našimi šablonami se nemusíte bát, že to barevně „přepálíte“. Barva písma i základních prvků jako jsou tlačítka, je nastavena standardně tak, aby korespondovala se zvolenou šablonou. Vše proto dokonale ladí a výsledný dojem je vždy perfektní.

Máte vybráno? Klikněte tedy na tlačítko vybrat téma a nyní se podívejte na váš e-shop. Jste se svým výběrem spokojeni? Pokud ano, gratuluji! Jste o 2 kroky blíže k vašemu dokonalému eshopu.

 

3)      Seznámení se s e-shopem

 

Využijte připravené zboží, které testovací e-shop nabízí a seznamte se s funkcemi eshopu. Vžijte se například do role zákazníka a zkuste si vložit zboží do košíku a proklikat se až k objednávce. Upravte cenu nebo popis zboží. Můžete k tomu využít pomoc našeho průvodce Šopíka, který vás provede základními funkcemi vašeho e-shopu.  Jakákoliv změna, kterou provedete a uložíte v administraci, se okamžitě zobrazí ve vašem e-shopu. Stačí jen obnovit stránku klávesou F5.

Funkcí je mnoho a není divu, pokud se v nich úplně nevyznáte. Pokud tápete, zvolte některou z nápověď:

 

  • Pomocník Šopík – interaktivní průvodce, kterého najdete v administraci a který vám pomůže seznámit se se základními funkcemi
  • PDF manuál – ke stažení v odkazu, který vám přijde mailem po založení testovacího e-shopu
  • Zákaznická linka – telefonická pomoc na čísle 235 350 350
  • Emailová podpora – na adrese info@fineeshop.cz
  • Chat – na stránkách fineeshop.cz

 

Kolegové na zákaznické podpoře se jen klepou, aby vám mohli poradit, proto je nenechte zahálet. :-) Volejte a pište, dokud nebudete mít jasno.

Seznámili jste se se svým e-shopem a jste připraveni přejít do další fáze?

 

4)      Generální úklid

 

Ne, žádný strach, nejde o nepořádek na vašem pracovním stole… jde o to, jak si vyčistit svůj e-shop. Ještě než začneme vkládat vlastní obsah – ať už se jedná o zboží nebo grafické prvky – je vždycky důležité zbavit se „předpřipraveného“ obsahu, který má na začátku každý testovací e-shop a začít na čisté ploše.  Uděláte to jednoduše tak, že v levém menu v administraci zvolíte:

 nastavení - a úplně nejníže položku mazání dat. V této chvíli se nemusíte bát zvolit smazat všechna data.

2_1_ mazanidat

 

Tím zmizí všechen testovací obsah – zboží, bannery, loga a podobně a zůstane vám jen čistá šablona, která přímo prahne po vaši invenci.

 

5)    Vlastní obsah

 

E-shop můžeme nejdřív naplnit zbožím, nebo se nejprve vrhnout na grafické prvky. V každém případě budeme potřebovat obrázky. Ty si nejdříve nahrajme do administrace. V levém menu klikněte na soubory – otevře se vám složka, kam můžete nahrávat obrázky a další obsah z vašeho počítače. Doporučuji rozdělit si obsah do složek, pro lepší přehlednost. Vytvořte si složky jako "zbozi", "loga", "bannery" a do nich postupně nahrajte všechny obrázky, které máte připravené a popř. i další dokumenty.

2_2_pridat obrazky

 

6) Vlastní logo

 

Nyní nám už nic nebrání začít. Začnu jak jinak než grafikou a to pěkně odshora - logem. Pokud již nějakou dobu provozujete e-shop, máte pravděpodobně i vlastní logo, které nebude problém přenést do vašeho FineEshopu. Logo můžete vkládat ve formátu JPG nebo PNG. Vložíte ho kliknutím na levé menu:

nastavení – základní nastavení – změnit logo stránky

3_1_logo

 

Zde máte na výběr – buď zvolíte obrázek ze složky "loga", kterou jsme si vytvořili v minulém kroku, anebo použijete jiný obrázek. V tom případě klikněte na nahrát. Obrázek vyberte ze složky ve vašem počítači, nahrajte jej do administrace a pak ho už můžete použít. Tažením myší si upravte výřez obrázku a dejte uložit. Pokud logo úplně nesedne, obraťte se na nás, rádi vám pomůžeme s jeho úpravou tak, aby ladilo do zvolené šablony. Problém může nastat zejména u obrázků ve formátu JPG, které mají nevhodnou barvu pozadí.

„Pokud logo nesedí dokonale, kontaktujte nás, rádi vám ho upravíme.“

Začínáte a – stejně jako já – nemáte ještě vlastní logo? Pak je tu možnost ponechat šablonu bez loga. Stačí vyplnit název obchodu – v mém případě „Hokus Pokus“. Název se automaticky zobrazí v hlavičce a e-shop tak vypadá plnohodnotně i bez vlastního loga. Příklad můžete vidět zde:

 

3_2_hokus pokus

 

7) Grafické bannery

 

Grafické bannery značně ovlivňují vzhled eshopu. Pokud jsou povedené, eshop výrazně pozvednou. Pokud nejsou povedené, eshop ztrácí na atraktivitě. Volbu banneru proto nepodceňujme, je velmi důležitá.  Nejde ale o žádnou vědu.

Základem úspěchu je obrázek v dostatečném rozlišení. Malý obrázek by působil rozmazaně, což většinu lidí ihned odradí. Takže tudy ne. Zbytečně velký obrázek také není vhodný – zkoušet zákazníkovu trpělivost se totiž nevyplácí. Většinou odejde dřív, než se mu obrázek načte. Jaký obrázek tedy zvolit? Ideální je zvolit obrázek se šířkou kolem 2000 pixelů.  Výška obrázku pak závisí na typu zvolené šablony a lze ji snadno upravit oříznutím, během vkládání banneru. Banner vložíte kliknutím na:

vzhled – grafické bannery – nový banner – vybrat obrázek

 

Postup je stejný jako při vkládání loga. Tažením myší si upravíte výřez obrázku a dáte uložit.  Práce s obrázky je skutečně jednoduchá a intuitivní a hrát si s bannery je pro mě radost. Bannery nám dávají možnost se graficky vyřádit – můžeme zvolit libovolný font, barvu písma a jeho podbarvení. Vždycky dbejte na to, aby zůstala zachována čitelnost textu – volte kontrastní barvu písma a dobře čitelný font.

4_1_banery

NÁŠ TIP: Prodáváte zboží, které mluví samo za sebe a nepotřebuje další prezentaci? Nechcete, aby nějaká „hejblátka“ odváděla pozornost od zboží? Zvolte tedy variantu bez banneru. Tu aktivujete tím, že jednoduše necháte bannery prázdné.

 

8)      Zápatí

 

Asi nejhravějším prvkem našich šablon je takzvaná patička – volitelné zápatí, do kterého lehce vložíte obsah přesně podle vašich představ.  Co mě na této funkci skutečně baví, je její variabilita. Můžete vložit libovolný obsah:

  • Textový obsah
  • Kontaktní informace
  • Doprava
  • Platba
  • Vlastní menu
  • Facebook plugin
  • Kontaktní formulář

 

Pořadí prvků můžete měnit. Jednotlivé „dlaždice“ lze mezi sebou snadno přeskládat tažením myší. Zajímavým prvkem je Doprava a Platba. Sem můžete vložit obrázek či logo dopravce resp. platebního systému, který používáte. To zákazníkům zlepší orientaci na stránkách – hned vidí, jak mohou platit a kdo jim zásilku doručí – a zároveň je to zajímavý grafický prvek. Chcete to vyzkoušet? Klikněte na:

 

vzhled – patička – nový – vyberete libovolný prvekpřidáte obsah – uložit

4_2_zapati

A je to… zde je ukázka hotového zápatí:

4_3_hotove_zapati

9) Stránky

 

Prodejce má povinnost informovat zákazníka o možnosti reklamace zboží, poučit ho o právu na odstoupení od kupní smlouvy a podobně. Tuto zákonnou povinnost musí splňovat všechny internetové obchody.  Nyní vám ukážu, jak jednoduše splnit tuto povinnost tak, aby vás to nestálo ani minutu času navíc. Základní stránky, které nesmí v e-shopu chybět, si můžete snadno vygenerovat.  Klikněte na:

 

stránky – nová stránka – vygenerovat obsahKontakty

 

Vyplněním formuláře získáte stránku s kontakty včetně mapy. Stejně snadno si vygenerujete i stránku s obchodními podmínkami. Nahoře pak jen upravíte svoje údaje a máte hotovo.  Tím máme splněné zákonné povinnosti a dále už je to jen na nás.

5_1_kontakty

automaticky vygenerovaná stránka s kontakty

 

Můj e-shop se svíčkami a lampiony mě inspiroval k založení stránky o lampionech. Vložím video z YouTube, několik obrázků a odkaz na stránku o bezpečnosti. Vyzkoušejte také. Jde to snadno a efekt je zaručen. :-)

 

5_2_stránka_s_obsahem

ukázka stránky s  libovolným obsahem

10) Jaký je výsledek?

 

Po grafické stránce je můj e-shop hotový. Mám základ, na kterém můžu stavět – plnit ho zbožím a vylepšovat. Můj rychlý pokus, tedy doslova Hokus Pokus, si můžete prohlédnout a proklikat níže. Celou dobu jsem se dobře bavila a chtěla bych jediné – pokračovat a vylaďovat svůj e-shop dál a dál. Že je to dobré znamení? Pusťte se do toho také a uvidíte, že to chytne i vás.

 

Ukázka vyladěného e-shopu: šablona Dark leather

Projít si ho můžete zde: Hokus Pokus - ukázkový e-shop

5_3_hotovo