9 tipů, jak vylepšit home page e-shopu

Nechybí vám něco na domovské stránce vašeho obchodu? Nebo naopak nepřebývá? Mrkněte na náš návodný článek, který vám napoví, jak si svou home page vytunit tak, aby neodrazovala vaše zákazníky.

Připravili jsme pro vás sérii návodných článků, které vám pomůžou vyladit e-shop tak, aby byl pro vaše zákazníky přehledný, jasný a srozumitelný. I zdánlivé drobnosti mohou někdy převzít hlavní roli. Nepřicházejte zbytečně o zákazníky. Udělejte vše pro to, aby z vašeho e-shopu neodcházeli předčasně a aby neměli problém najít to, co právě potřebují.

Články z naší mini série Jak si vylepšit e-shop jsou zaměřené hodně prakticky. A začneme rovnou od home page čili úvodní stránky vašeho e-shopu.

Proč si dát záležet na úvodní stránce e-shopu?

Pro spoustu zákazníků nebude home page e-shopu tou první stránkou, kterou z něj uvidí. Někteří totiž přijdou třeba na produkt nebo kategorii přes vyhledávač. Jiní přistanou díky vaší reklamě (ppc, remarketing, display atd.) na některé stránce, kterou jste pro tuto reklamu zvolili jako landing page. Což samozřejmě neznamená, že si návštěvníci úvodní stránku při procházení e-shopu vůbec nezobrazí.

Naopak, dříve nebo později pravděpodobně kliknou na vaše logo nebo na ikonu „domů“, aby se dostali právě na ni a použili ji jako rozcestník k dalšímu procházení. Dalším a hlavním důvodem, proč si home page vymazlit, je to, že váš celý e-shop vlastně reprezentuje. Je to taková jeho výkladní skříň a vizitka v jednom. Ukažte na ní, na co jste nejvíc pyšní, a zdůrazněte, proč by měl zákazník nakoupit právě u vás.

1. Kontaktujte nás! Tak jo… A kam?

Důležité kontakty jako e-mail a telefon patří nejenom do sekce Kontakty. Ideální je, pokud je zákazník stále vidí, ať je na kterékoli stránce e-shopu. Většina našich šablon je automaticky umisťuje nahoru do záhlaví. Další možnost je kontaktní údaje dát i do zápatí webu nebo případně do postranního panelu, což uděláte v sekci Vzhled a obsah → Šablony, záložka Prvky. Mrkněte taky do návodu Nastavení kontaktních údajů pro zákazníky.

Zásadní věc ale je si překontrolovat, zda uvedené kontakty skutečně fungují. Že se zákazník dovolá. Že mu někdo na e-mail kvalitně a brzo odpoví (a dřív než vaše konkurence!). Pokud mají odpovídání na starosti vaši kolegové, zahrajte si inkognito na zákazníka a vyzkoušejte, jak relevantní odpověď dostanete. Další tipy k tomuto tématu najdete v seriálu Nejčastější chyby v zákaznické péči: Kontakt a E-maily.

Další level je si na e-shop nasadit některý z chatovacích nástrojů jako je třeba Smartsupp a s klienty komunikovat v reálném čase, což je pro ně ještě lepší než čekat na e-mailovou odpověď nebo utrácet peníze za volání. O vás to pak vypovídá, že jste připraveni se zákazníkovi plně věnovat.

2. Horní menu

Je to místo, které by mělo být jasné a přehledné. Nic zmateného a s příliš mnoha položkami. Že se to lehko řekne, ale hůř udělá? Zvlášť, pokud máte na svém e-shopu hodně druhů zboží? Jděte na to systematicky.

Kategorie e-shopu

Pokud do horního menu chcete umístit kategorie, dejte tam ty, které jsou ve stromu kategorií na tom nejvyšším místě. Tj. základní kategorie, od kterých se zákazník odpíchne (Muž/Žena/Dítě, Osvětlení/Nábytek/Doplňky, Nářadí/Ochranné pomůcky/Pracovní obuv atd.).

Do horního menu můžete přidat i některou důležitou podkategorii. Může jít o tu, ze které máte největší prodeje, kde máte specifické zboží, nebo jednoduše o tu nejnavštěvovanější. Zákazníci ji pak nebudou muset složitě hledat ve stromu kategorií a budou ji mít hned na očích. Příklad hlavní kategorie a podkategorie přidané do hlavního menu vidíte na obrázku níže. A jak je tam dostat? V administraci půjdete na Vzhled a obsah → Menu a v automaticky otevřené stránce Horní menu kliknete na modré tlačítko Přidat. Ze seznamu vyberete Kategorie a tam pak už zvolíte tu, kterou potřebujete. Případně mrkněte na náš podrobný návod, jak editovat menu e-shopu.

Raději méně než více aneb vyhněte se fast foodu

K ostatním položkám v menu se ještě vrátíme, teď ale skočíme rovnou na jeho pravý konec. Na obrázku vidíte, že jsou tam tři vodorovné čárky značící, že menu ještě pokračuje a po najetí na ně se zobrazí skryté položky. Tomuto prvku se přezdívá také hamburger. Je to automaticky generované řešení pro případ, kdy se vám do menu prostě všecky položky nevejdou. Ale mnohem lepší a elegantnější je se mu úplně vyhnout. Jednak jde o věc vhodnější spíše pro aplikace a pro mobilní verzi webu, a jednak mají položky pod ním skryté daleko menší návštěvnost. O hamburgeru pěkně a zajímavě píše Ondřej Ilinčev.

Vše o nákupu

Co tedy do horního menu ještě dát a zároveň ho nepřehltit? Například položku shrnující praktické info, které by mohlo zákazníky ohledně nákupu zajímat. Sem dejte třeba informace o dopravě (druhy a ceny), které by 100% mělo být velmi snadno dohledatelné, protože je pro část zákazníků hodně důležité. Dále také určitě podmínky reklamace a výměny zboží, obchodní podmínky a podobně. Mohou tam být třeba i velikostní tabulky nebo jiné zásadní informace atd. Můžete se zamyslet i nad stránkou s prezentací věrnostního programu, objemových nebo množstevních slev, pokud takové nabízíte.

Rozbalovací položku s tímto obsahem vytvoříte v sekci Vzhled a obsah → Menu jako v předchozím případě. Tentokrát nebudete přidávat kategorie, ale rubriku. Abyste ji mohli přidat, musíte ji nejprve vytvořit v sekci Vzhled a obsah → Články. Jak s tím pracovat najdete podrobně popsané v naší nápovědě v sekci Rubriky.

Příklad rozbalovací položky „Vše o nákupu“ v menu (zdroj: BotyLuks.cz)

Co ještě zvážit do horního menu?

Mezi další nejobvyklejší položky v horním menu patří:

Do horního menu doporučujeme promyslet sekci ♡ Oblíbené produkty, kde se bude zákazníkům generovat jejich vlastní wish list z produktů, které si sami osrdíčkovali. Velmi důležité jsou reference a Hodnocení obchodu, pomocí nichž si budujete autoritu spolehlivého e-shopu, a tak jsme určitě pro je zařadit.

Rozhodně se do horního menu nesnažte nacpat vše, co jsme uvedli jako možnost. Méně je více, a proto si vyberte jenom to, co je nejdůležitější pro vaše zákazníky.

3. Bannery a carousel

Na úvodní stránku určitě patří poutavé obrázky ať už v carouselu, statickém záhlaví nebo v doplňkových bannerech. Co na nich může být? Produkty v oku lahodící kompozici, produkty při jejich používání nebo třeba lidé vyzařující pozitivní emoce.

Bannery rozhodně slaďte s vaším brandem (např. dodržujte stejné fonty a barvy). Text vymyslete co nejkratší a nejúdernější, ať zákazníka zaujmete. Webový grafik a UX designer Radek Schramhauser radí: „Pohrajte si s typografií (velikosti fontů, řádkování atd.). Doporučuji vytvořit zajímavou kompozici z produktů, aby uživatel věděl, jakého zboží se banner týká. Na banneru by určitě nemělo chybět tlačítko v konverzní barvě e-shopu, které vyzve uživatele k akci.“

Abyste prostor pro tyto prvky využili na maximum, držte se doporučených rozměrů bannerů, loga a záhlaví na šablonách. Obrázky se pak budou zobrazovat ostré a přesně tak, jak mají.

Založte si nezávazně vlastní testovací e-shop na Shoptetu

Nevyplňujte toto pole:

4. Garance, výhody a přednosti

Jednoduchou a efektní cestou, jak ve svých zákaznících vzbudit důvěru, je jim předestřít nějaké záruky. Garantujte jim třeba expedici do 24 hodin, slibte dárek k nákupu nebo se pochlubte tím, že máte i kamennou prodejnu, kde si mohou zboží vyzvednout/prohlédnout/vyzkoušet. Zákazníci prostě rádi zjistí, proč by měli nakoupit právě u vás a hlavně proč je to pro ně výhodné.

Na úvodní stránce budou skvěle vypadat jednoduché obrázky s krátkým textem, které danou výhodu přiblíží. Dostanete je tam pomocí bannerů, individuální úpravou, se kterou vám pomůže třeba některý z našich patrnerů kodérů. Nebo se je na home page můžete zkusit dosadit sami – nejsnáze přes Vzhled a obsah → Titulní strana obchodu. Příklady výhod a garancí:

Zdroj: Folly.cz

Zdroj: vKošili.cz

Opět platí pravidlo, že méně je více a že byste měli vybrat jen ty nejdůležitější a nejzajímavější výhody. Zamyslete se nad tím, co právě vy děláte pro zákazníky skutečně navíc. Nezdůrazňujte věci, které se ve světě online nákupů rozumí samy sebou, např. vrácení do 14 dnů bez udání důvodu (pozor na výjimky).

5. Postranní menu/sloupec

Maximálně zjednodušte i postranní menu. Strom kategorií pořádně promyslete, ať se v něm zákazníci vyznají na první dobrou. Pokud máte hodně podkategorií, tak je nenechávejte automaticky otevřené. Rozbalené nechte jen zásadní kategorie a ty ostatní si návštěvníci případně rozkliknou sami. Nastavíte si to v adminu: Produkty → Kategorie, a tam upravíte pomocí políčka Zobrazit rozbalené v menu kategorií.

Pokud máte kategorií málo, můžete jejich umístění do postranního menu úplně vynechat a mít je třeba jen v horním menu.

Do levého sloupce můžete pod výpis kategorií dát i další prvky. Nastavíte si je v sekci Vzhled a obsah → Prvky (záložka Prvky). Snažte se ale, ať se neduplikují na více místech stránky, tj. ať stejný prvek není třeba zde a ještě v patičce. Je to zbytečné a stránku to zatěžuje.

6. Produkty na home page

Na domovské stránce se nejspíš budete chtít pochlubit tím nejlepším z nejlepšího také co se týká vašich produktů. Jen do toho, vybrané zboží na home page dostanete přes Produkty → Titulní strana. Tyto „vyvolené“ produkty doporučujeme řádně vymazlit: poutavý popisek, kvalitní fotografie… Ať jim to sluší, když už budou takto na očích.

Produktů sem nedávejte zase příliš mnoho – místo přilákání pozornosti by se v nich zákazník spíš ztratil. Určitě víte, jak funguje rozhodovací paralýza… Přehnané množství produktů navíc prodlužuje i samotné načítání stránky, a tím může odradit zase další část zákazníků.

Dobře si rozmyslete také to, kolik produktů vedle sebe chcete na home page mít. Opět platí méně je více, a tak se nesnažte jich do jednoho řádku nacpat co nejvíc. Raději tři místo čtyř, ať pěkně vyniknou fotky a produkty samotné. Toto nastavení najdete v sekci Vzhled a obsah → Šablony → Rozvržení. Snažte se, aby vše zůstalo čisté a vzdušné. A také zarovnané – ať na posledním „řádku“ nezbude jeden jediný produkt, nebo aby naopak jeden nechyběl k tomu, aby byl „řádek“ celý.

Pokud se chcete pochlubit, které zboží se u vás nejvíc objednává, pak mrkněte na doplněk Top 10 nejprodávanější v obchodě.

7. Spodní část stránky a patička

Do patičky svého e-shopu můžete dát další prvky, které byste na home page chtěli mít, ale nevešly se jinam, resp. jste na víc exponovaných místech stránky upřednostnili něco jiného. Opět ale připomínáme – nepřecpávat, nepřecpávat, nepřecpávat. :)

Pod výpisem vybraných produktů a nad patičkou zbývá malé místo, které můžete obsadit také něčím zajímavým. Co bychom doporučili? Například tam můžete nechat zobrazovat 3 nejnovější blogové články díky doplňku Články z blogu na home page nebo třeba aktuální fotky z Instagramu.

8. Sociální sítě

Nakousli jsme Instagram, tak si to pojďme dopovědět. Doplněk Instagram widget+ vám z něj na e-shopu zobrazí posledních 6, 8 nebo 10 fotografií. A to ne v žádné nižší kvalitě, ale naopak obrázky bez dodatečné komprese. Pomohou vám v zákazníkovi vzbudit sympatie a namotivovat ho k nákupu.

Svoje sociální sítě určitě na home page propagujte. Pokud si na nich dáváte záležet, je to super příležitost, jak zákazníky ještě víc zaujmout. Sociální sítě do požadované sekce stránky dostanete prostřednictvím nastavení v sekci Vzhled a obsah → Prvky (záložka Prvky).

Rovnou si zkontrolujte i náhledový obrázek pro sociální sítě, který je zásadní, pokud bude chtít někdo váš obchod nebo obsah sdílet. Kvalitní obrázek o minimálních rozměrech 600 × 600 px a maximálně 8 MB velký nahrajte do sekce Vzhled a obsah → Titulní strana (sekce Pokročilé níže na stránce). Můžete mrknout do naší nápovědy k titulní straně obchodu.

9. Barvy, písmo a design

Uf, tak už jsme skoro u konce. Když už jsme si spolu prošli všechny prvky, které na home page můžete najít, pojďme si to ještě celé sjednotit. A co sjednotí stránku lépe než celkový design? Na designu totiž záleží a devadesátky jsou dávno, dávno pryč.

Jak už asi zůstane mottem tohoto článku, všeho moc škodí. A to platí i o přemíře různých fontů, barev a stylů. Nedělejte prvky na stránce ve stylu „každý pes jiná ves“. Všechno by mělo hezky ladit a navzájem korespondovat. Používejte stejné písmo v textech, v logu i na bannerech. Pokud chcete kombinovat, tak max. dva tři druhy fontu a i to je potřeba udělat hodně citlivě.

Stejně tak ošemetný může být výběr barev. Pro inspiraci můžete zabrousit na zajímavé články ve vzdělávací části webu Canva.com:

Hlavně ale nezapomeňte na správný kontrast, ať se texty dají na pozadí pohodlně a bez námahy očí přečíst. Barvy si nastavíte v sekci Vzhled a obsah → Editor vzhledu.

Poslední tip na závěr

Schválně, jestli vás napadne, o čem jsme ještě nemluvili. Je to něco, co zákazníci na úvodní stránce neuvidí, a přesto je to velmi důležité. Může vám to totiž návštěvníky na e-shop přivést. Ano, jsou to meta tagy title a description (hlavně ten title), které nastavíte v sekci Vzhled a obsah → Titulní strána (sekce Pokročilé). SEO jako takové si ale necháme zas na jindy. :)

Facebook
Twitter

Mohlo by vás zajímat:

Navigace pro příspěvek

2 komentáře

  1. Martina napsal:

    Největší pain je ten kontakt – když je moc snadno dostupný, lidi se ptají na všechno, když špatně, jdou radši pryč. Najít zlatou střední cestu je někdy velký problém.

    1. Iva M. napsal:

      Dobrý den Martino, skvěle jste to vystihla. Jenže schovávat kontakt se prostě nevyplácí, takže musíte podstoupit riziko, že vás lidé budou bombardovat. Jak píšete, chce to najít zlatou střední cestu. Tak Vám držíme palce, ať ji najdete :-)

Napište komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Vložením zprávy souhlasíte s podmínkami ochrany osobních údajů