Nejlepší WooCommerce šablony: 7 tipů pro větší obrat a použitelnost

Michael Firnkes Aktualizováno dne 20.října 2020
12 min.
WooCommerce Theme
Naposledy aktualizováno 20.

Dobrý webový design pro WooCommerce je nesmírně důležitý. Rozhoduje o tom, zda vaši návštěvníci na e-shopu zůstanou. A zda skutečně dokončí nákup. Na co je třeba dávat pozor při výběru WooCommerce šablon? A jaké šablony jsou ty nejdůležitější? Náš průvodce na to má odpovědi.

Šablona pro WordPress nebo WooCommerce je druh designové předlohy. Určuje, jak váš portál vypadá. Není to tak snadné, vybrat tu správnou šablonu pro svůj e-shop. Nebo pro agenturu, poradit svým zákazníkům ke konkrétní šabloně. Tento příspěvek vás provede výběrem krok za krokem.

Tip

Nehledáte šablonu pro WooCommerce, ale pro WordPress? Pak si navíc přečtěte náš příspěvek k WordPress šablonám . Pro začátečníky ve WooCommerce je přinosný tento návod.

Při použití šablon existují v podstatě dvě možnosti:

  1. Necháte si vyvinout zcela samostatnou šablonu a tím design.
  2. Koupíte již hotovou šablonu a přizpůsobíte ji vašim potřebám. Například tím, že přizpůsobíte barvy ke vzhledu vaší značky, loga a grafiky k pozadí, atd.

První možnost činí váš obchod nezaměnitelným - ale také potřebujete velmi dobré webové designéry nebo vhodnou agenturu. Náklady na to mohou jít až do pětimístné častky v eurech, pokud vsadíte na kvalitu. Na druhé straně existují také vysoce kvalitní šablony pro WooCommerce, které jsou dostatečně flexibilní. A které můžete použít zejména ze začátku vašeho e-shopu. Více o tom později.

Poznámky k výběru šablony

Často si všimnete až po opětovném spuštění, že nová šablona nebyla až zase tak dobrá volba. Design nelze podle potřeby upravit? Chybí důležité aktualizace, takže části internetového obchodu již nefungují? A pak je zákaznická podpora nanejvíš průměrná? Pokud na tom závisí příjmy vašeho portálu, může to být opravdu nepříjemné.

Jednotlivé produkty
Důležité jsou nejen funkce vašeho obchodu, ale také design

O to důležitější je otestovat šablonu předem. A bezpodmínečně ve vlastním testovacím systému. Specifikacím a ukázkovým stránkám výrobců můžete důvěřovat jen částečně: V souhře s vašimi pluginy pro WordPress a WooCommerce často vznikají problémy, které předtím nebyly viditelné.

Tip

Existuje nespočet pluginů pro WooCommerce, pro všechny možné účely. I zde je obtížné odhadnout kvalitu. Náš příspěvek pluginů pro WooCommerce vás seznámí s nástroji, které potřebujete pro běžné projekty e-shopu.

Zde jsou nejdůležitější tipy pro rešerši vhodného poskytovatele nebo šablon:

Kompatibilita s WooCommerce

Bezpodmínečně se ujistěte, že jsou vaše šablony optimalizované pro WooCommerce. Pouze takové šablony zajistí, že budou specifické prvky e-shopu správně zobrazeny. Například přehled produktů, sekundární informace, nákupní košík, nákupní proces nebo pokladna. Templates, které jsou speciálně navrženy pro WooCommerce, také dbají na kompatibilitu s novými verzemi softwaru e-shopu. Protože WooCommerce čas od času přechází na jiné procesy. To byste u čisté WordPress šablony pokaždé museli nechat pracně měnit.

V ideálním případě zvolíte poskytovatele, který je na WooCommerce specializovaný. Ten obvykle začlení kritické změny do svých produktů rychleji. Kromě toho se lépe vyzná s typickými rozšířeními pro WooCommerce, pokud tyto problémy budou v kombinaci s designem. Představím vám pár speciálních šablon pro systém e-shopů.

Optimalizace pro mobilní zařízení

V dnešní době je již povinností, aby byla vaše šablona optimalizována pro různá mobilní zařízení. Teprve pak to bude vypadat stejně dobře na obrazovce, tabletu a smartphonu. A i jen potom budou fungovat důležité prvky, jako je navigace v obchodě nebo nákupní košík.

Mnoho e-shopů je z 80ti procent nebo více zobrazeno prostřednictvím mobilních zařízení. Pomocí služby Google Analytics a podobných nástrojů můžete zjistit, jak vysoké je toto procento u vašeho vlastního portálu. V případě šablony, která nebyla vyvinuta bezchybně, naštvete a v tomto případě ztratíte 80 procent cílové skupiny. Kromě toho Google nemilosrdně trestá ty portály, které odfláknou optimalizaci pro mobilní zařízení.

Každý výrobce šablon nyní identifikuje své produkty jako mobilně optimalizované nebo responzivní. Existují však velké rozdíly v kvalitě – jak individuálně jsou jednotlivá koncová zařízení skutečně podporována? Pod ami.responsivedesign.is najdete online nástroj, který vám umožní zhruba zkontrolovat, jak se webové stránky v různých formátech nahrají:

WooCommerce optimalizované pro mobilní zařízení
Vaše webové stránky musí fungovat na všech zařízeních

Toto je ale jen první vodítko pro váš výzkum. Nenahrazuje skutečné živé ověření vámi, podle možnosti na různých zařízeních a v různých prohlížečích (Chrome, Firefox, Edge, Safari). Měli byste také ručně zkontrolovat funkci tlačítek, menu, zaškrtávacích políček, formulářů, posuvníků atd.

Tip

Pro ověření vaší šablony a pluginů potřebujete samostatný testovací systém. Nebo tzv. staging prostředí pro WordPress. Podívejte se na našeho průvodce tématem Testovací prostředí a zálohování.

Placené šablony nebo šablony zdarma

I pro WooCommerce existují šablony, které jsou volně dostupné. Pokud provozujete e-shop, děláte to profesionálně. To je důvod, proč byste se měli také rozhodnout pro profesionální šablonu. Zvláště pokud se sami v technice nevyznáte, aby se v případě potřeby opravil zdrojový kód.

Roční licenční náklady jsou zvládnutelné, jsou obvykle nižší než 100 eur. Kolik typický WooCommerce e-shop celkem stojí, vám prozradím v příspěvku Výhody WooCommerce. Zde jsou důvody, které jsou pro profi šablony:

  • Jejich údržba je zpravidla prováděna častěji. To je obzvláště důležité u aktualizací od WordPress a WooCommerce.
  • U šablon dostupných zdarma se může rychle stát, že je vývojáři již nemohou vyvíjet dál. Pak to budete muset převzít sami nebo vyměnit šablonu. Toto riziko je u placených řešení nižší.
  • U dobré šablony obdržíte komplexní podporu. Ujistěte se, aby byla podle možnosti ve vašem rodném jazyce a během pracovní doby.
  • Velmi dobrá kvalita zdrojového kódu by měla být u profesionální šablony samozřejmostí. To zajišťuje bezpečnost a dobrou výkonnost. Bohužel tomu tak není vždy. Freelanceři nebo agentury z WordPress prostředí můžou posoudit kvalitu za vás.

Profesionální řešení celkově minimalizují vaše obchodní rizika. Zkontrolujte přesto poskytovatele profi šablon, ne všichni pracují stejně dobře. Zeptejte se ostatních provozovatelů e-shopů, s jakými vývojáři mají dobré zkušenosti.

Poznámka

Dokumentace je reklamou každé šablony. Dobře si jí v dostatečném předstihu přečtěte. Neprozradí vám pouze, zda je produkt snadno nastavitelný a přizpůsobitelný. Kvalita manuálu také nepřímo říká něco o samotném poskytovateli.

Firma vedoucí na trhu nebo malý podnik?

Oblíbené šablony – které jsou velmi často zakoupeny nebo staženy – mají výhodu: jsou intenzivněji pod dohledem svých vývojářů. Také ve fórech a komunitě najdete s větší pravděpodobností odpovědi na otázky o více známým šablonách. Pokud necháte technologii na agentuře, může se rychleji zapracovat do tématiky šablony, se kterou již má zkušenosti. I v případě, že vývojáři šablony již nemůžou nebo nechtějí pokračovat se správou: U lukrativní šablony je mnohem větší šance, že převezme správu někdo jiný.

Na druhou stranu existují designy, které vidíte na každém druhém WooCommerce e-shopu. Váš obchod by se sice měl orientovat na strukturálním vzhledu velmi známých a velkých internetových obchodů. Pak se vaši zákazníci velmi rychle vyznají. Tomu se také říká Amazon effect.

A přesto záleží na jednotlivých designových prvcích, které jsou nezaměnitelné. Potom si snad vaši návštěvníci při druhém načtení vašeho e-shopu řeknou: "Tady už jsem byl/a". To je důležitý předpoklad pro generování stálých zákazníků. Poutavým layoutem bude váš online marketing mnohem efektivnější.

Tip

V této souvislosti se také podívejte na své nejdůležitější konkurenty. Jak vypadají jejich internetové obchody? Kterou šablonu používají? Tady by nebezpečí záměny bylo obzvláště fatální.

Nejpozději v době, kdy váš obchod roste, byste si měli nechat vytvořit vlastní šablonu a tím rozvíjet design. Pokud je to dobře provedeno, pak se to hodí obzvlášť dobře k vaší značce. Hlavně když jde o layout, barvy, typografii, svět produktů a vizualizaci. To může výrazně zvýšit konverzi (podíl prodejů na počet návštěv stránek).

Moje doporučení: Angažujte profesionály. Jedná se o složitější, ale udržitelnější strategii. S dobrou podporou je to z dlouhodobého hlediska nákladově ještě efektivnější.

Roszah funkcí pro WooCommerce

Většinu funkcí vašeho internetového obchodu převezme samotný WooCommerce. Šablona pouze zajišťuje správný vzhled. Nicméně zahrnují někteří výrobci šablon další komponenty. K jejim produktům patří například:

  • Drag & Drop PageBuilder, který můžete použít ke změně vzhledu obchodu kliknutím myši. Ale pozor: takový PageBuilder má také některé nevýhody.
  • Integrované posuvníky pro prezentaci produktu nebo takzvané mega menu obsahující ikony, obrázky a další prvky. Nebo rozsáhlejší stavební kameny pro hodnocení zákazníků, než je k dispozici ve standardním WooCommerce.
  • Seznamy přání, které návštěvníkům umožní zapamatovat si jednotlivé produkty a uložit je pro pozdější nákupy.
  • Vlastní widgety pro přidání obsahu do postranního panelu, záhlaví nebo zápatí, jak chcete. Pokročilé možnosti filtrování nebo vyhledávání usnadňují zákazníkům výběr a seřazení produktů.
  • Uživatelsky přívětivý, ale zároveň právně vyhovující design oblasti "Pokladna" a "Zákaznický účet".
  • Mini nákupní košík, který je zobrazen na všech stranách. Například v nabídce vašeho internetového obchodu. Věnujte pozornost právním požadavkům vaší země.

Více o právních předpisech v Evropě vám povím ve svém blogu Zajištění právní bezpečnosti u WooCommerce. WooCommerce je standardně zaměřený na americký trh.

Seskupené produkty
Mimo jiné jsou některé informace o výrobcích povinné

Neměli byste používat šablonu, ktará obsahuje nespočet funkcí, které nepotřebujete. Protože někteří z těchto pomocníků jsou na úkor výkonu vašeho obchodu. Zejména PageBuilder jsou zde kontroverzní: vypadají elegantně a umožňují flexibilitu. Při nesprávném vývoji ale také zpomalují váš systém. Pokud se chcete dozvědět více o PageBuilder pro WooCommerce, pak si přečtěte tyto příspěvky:

WooCommerce child themes

V ideálním případě podporuje vaše šablona takzvané child themes. To vám umožní realizovat několik designů použitím jedné šablony. To je obzvláště důležité, pokud chcete provozovat několik internetových obchodů s mírně odlišným designem, aniž byste pokaždé museli použít novou šablonu.

Pro agentury: I když máte založené jednotlivé templates na již existujícím šablonách, měli byste této funkci věnovat pozornost. Dobře promyšlené strukturované CSS je v této souvislosti také velmi užitečné. Návod na WordPress child themes najdete na blogu od Marka.

Také se ujistěte, že je vaše šablona optimalizována pro "nový" editor Gutenberg od WordPress. Ten hraje i pro WooCommerce stále důležitější roli. Pokud šablona nabízí vlastní Gutenberg bloky, měli byste být opatrní. U změny na jinou šablonu již nefungují.

Tip

Ještě nepoužíváte editor Gutenberg? Pak se podívejte na náš e-book jako speciál pro Gutenberg . V šesti krocích vám ukáže, jak používat editor pro vaši firmu a váš e-shop.

Licence a obsah

Pokud se rozhodnete pro placenou šablonu, měli byste dávat pozor na náklady. Jak již bylo zmíněno, obvykle nejsou příliš vysoké. Nicméně zkontrolujte následující body:

  • Jak dlouho běží licence šablony? Platí donekonečna, i když si soubory dále rozvíjíte sami, nebo je třeba ji po určité době obnovit?
  • Smíte šablonu vůbec rozšířit sami? Za normálních okolností je to zajištěno v open source prostředí od WordPress. Přesto se informujte.
  • Jak dlouho obdržíte aktualizace a podporu? Je zaručena určitá doba podpory a odezvy?
  • Vztahuje se licence pouze na jednu nebo více domén? To je důležité, pokud potřebujete child themes pro více obchodů.
  • Pokud změníte doménu nebo projekt, zůstane licence platná?

Neméně důležité: Jsou obrázky pozadí atd. u šablony zahrnuty? Jsou volně použitelné? Kdo na ně má právo? Obdržíte soubory v opakovaně použitelných formátech, jako je například Photoshop? Zde byste měli vyjasnit práva na obrázek, abyste minimalizovali nebezpečí pokuty .

Pracujete v agentuře nebo jako freelancer? Pak byste měli věnovat zvláštní pozornost tomu, do jaké míry šablonu můžete používat. A kdo vlastní jakou licenci. Protože jste závislí na tom, abyste předali projekt svým zákazníkům bez problémů. Podívejte se na naše tipy k Účinnost a obsluha WordPressu a WooCommerce.

Nejdůležitější šablony pro WooCommerce

Existuje několik šablon a poskytovatelů WooCommerce, kteří jsou známy ve WordPress scéně. Pro tyto najdete poměrně snadnou pomoc od freelancerů nebo agentur. Dbejte však na výše popsané nevýhody, které takové rozšířené šablony obnášejí. Zde je několik z těchto známých šablon:

Flatsome pro WooCommerce

Flatsome je jednou z nejznámějších šablon pro WooCommerce. Podle vývojářů je to nejprodávanější šablona pro WordPress e-shopy vůbec. Flatsome je velmi populární, i když je zákaznická podpora v angličtině.

V nejdůležitějších WooCommerce fórech jsou často kladeny jednoduché otázky týkající se této šablony. U větších úkolů budete ale stále potřebovat externí vývojáře.

Plochá WooCommerce Theme
Flatsome pro WooCommerce je používán v mnoha e-shopech

V komunitě je Flatsome tak trochu kontroverzní. Někteří ji chválí, jiní ji odmítají z důvodů nadměrnosti. Na jedné straně je pagebuilder od Flatsome velmi flexibilní. Přináší již nespočet prvků, aniž byste potřebovali dodatečné pluginy. Například různé úrovně obsahu, posuvníky, seznam přání, živé vyhledávání, pole, filtry produktů atd.

Na druhou stranu se tím ale váš systém stává nepřehledným. Pokud svůj obsah zapracujete do určitých oblastí pagebuildera, které poskytuje pouze on, jasně to ztěžuje přechod k jiné šabloně. To v budoucnosti neobstojí.

S homepage kitem jako Flatsome si sestavíte design, který se výrazně liší od původního vzhledu - bez velkých znalostí programování. To zase vyrovná velké rozšíření této šablony. Tímto procesem ale může váš e-shop rychle vypadat disharmonicky a nesourodě. V každém případě stojí za to, najmout freelancery nebo agenturu, která se vyzná s webovým designem.

WooCommerce Storefront

WooCommerce má také svou vlastní oficiální šablonu: Storefront. U balíčku Storefront platí podobné rady jako u Flatsome. Je to rozsáhlý nástroj, ale musí se promyslet jeho nastavení. První shop je se Storefront rychle vytvořen. Ale jde tu o detaily. Kdo chce využít všechny funkce šablony a jeho doplňky, musí se dobře vyznat.

Zejména proto, že šablona potřebuje správnou konfiguraci a vhodný obrazový materiál. Protože základní verze vypadá poměrně prostě a jednoduše - dalo by se také říci nudně:

WooCommerce Průčelí Theme
Poměrně obyčejné: WooCommerce šablona Storefront

Velká výhoda balíčku: pochází od samých tvůrců WooCommerce. Proto vývojový tým obvykle věnuje pozornost dobré kompatibilitě. Když se objeví nová verze softwaru shopu, aktualizace Storefront obvykle rychle následuje.

Původně není ani šablona Storefront ani Flatsome vhodná pro použití na českém trhu. Měli byste to také zkontrolovat v jiných zemích EU. V našem článku Právní jistota pro WooCommerce jmenované nástroje pracují s nejdůležitějšími šablonami. Ujasněte to ale předem, jinak to bude rychle drahé.

Existuje mnoho rozšíření pro Storefront, od WooCommerce ale také od poskytovatelů třetích stran. Například pro následující účely:

  • Komponent s názvem "Powerpack", který je třeba graficky přizpůsobit různé oblasti e-shopu kliknutí myší
  • Interní reklamní prostory a vstupní stránky
  • Mega menu
  • Rozšířené hodnocení zákazníků a cenové tabulky
  • Napojení na sociální sítě

Mnohé z nich se musí platit. Dokonce i ty, které mají celkem málo výhod. Zde byste měli dávat pozor na své výdaje. Podle balíčku se to rychle nasčítá až k pěkné částce. Pak provozní náklady již nevyjdou o mnoho levněji, než když si necháte vyvinout vlastní šablonu.

Atomion WooCommerce šablona

Atomion je menší a stále celkem nová šablona. Podpora je ale poskytována v němčině. Design je jasný a strukturovaný, fokus leží na produktech:

Němčina WooCommerce Theme
Atomion WooCommerce šablona

Za šablonou Atomion stojí společnost MarketPress, výrobce German Market a B2B Market. Pokud hledáte kompletní balíček, který bere v úvahu restriktivní právní základy, stojí za to se podívat na tuto šablonu. Podle vývojářů jsou všechny tři komponenty koordinovány.

Tato WooCommerce šablona nabízí mimo jiné:

  • Podpora WordPress editoru Gutenberg
  • Úprava pro přizpůsobení designu na různých místech
  • Integrované systémy pro hodnocení zákazníků, stejně jako seznam přání
  • Nákupní košík v malé verzi, který by měl být také v souladu s právními předpisy
  • Volitelná funkce preloaderu (váš obchod se nezobrazí, dokud není plně nahrán)
  • Optimalizovaná vyhledávací funkce pro WooCommerce

Kromě toho je obsažena plně designovaná blogová sekce - navíc k e-shopu. Na to byste měli dávat pozor u všech šablon.

Poznámka

Aplikace vašich produktů s vhodným obsahem (tzv. content marketing) je čím dál tím důležitější. Mnoho nových a menších e-shopů prodává často z jejich blogů, protože jejich značka ještě není dostatečně známá na Googlu a mezi potenciálními návštěvníky.

Šablona Astra

Astra není čistě nákupní šablona. Lze ji také použít k implementaci jiných projektů. V souvislosti WooCommerce je ale používána poměrně často. Někteří z nich tvůrce představí na svém portálu.

Astra WooCommerce Theme
Šablonu Astra lze vyzkoušet na wordpress.org

Vývojáři společnosti Astra nabízejí bezplatnou zkušební verzi . Tu byste měli určitě zkusit: Někteří majitelé obchodů se s touto šablonou umí dobře vypořádat, jiným se k jejich účelům moc nehodí. I předhotovené designové šablony se nelíbí každému.

Otestujte zejména dodatečné pluginy k právní jistotě, pokud je používáte. Některé nepodporují šablony, které nejsou stoprocentně navrženy pro WooCommerce.

WooCommerce šablony od TemplateMonster

I u našeho partnera TemplateMonster najdete četné šablony pro WooCommerce. Například multifunkční WooCommerce šablonu Woostroid. Má vzrušující funkce, jako je "LookBook". To umožňuje kupujícím procházet různými produkty zobrazené v grafice:

templatemonster WooCommerce
LookBook WooCommerce šablony Woostroid

Woostroid obsahuje Elementor, WordPress pagebuilder, který umožňuje vytvářet různá rozložení bez znalostí programování. Obsahuje 25 obsahových modulů a flexibilní rozvržení mřížky pro flexibilní přizpůsobení vzhledu stávajících stránek. Woostroid nebyl určen pro česky mluvící trh, takže byste ho měli také předem vyzkoušet.

Můj závěr

Měli byste si vybrat několik málo šablon a dobře je otestovat, než si vyberete svou oblíbenou. Použijte živá data vašeho e-shopu a zodpovězte následující otázky:

  • Odpovídá design mým produktům, zejména obrázkům produktů?
  • Je tato šablona dostatečně rychlá? Podívejte se na naše poznámky k optimalizaci výkonnosti.
  • Je váš internetový obchod snadno použitelný? Jsou klíčové prvky snadno pochopitelné?
  • Funguje nákupní košík na všech systémech (Chrome, Firefox, Edge, Safari, Android)?
  • Je optimalizace pro mobilní zařízení k dispozici pro všechna důležitá koncová zařízení?

V ideálním případě necháte svůj nový design obchodu vyzkoušený důležitými zákazníky nebo kruhu známých. Je to jediný způsob, jak zjistit klíčové chyby, které přicházejí na úkor vaší konverze.

Další tipy na WooCommerce najdete v našem e-booku o více než 70 stranách WooCommerce pro profesionály. Je zaměřen na freelancery, agentury, WP profesionály i začátečníky.

Máte otázky týkající se WooCommerce? Použijte funkci komentáře. Chcete být informováni o novinkách a návodech o systému e-shopů? Tak nás sledujte na Twitter, Facebook nebo přes náš Bulletin.

Michael se stará u RAIDBOXES o oblasti content a mental health. V komunitě blogerů a WordPressu působí od roku 2007. Mimo jiné jako spoluorganizátor WordPress eventů, autor knih a Corporate Blog Trainer. Bloguje tak neuvěřitelně rád - profesionálně, ale i soukromě. Michael pracuje a píše na dálku ze slunného Freiburgu.

Podobné články

Komentáře k tomuto článku

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinná pole jsou označena * .