Sniper Design

UX a konverze

Jednoduchý e⁠-⁠shop na Shoptetu nemusí vypadat prázdně

Kamil

Prázdný dojem často nedělá počet produktů, ale rozvržení. Co u šablony na Shoptetu nastavit v administraci a kdy už pomůže jiné řešení.
Jednoduchý e-shop na Shoptetu nemusí vypadat prázdně

Prázdný dojem jednoduchého e-shopu na Shoptetu je důsledek rozvržení, které počítá s velkým katalogem, ne důsledek samotného počtu produktů. Dvacet položek v šabloně navržené na tisíce produktů vytvoří mezery tam, kde měly být další řady dlaždic. Řešením je rozvržení, obsah a fotky připravené pro menší sortiment.

Je to jedna z nejčastějších obav, se kterou za námi chodí lidé rozjíždějící e-shop na Shoptetu: „vypadá to, jako bychom nic neměli." Přitom sortiment bývá v pořádku — kurátorský výběr, jedna značka, pár produktových řad. Problém je, že šablona čeká plný katalog a při menší nabídce zůstane poloprázdná.

Proč malý e-shop na Shoptetu působí prázdně?

Řada e-shopových šablon pracuje v demu s bohatým katalogem. Typicky to vypadá tak, že homepage počítá se třemi řadami po čtyřech produktech, výpis kategorie s několika stránkami a blok souvisejícího zboží se šesti tipy. Když do stejné struktury vložíte dvacet položek, struktura zůstane — jen se v ní objeví prázdná místa.

Návštěvník to nečte jako „malý sortiment". Čte to jako nedodělaný web. A to je rozdíl, protože nedodělaný web zpochybňuje důvěryhodnost obchodu ještě dřív, než se člověk podívá na ceny.

Ke stejnému závěru vede i rada z blogu Shoptetu o výběru šablony. V rozhovoru to Jan Krupica z agentury Appgrade shrnuje takto:

„Hodně zjednodušeně se na výběr šablony dá pohlížet jako funkčnost vs. design. Na velkých e-shopech potřebujete především přehlednost. U menších obchodů si můžete dovolit designově zajímavější stránky."

Jinými slovy: malý sortiment není handicap, který se má schovat. Je to prostor, který velké e-shopy nemají — jen se s ním musí pracovat jinak.

Kde se malý sortiment prozradí?

Prázdno se skoro nikdy neobjeví všude. Jsou to čtyři konkrétní místa:

  • Homepage pod hero bannerem. Nejčastější případ. Pod úvodním bannerem má být několik řad produktů. S dvaceti položkami vyjde jedna a půl, takže stránka končí dřív, než čekáte, nebo se produkty opakují.
  • Výpis kategorie. Kategorie se šesti produkty v mřížce po čtyřech vypadá jako přerušená — jedna plná řada a dvě osamocené dlaždice pod ní.
  • Související a doporučené produkty. Blok, který má nabídnout šest tipů, jich najde dva. Někdy nabídne i položky, které s prohlíženým zbožím vůbec nesouvisí, protože jiné v katalogu nejsou.
  • Patička a navigace. Menu postavené na rozsáhlém stromu kategorií vypadá s třemi kategoriemi řídce, hlavně na desktopu.

Když lidé hledají jednoduchý eshop na Shoptetu, řeší ve skutečnosti nejčastěji právě tohle — aby menší sortiment nepůsobil prázdně. Vyplatí se proto projít si e-shop po těchto čtyřech místech, než začnete řešit celkový dojem. Zjistíte, že „vypadá to prázdně" znamená obvykle jedno nebo dvě z nich, ne celý web.

Co jde spravit přímo v administraci Shoptetu?

Dobrá zpráva je, že část problému vyřešíte bez programátora i bez změny šablony. Podle dokumentace Shoptetu lze u šablony obchodu nastavit mimo jiné tyto věci — a většina z nich má na prázdný dojem přímý vliv:

  • Počet produktů zobrazených na řádku. Často nejrychlejší nastavení s velkým vlivem na výsledný dojem. Mřížka po čtyřech je stavěná na katalog; při menší nabídce funguje líp nižší počet produktů na řádku a větší produktové karty — podle možností konkrétní šablony. Stejný počet produktů pak zabere větší část stránky a každá položka dostane víc prostoru i pozornosti.
  • Prvky na homepage — slidery produktů, skupiny zboží a články z blogu. Tady se rozhoduje, jestli homepage skončí po jedné a půl řadě, nebo bude mít smysluplné pokračování.
  • Doplňkové bannery na pozice Top, Střed, Zápatí a Kategorie. Banner uprostřed stránky umí nahradit řadu dlaždic, která by stejně nebyla plná.
  • Rozvržení stránky — umístění levého či pravého sloupce. Užší obsahová část znamená méně místa, které musí produkty zaplnit.
  • Barevnost šablony přes barevný editor. Na prázdno přímo nepůsobí, ale výrazně mění, jestli web působí hotově.

Než sáhnete po čemkoli dražším, projděte si tahle nastavení. U hodně e-shopů se ukáže, že „prázdný" dojem dělalo jediné číslo — počet produktů na řádku.

Co dělat, když nastavení nestačí?

Přidat produkty jen kvůli vzhledu bývá zbytečně drahé řešení — a často i horší, protože může rozmělnit to, čím se odlišujete. Dřív než sáhnete po katalogu, zkuste tohle.

Doplňte obsahové bloky mezi produkty

Prostor, který u velkých e-shopů zabírá zboží, může u menších nést obsah: příběh značky, jak se produkt vyrábí, s čím se kombinuje, doprava a vrácení, recenze. Není to výplň — u malého sortimentu je právě tohle to, co zákazníka přesvědčuje, protože nemá na výběr z padesáti variant a rozhoduje se podle důvěry.

Nahraďte řady dlaždic výraznějšími prvky

Tam, kde by měly být tři řady produktů, dává u menší nabídky větší smysl jeden silný banner nebo carousel, který projde několik položek v jednom bloku. Ušetří to vertikální prostor a nevznikne díra. Podrobněji jsme se bannerům věnovali v článku bannery na e-shopu: nevyužitý potenciál.

Investujte do fotek

Čím míň produktů, tím větší váhu má každá fotka. Dvacet položek ve stejném světle, na stejném pozadí a se stejným ořezem vypadá jako promyšlená kolekce. Dvacet položek pofocených různě vypadá jako sklad. U menšího sortimentu fotky velmi rychle změní celkový dojem z e-shopu.

Řešíte tohle téma na svém e⁠-⁠shopu?

Proberte to s námi — 30 minut konzultace je nezávazných a zdarma.

Kdy narazíte na hranice šablony?

Někdy dojdete na strop: udělali jste fotky, doplnili obsah, snížili počet produktů na řádku — a kategorie se šesti položkami pořád působí přerušeně. V tu chvíli je potřeba ověřit, jestli konkrétní šablona dovolí změnit strukturu výpisu dostatečně, nebo jestli dává větší smysl jiné rozvržení.

Přesně na tenhle případ jsme postavili šablonu Sniper ONE pro Shoptet. Nejde o jinou grafiku téhož, ale o jiné rozvržení pro menší sortiment: homepage i výpis kategorie jsou navržené pro pár produktů, ne pro katalog o stovkách položek. K tomu má popup košík s rekapitulací nákupu, bannery s carouselem produktů a produktovou galerii ovládanou gesty na mobilu.

Nejrychlejší způsob, jak posoudit, jestli to sedí na váš případ, je podívat se na ukázkový e-shop — je postavený přesně na menším sortimentu, takže uvidíte, jak se rozvržení chová v praxi, ne na demu s tisícem produktů.

Pokud si nejste jistí, jestli je problém v šabloně nebo v obsahu, pomůže UX a grafický audit e-shopu — často se ukáže, že část potíží jde vyřešit i ve stávající šabloně.

Jak to vypadá v praxi: modelový e-shop s 25 produkty

Vezměme si modelový příklad — e-shop na Shoptetu s ručně vyráběnou kosmetikou, 25 produktů ve třech kategoriích. Typicky vypadá takhle:

  • Homepage má pod bannerem blok „novinky" a blok „nejprodávanější". Protože je produktů 25, objeví se v obou skoro stejné položky.
  • Kategorie s osmi produkty končí druhou řadou v polovině.
  • Detail produktu nabízí „mohlo by se vám líbit" — a nabídne zbývající zboží ze stejné kategorie, včetně toho, které se k výběru nehodí.

Co s tím: snížit počet produktů na řádku, aby osm položek zaplnilo kategorii. Sloučit dva produktové bloky na homepage do jednoho a uvolněný prostor dát příběhu výroby. Blok souvisejícího zboží nahradit obsahem o použití produktu. Sortiment zůstal stejný, dojem z e-shopu ne.

Tenhle postup je ilustrativní, ne návod krok za krokem — u každého e-shopu se liší, kolik z toho jde nastavit v administraci a kde už narazíte na hranice šablony.

Na co se u jednoduchého e-shopu často ptáte?

Kolik produktů musí e-shop mít, aby nevypadal prázdně?

Žádná hranice neexistuje — záleží na rozvržení, ne na počtu. Stejných dvacet položek může v jedné šabloně působit jako promyšlený výběr a v jiné jako nedodělaný katalog. Rozhoduje, kolik prostoru šablona čeká zaplnit produkty.

Co jde u šablony na Shoptetu nastavit bez programátora?

Podle dokumentace Shoptetu mimo jiné počet produktů na řádku, prvky na homepage (slidery produktů, skupiny zboží, články z blogu), doplňkové bannery na pozice Top, Střed, Zápatí a Kategorie, rozvržení sloupců a barevnost šablony. Právě těmito nastaveními se dá prázdný dojem často výrazně zmenšit.

Mám přidat produkty jen proto, aby e-shop vypadal plněji?

Ne. Rozšíření sortimentu kvůli vzhledu znamená náklady na zboží, focení i správu a oslabuje to, čím se odlišujete. Ve většině případů dává větší smysl nejdřív upravit rozvržení, doplnit obsah a zlepšit fotky.

Jde prázdný dojem opravit ve stávající šabloně?

Často ano — nastavením počtu produktů na řádku, sloučením produktových bloků, obsahovými sekcemi a lepšími fotkami. Hranice přijde ve chvíli, kdy po vyčerpání dostupných nastavení konkrétní šablona pořád nedovolí upravit strukturu homepage nebo výpisu tak, aby menší sortiment působil přirozeně.

Je malý sortiment nevýhoda?

Pro vzhled ne, pokud s ním rozvržení počítá. Naopak dává prostor pro věci, které si velké e-shopy nemůžou dovolit — větší fotky, víc obsahu u produktu, výraznější design.

Kolik stojí šablona Sniper ONE?

4 490 Kč jako jednorázová licence, bez měsíčních poplatků. První instalaci lze 30 dní zkoušet zdarma.

Jak poznat, že potřebujete jinou šablonu?

„Vypadá to prázdně" je skoro vždycky problém rozvržení, ne sortimentu. Projděte si čtyři místa, kde se to projevuje — homepage pod bannerem, výpis kategorie, související produkty a navigaci — a zkuste je vyřešit tím, co nabízí administrace Shoptetu: počtem produktů na řádku, prvky na homepage a bannery. Když tahle nastavení vyčerpáte a kategorie pořád vypadá přerušeně, je čas změnit rozvržení, ne katalog.

Máte e-shop na Shoptetu s menším sortimentem? Podívejte se na šablonu Sniper ONE — je postavená přesně na tenhle případ. Instaluje se z katalogu doplňků Shoptetu a první instalaci můžete 30 dní zkoušet zdarma.

Pojďme to vyřešit pro váš e⁠-⁠shop

Napište nám, s čím se peréte — obvykle odpovídáme do druhého pracovního dne.