2025
Moldarajewelry.com
Pro Moldara Jewelry jsme vytvořili prémiový e-shop zaměřený na prodej ručně vyráběných šperků z vltavínů a dalších vzácných přírodních materiálů.
Celý web vznikal podle individuálního grafického návrhu ve Figmě s požadavkem na co nejpřesnější převod designu 1:1 do funkčního e-shopu. Realizace proto zahrnovala nejen stavbu jednotlivých stránek, ale také rozsáhlé úpravy WooCommerce a řadu vlastních programátorských řešení.
Klient
Jaroslav Sokol
Rozsah
- kompletní realizace e-shopu podle návrhu ve Figmě
- přesný převod desktopového i responzivního designu
- implementace a rozsáhlé úpravy WooCommerce
- vlastní programování nad rámec standardních možností šablony a builderu
- kompletní přepracování produktového archivu
- vlastní způsob vykreslování produktových karet
- úpravy detailu produktu a práce se specifickými parametry šperků
- vlastní prvky a funkce nákupního procesu
- responzivní optimalizace
- optimalizace uživatelského rozhraní pro prémiový segment
- technické úpravy pro další rozvoj e-shopu
Skóre při spuštění projektu:
Výsledky Lighthouse auditu měřené při spuštění projektu.
Výkon
0
/100
Přístupnost
0
/100
Doporučené postupy
0
/100
SEO
0
/100
Výzva
Hlavní výzvou bylo převést detailně připravený grafický návrh z Figmy do WordPressu a WooCommerce bez kompromisů, které často vznikají při použití standardních šablon a hotových komponent.
Design obsahoval řadu prvků a způsobů chování, které WooCommerce ve výchozím stavu nenabízí. Nestačilo proto pouze upravit vzhled pomocí CSS. Některé části e-shopu bylo potřeba řešit vlastním kódem a změnit samotný způsob, jakým WooCommerce obsah generuje.
Výrazným příkladem byl produktový archiv, jehož standardní WooCommerce struktura neodpovídala požadovanému návrhu ani způsobu prezentace jednotlivých šperků. Ten proto bylo potřeba prakticky kompletně přeprogramovat.
Specifické byly také samotné produkty. Jednotlivé šperky pracují například s hmotností v karátech, velikostí nebo dalšími údaji konkrétního kusu, které bylo potřeba vhodně začlenit do vizuální prezentace produktu. Aktuální e-shop například zobrazuje karátovou hmotnost přímo v produktových kartách.
Řešení
E-shop jsme vytvořili podle dodaného návrhu ve Figmě s důrazem na pixelově přesné zpracování a zachování vizuálního charakteru značky.
Tam, kde standardní možnosti WordPressu nebo WooCommerce nestačily, jsme jednotlivé části upravili nebo vytvořili vlastním programováním.
Produktový archiv dostal vlastní strukturu a způsob vykreslování produktů tak, aby přesně odpovídal grafickému návrhu a zároveň bylo možné pracovat se specifickými informacemi jednotlivých šperků.
Úpravy se netýkaly pouze vzhledu. Řešili jsme také logiku jednotlivých komponent, chování e-shopu a napojení vlastních prvků na WooCommerce tak, aby zůstala zachována standardní správa produktů a objednávek v administraci.
Výsledkem je e-shop na míru, který vizuálně odpovídá původnímu návrhu z Figmy, ale zároveň využívá WooCommerce jako plnohodnotné administrační a prodejní zázemí. Díky kombinaci standardních funkcí a vlastního vývoje bylo možné vytvořit řešení bez nutnosti přizpůsobovat původní design omezením hotové e-shopové šablony.
