Sara Mote a já jsme v roce 2014 založily agenturu MOTE. Specializujeme se na e-commerce, poskytujeme precizní design, špičková technická řešení a služby nejvyšší kvality pro neustále se měnící trh. Ve své kariéře webového vývojáře jsem si vybudovala vášeň pro inovace a zaměření na vytváření webových stránek pro značky, které chtějí budovat trvalé vztahy se svými zákazníky. Zde jsou některé poznatky, které jsem získala během svých 26 let praxe.
Při navrhování e-commerce webové stránky by vaším cílem mělo být vytvořit něco estetického a strategického. Shopify usnadňuje vytvoření e-commerce webové stránky, která splňuje obě tyto podmínky, i když nemáte žádné předchozí zkušenosti s kódováním nebo designem.
Jako přední e-commerce platforma umožňuje Shopify obchodníkům budovat online obchody pomocí přizpůsobitelných šablon. Každá webová stránka Shopify je také vybavena jednoduchou pokladnou a funkcemi AI (Shopify Magic), které vám pomohou psát popisy produktů, odpovědi na časté dotazy a marketingové e-maily.
Tyto nástroje jsou snadno použitelné, takže můžete začít prodávat na stránkách pro DIY hned teď – s možností později přizvat profesionálního designéra, jakmile váš Shopify obchod nabere obrátky.
Shopify web design: jak navrhnout webovou stránku na Shopify
- Vytvořte si stylový manuál značky
- Vyberte si šablonu
- Přidejte prvky značky
- Zkontrolujte výkon
- Zaměřte se na správu obsahu
- Harmonizujte napříč kanály
Při Shopify web designu je klíčové vytvořit solidní základ. Zaměřte se na výkon a snadnost použití. Také budujte svou značku, abyste se odlišili na trhu už od začátku.
Zde je nejlepší způsob, jak přistoupit k navrhování vaší webové stránky na Shopify:
1. Vytvořte si stylový manuál značky
Než se pustíte do budování svého webu, musíte učinit několik rozhodnutí ohledně značky. Pokud již máte manuál značky, skvělé. Pokud ne, nyní je čas finalizovat svou typografii, barvy značky a logo.
Typografie
Začněte s písmem, které je čitelné, ale ne generické, jako je Basic Commercial z knihovny písem Shopify. Je to bezplatné písmo s prémiovým vzhledem, které používají luxusní značky jako The Row.
Typografie může rychle vyjádřit hodně osobnosti. Výběr písma také ovlivní rozložení vaší webové stránky — jak je vizuálně organizována — takže je rozumné začít tam a na tomto rozložení stavět.
Barva
Vybraná barevná paleta může ovlivnit, jak spotřebitelé vnímají vaši značku a jak chápou informace na vašem webu. Barevné palety s vysokým kontrastem jsou dobrou volbou, protože jsou nejčitelnější a nejdostupnější.
Jako paletu pro svou značku můžete například zvolit černou a bílou barvu – a i v rámci těchto základních barev můžete vyjádřit náladu a branding výběrem konkrétních odstínů černé a bílé, jako je například tmavě šedá a špinavě bílá.
Logo
Logo je klíčovým prvkem budování rozpoznatelnosti a povědomí o značce pro vaše podnikání. Věnujte dostatek času vytváření svého loga — mělo by být zapamatovatelné a vyjadřovat podstatu vaší značky.
Pokud zvažujete spolupráci s designérem, ten vám bude schopen poskytnout několik směrů, ze kterých si můžete vybrat, a vylepšit váš nejlepší výběr loga. Pokud designér není ve vašem současném rozpočtu, můžete použít nástroj pro online tvorbu loga k vytvoření svého prvního loga.
2. Vyberte si šablonu
V V Shopify Theme Store je k dispozici mnoho možností pro Shopify web design, včetně placených šablon, jejichž cena se pohybuje až do 450 USD (cca 9 515 Kč).
Pokud si nejste jisti, kde začít, vyzkoušejte šablonu Dawn. Dawn je bezplatná Shopify šablona s vynikajícím mobilním výkonem, což je velmi důležité pro konverzi. Je to ideální základ pro kvalitní obchod na Shopify.
Při porovnávání šablon zvažte:
Váš rozpočet
Pokud jste novým majitelem firmy s omezeným kapitálem, možná byste se měli držet bezplatné šablony, abyste zjistili, jak daleko vás dostane. Vždy můžete později upgradovat na prémiovou šablonu, jakmile se vaše podnikání rozroste. Do té doby budete mít mnohem lepší představu o tom, za které funkce byste byli ochotni připlatit. Pokud chcete více funkcí, ale nemáte rozpočet na najmutí designéra, prémiová šablona by mohla být tou pravou volbou.
Velikost katalogu produktů
Váš výběr šablony bude částečně určen tím, kolik produktů máte ve svém katalogu. Většina bezplatných a placených šablon podporuje více než 200 produktů, ale existují některé kvalitní šablony (jako Dawn) s maximálním katalogem 199 produktů a malý počet šablon s maximálně devíti produkty. Šablony můžete snadno filtrovat podle velikosti v Shopify Themes Store.
Funkce webu
Pokud váš obchod na Shopify potřebuje specifické funkce — jako je pevná navigační lišta, úvodní video nebo funkci rychlý nákup. K filtrování šablon, které tuto funkci mají, můžete použít vyhledávací lištu v Shopify Theme Store.
Mobilní zkušenost
Pokud většina návštěvnosti vašeho webu je z mobilních zařízení, měli byste se zaměřit na rychlé načítání. To platí zejména, pokud zákazníci nacházejí vaše produkty přes Instagram nebo TikTok. Rychlost může být důležitější než atraktivní funkce, jako jsou videa nebo mega menu.
Návštěvníci z mobilního zařízení tyto funkce možná vůbec nevyužijí a pravděpodobně odejdou, pokud se váš web bude načítat příliš dlouho. To má navíc výhodu v zlepšení vaší optimalizace pro vyhledávače (SEO). Při porovnávání šablon nezapomeňte vyzkoušet mobilní verzi ukázkové šablony (ideálně si ji zobrazte z vašeho telefonu).
3. Přidejte prvky značky
Jakmile si vyberete šablonu, je čas přidat nějaké brandingové prvky. Zde je návod, jak přidat prvky značky na váš Shopify web:
Přidejte své logo a barvy značky
V administraci Shopify vyberte Settings > General, poté vyberte Manage v sekci Brand assets. Můžete pak přidat své logo a barvy značky. Ty se automaticky aplikují na vaši šablonu Shopify a jakékoli další kanály s Brand API.
Přizpůsobte si svou šablonu
V editoru šablon můžete dále přizpůsobit svůj obchod na Shopify. Přejděte na Online Store > Themes, klikněte na šablonu, kterou chcete upravit, a vyberte Customize. Poté klikněte na ikonu ozubeného kola nastavení šablony, abyste přizpůsobili vše od typografie po charakteristiky rozložení. Sem patří horizontální a vertikální prostor.
Vytvořte branded checkout zkušenost
Jsou to malé detaily, které mohou pro značku znamenat hodně. Chcete-li mít plně „branded“ zkušenost, upravte svou pokladnu. To zahrnuje stránky s poděkováním a stavem objednávky. Ty se zobrazí po dokončení nákupu v Shopify obchodě.
Vše by mělo být v souladu s vzhledem a pocitem zbytku vašeho webu. Můžete přidat své logo a změnit barvy a písma ve své administraci Shopify přechodem na Settings > Checkout > Customize.
Upravte svou e-mailovou šablonu
Když zákazník zadá objednávku, máte příležitost s ním dále budovat vztah. Místo zasílání generických e-mailů vytvořte ve svém administrátorském rozhraní Shopify e-mailovou šablonu se svou značkou.
Přejděte na Settings > Notifications > Customer notifications > Customize email template.
Přidejte své logo a barvy značky, aby byl e-mail okamžitě rozpoznatelný. Upravte také text, abyste zákazníkovi připomněli vaše společné hodnoty nebo mu pomohli zvýšit nadšení z nákupu pomocí informací o produktu. Nezapomeňte do e-mailu zakomponovat hlas a osobnost vaší značky.
Začleňte fotografii
Prostřednictvím lifestyleových fotografií a fotografií produktů můžete vyjádřit osobnost vaší značky. Dbejte na jednotnost obrázků na stránkách vašich produktů – například tím, že každý produkt vyfotografujete na stejném barevném pozadí a při stejném osvětlení.
Kvalitní fotografie produktů dodají vašim zákazníkům důvěru k nákupu, ale také barvy, textury a rekvizity, které vyberete, mohou významně přispět k vytvoření atmosféry a budování vaší značky.
4. Zkontrolujte výkon
Můžete mít nejkrásnější Shopify web design, ale to nebude zákazníkům nic platné, pokud se správně nenačítá. Proto by měla být funkčnost webu vždy vaší nejvyšší prioritou při navrhování obchodu a webu na Shopify.
Základní webové ukazatele jsou standardem pro měření výkonu webu. Google je používá k hodnocení klíčových funkcí, na kterých uživatelé nejvíce záleží: rychlost načítání, interaktivita a vizuální stabilita.
Pokud jsou vaše základní webové ukazatele špatné, návštěvníci vašeho webu pravděpodobně zažijí frustrující zkušenost — nebo dokonce odejdou, což zvýší váš bounce rate (míru opuštění). Ještě hůř, vaši návštěvníci vás možná nenajdou. Vyhledávače zneprioritizují váš web, pokud nebudou splněny standardy vašich ukazatelů.
Vaše základní webové ukazatele můžete zkontrolovat ve své administraci Shopify přechodem na Sales channels > Online Store > Themes.
Jednou z výhod použití minimalistického motivu, jako je Dawn, je jeho vysoký výkon ihned po instalaci. (Všechny motivy Shopify byly prověřeny z hlediska rychlosti a spolehlivosti.) Pokud vycházíte z pevného základu výkonu, bude snadné zjistit, jak změny ovlivňují vaše základní webové vitální funkce.
Navrhování webové stránky na Shopify je o rovnováze. Například video může být velmi silným vyprávěcím médiem, ale velká velikost souboru může snížit rychlost načítání.
Pro značku šperků Jacquie Aiche bylo řešením ukázat uživatelům s pomalejšími internetovými připojeními náhradní obrázek. Tímto způsobem, bez ohledu na rychlost načítání, by nebyla ohrožena zkušenost uživatelů.
Video, velké obrázky a další vizuální prvky nejsou jedinými faktory, které mohou ovlivnit rychlost webu. Pluginy — kódy třetích stran, které přidávají funkce do vašeho webu Shopify nebo je propojují s jinými platformami — mohou také zpomalit váš web.
Budete se muset rozhodnout, které funkce stojí za pokles výkonu a jaké kompromisy v oblasti webových ukazatelů jste ochotni učinit, abyste zlepšili další zkušenosti na vašem webu s vaší značkou.
5. Zaměřte se na správu obsahu
Jako majitel online obchodu máte schopnost ovlivnit rozhodnutí svých zákazníků prostřednictvím rozhodnutí o merchandisingu. Kurace je klíčovou součástí kvalitního e-commerce merchandisingu. Behaviorální ekonomové tento termín nazývají architekturou výběru, termín, který vytvořili Richard Thaler a Cass Sunstein ve své knize Nudge.
Zde je příklad architektury výběru: Řekněme, že máte kolekci produktů „Novinky“. Místo zobrazení produktů v defaultním pořadí je ručně přeuspořádáte tak, aby produkty, které k sobě ladí, byly vedle sebe.
Takováto promyšlená kurace může mít jemný psychologický efekt, který buduje důvěru vašich zákazníků. Mohou si říct: „Pokud se tato značka stará natolik, aby uspořádala tuto stránku „Novinky“, mohla by se starat i o můj balíček.“ Editor šablon Shopify s funkcí drag-and-drop usnadňuje přeuspořádání produktů a obrázků pro nejlepší zákaznickou zkušenost.
Vaše stránky kolekcí nejsou jediným místem, kde můžete ukázat své dovednosti jako kurátor. Aplikace Shopify Search & Discovery vám umožňuje zobrazovat doplňkové produkty na každé stránce produktu.
Pokud máte módní obchod a někdo zhlíží stránku trička, využijte to. Řekněte: „Toto tričko by se skvěle hodilo k těmto kalhotám a bundě.“ Doporučování doplňkových produktů buduje důvěru a zvyšuje průměrnou hodnotu objednávky.
6. Harmonizujte napříč kanály
Váš Shopify obchod pravděpodobně není jediným místem, kde mohou zákazníci najít váš e-shop. Pokud používáte sociální sítě nebo jiné platformy, je důležité považovat váš Shopify obchod za součást širší multikanálové prodejní strategie.
Například, řekněme, že spouštíte influencer marketingovou kampaň na Instagramu. Umístěte fotografii tohoto influencera přímo na svou domovskou stránku. Tímto způsobem, pokud váš zákazník přistane na vašem webu přes Instagram, bude mít pocit kontinuity. Jeho očekávání budou splněna a vy okamžitě začnete budovat důvěru.
V obchodě s aplikacemi Shopify najdete aplikace, které vám umožní propojit váš Shopify web s jinými kanály, jako jsou Instagram a TikTok, takže můžete spravovat všechny své kampaně z jednoho místa — vaší administrace Shopify.
Mít vše na jednom místě značně usnadňuje konzistentní aplikaci jakýchkoli změn ve vašem brandingu.
Kdy najmout designéra pro váš obchod na Shopify
Jak vaše značka roste, můžete zjistit, že už nemá smysl spravovat svůj vlastní web.
Možná je čas najmout designéra pro váš Shopify web design, pokud:
- Čas, který trávíte prací na svém webu, vám ubírá čas od klíčových činností v obchodě Shopify, jako je navrhování produktů, kurace kolekcí nebo řízení zaměstnanců
- Vaše šablona Shopify již nesplňuje vaše potřeby
- Rebrandingujete a chcete nový web, který by odpovídal
Dobrý designér nebo vývojář s vámi zůstane, jak vaše značka poroste, měsíčně kontroluje vaše analytiky a doporučuje jakékoli aktualizace nebo redesigny. Designér také může přidat vlastní funkce, které nenajdete v šabloně, jakmile se vaše potřeby webu stanou komplexnějšími.
Často kladené otázky: Shopify web design
Kolik stojí vybudování webu na Shopify?
Web na Shopify s vlastní doménou můžete vybudovat již od 29 USD měsíčně (cca 615 Kč) se základním plánem Shopify, který má vše, co potřebujete jako podnikatel s online obchodem. Výběr plánu závisí hlavně na velikosti vašeho týmu:
- Základní plán Shopify zahrnuje jednoho uživatele účtu Shopify.
- Standardní plány Shopify zahrnují pět dalších účtů pro zaměstnance (79 USD/měsíc - cca 1 670 Kč).
- Pokročilý plán Shopify vám poskytne dalších 15 účtů pro zaměstnance (299 USD/měsíc - cca 6 320 Kč).
- Obchodníci s vysokým objemem mohou přejít na Shopify Plus, který zahrnuje neomezené účty pro zaměstnance a B2B funkce (2 300 USD/měsíc - cca 48 630 Kč).
Potřebuji zkušenosti s kódováním k vytvoření webu na Shopify?
Ne, nepotřebujete zkušenosti s kódováním k vytvoření webu na Shopify a zahájení prodeje ve svém online obchodě. Editor šablon Shopify s funkcí drag-and-drop usnadňuje přizpůsobení vaší e-commerce webové stránky — žádné kódování není potřeba.
Jak najmout designéra pro Shopify web design?
Existuje mnoho webových designérů, kteří se specializují na Shopify web design. Můžete je najít v adresáři partnerů Shopify.
