Případová studie - Z dobře vypadajícího Figma návrhu jsme museli udělat e-shop, který se dá skutečně používat.

Když jsme projekt přebírali, existoval rozpracovaný návrh homepage ve Figmě, který dobře definoval vizuální charakter MODECKu.

Nejvíc byla dotažená desktopová varianta, u některých částí existovaly také návrhy pro mobil. Při převodu do skutečného e-shopu ale bylo na řadě míst potřeba jít výrazně dál než jen implementovat připravené obrazovky.

Některé sekce vypadaly dobře jako statický návrh, ale při běžném používání by byly zbytečně složité, vytvářely další kroky nebo nevedly návštěvníka dostatečně jasně směrem k nákupu.

Původní Figma návrh jsme proto použili jako kreativní základ a postupně ho rozšířili o UX logiku, responzivní chování a konverzní principy potřebné pro reálný e-shop.

Jednou z hlavních částí práce bylo převést vizuálně silný návrh do prostředí, které musí fungovat při skutečném nákupu.

U některých komponent jsme původní vzhled prakticky zachovali, ale změnili jejich hierarchii, interakce nebo mobilní chování. Jinde bylo potřeba celé části domyslet nově, protože původní návrh neřešil produktové varianty, práci s doplňky nebo další kroky zákazníka dostatečně do hloubky.

Výsledný design tak nevznikl jako úplně nový koncept vedle původního návrhu. Vzali jsme kvalitní kreativní základ ve Figmě a dotáhli ho do kompletního e-commerce systému, který počítá s reálným používáním i konverzemi.

Pro MODECK jsme zvolili headless architekturu postavenou na Shopify Hydrogen a Oxygen.

Shopify tak dál řeší produktová data, objednávky, zákazníky a checkout, zatímco veřejnou část e-shopu jsme mohli navrhnout podle konkrétních potřeb MODECKu.

Headless řešení nám dalo větší kontrolu nad UX, výkonem a vlastní funkcionalitou, než jakou by poskytovala běžná Shopify šablona.

Právě kombinace stabilního commerce backendu Shopify a vlastního storefrontu nám umožnila stavět funkce kolem produktu, místo abychom produkt přizpůsobovali omezením hotové šablony.

Hlavním produktem MODECKu je modulární pracovní stůl doplněný o příslušenství, které si zákazník může sestavit podle svého pracovního prostředí.

Proto jsme vytvořili vlastní nákupní sekci, ve které zákazník nemusí po výběru stolu postupně procházet několik dalších produktových stránek.

Přímo v jednom rozhraní může ke stolu přidávat jednotlivé doplňky, upravovat jejich množství pomocí vlastních quantity prvků a průběžně vidět mezisoučet zvoleného příslušenství.

Commerce logiku jsme tak přizpůsobili tomu, jak se produkt skutečně kupuje.

Produktové stránky jsme postavili kolem variant, aktuální dostupnosti, produktových fotografií, navazujícího příslušenství a doporučených produktů.

Součástí řešení je také vlastní systém zákaznických recenzí. Přihlášený zákazník může produkt ohodnotit, přidat recenzi a svou existující recenzi později upravit.

Hodnocení a recenze nejsou řešené externím widgetem, ale jako vlastní funkce integrovaná přímo do Shopify infrastruktury.

Produktové stránky zároveň pracují se strukturovanými daty a dalšími SEO prvky potřebnými pro organické vyhledávání.

Součástí e-shopu je zákaznická část s profilem, adresami, historií objednávek a wishlistem.

Wishlist jsme do projektu doplnili z vlastní iniciativy. U produktu s vyšší pořizovací cenou a delším rozhodováním nám dávalo obchodní smysl umožnit návštěvníkovi produkty uložit a vrátit se k nim později.

Wishlist je navázaný na zákaznický účet a jeho fungování jsme řešili prostřednictvím vlastní Shopify aplikace, takže nejde pouze o lokální stav uložený v jednom prohlížeči.

Vlastní Shopify aplikaci využíváme také jako technický základ pro další zákaznické funkce, které bylo potřeba nad standardní možnosti storefrontu doplnit.

MODECK jsme napojili také na systémy, které řeší další části zákaznické cesty.

Pro vrácení zboží a reklamace je do webu integrované Retino, takže zákazník může navázat na nákup přímo z prostředí e-shopu.

Formuláře a databázi kontaktů jsme propojili s Brevo. Integrace dnes slouží pro newsletter, kontaktní a B2B formuláře a současně vytváří základ pro další e-mailingový marketing a remarketing.

Tyto integrace jsme nebrali jako samostatné doplňky, ale jako součást jednoho commerce ekosystému.

Jednou z technicky nejnáročnějších částí projektu bylo přesné měření celé nákupní cesty mezi Hydrogen storefrontem a Shopify checkoutem.

Potřebovali jsme určit, kde má každá analytická událost vzniknout, zachovat správnou produktovou identitu a zároveň zabránit tomu, aby se stejná akce započítala několikrát.

Pro Google jsme připravili kompletní e-commerce datovou vrstvu od zobrazení produktů, vyhledávání, wishlistu a košíku až po checkout, platební kroky a dokončenou objednávku.

Součástí řešení je také Consent Mode v2, takže analytické a marketingové technologie respektují zvolený souhlas návštěvníka.

Pro MODECK jsme nastavili Google Analytics 4, Google Ads a Google Tag Manager včetně kompletního e-commerce event modelu.

Storefront měří jednotlivé fáze nákupního chování a Shopify checkout na ně následně navazuje událostmi, které vznikají až v checkoutovém prostředí.

Architekturu jsme navrhli tak, aby se události neduplikovaly a aby bylo možné reklamní i analytické platformy používat nad konzistentními daty.

Díky tomu je e-shop připravený nejen na základní návštěvnostní reporting, ale i na výkonnostní kampaně a jejich další optimalizaci.

Pro Meta jsme nastavili měření tak, aby vlastní Hydrogen storefront a Shopify-hostovaná část nákupního procesu měly jasně rozdělenou odpovědnost.

Na storefrontu měříme události, které Shopify na headless webu samo spolehlivě nevidí — například zobrazení produktu, vyhledávání, přidání do košíku nebo wishlistu.

Checkout a objednávkovou část včetně Conversions API a deduplikace nákupu přebírá oficiální Shopify integrace pro Meta.

Výsledkem je měření bez několika paralelních implementací, které by posílaly stejné nákupy nebo checkoutové události vícekrát.

Shopify produktová data jsme napojili také na Google Merchant Center.

Pro MODECK jsme připravili automatickou synchronizaci produktů a variant, takže Merchant Center může pracovat s aktuální nabídkou přímo z commerce dat e-shopu.

Produktové odkazy zároveň dokážou návštěvníka přivést na odpovídající variantu produktu.

Vedle Merchant Center jsme nastavili také Google Search Console, Bing Webmaster Tools a Seznam Webmaster, aby měl nový brand připravenou technickou základnu pro indexaci napříč hlavními vyhledávači.

MODECK jsme převzali ve fázi, kdy existoval vizuální základ homepage a klient měl připravené produktové materiály. Postupně jsme kolem nich vytvořili kompletní headless e-shop — od UX & UI a samotného nákupního procesu přes zákaznické funkce až po analytiku, produktové feedy a návazné služby.

Výsledkem je storefront, který se nemusí přizpůsobovat omezením hotové Shopify šablony a ve kterém jsme mohli obchodní logiku navrhnout podle samotného produktu.

Zároveň jsme od začátku připravili infrastrukturu potřebnou pro další růst značky — měření, reklamní platformy, produktové feedy, vyhledávače, e-mailing, remarketing, recenze, wishlist i poprodejní procesy.

MODECK pro nás není uzavřená realizace. E-shop od roku 2026 dál aktivně rozvíjíme podle toho, co nový brand potřebuje při vstupu na trh.