Dlouhodobý vývoj Shoptet e-shopů Buga a Buga Outlet

Kontext klienta

Buga je česká módní značka zaměřená na dámské oblečení navrhované a šité v České republice. Vedle hlavních kolekcí provozuje také Buga Outlet, kde nabízí starší kolekce, vzorky z vývoje, poslední dostupné velikosti a oblečení s drobnými estetickými vadami. Původní hlavní e-shop i současný outlet fungovaly na platformě Shoptet. Požadavky značky ale postupně překračovaly možnosti běžné šablony i dostupných doplňků.

Kontext spolupráce

Na projektu jsem pracoval společně s kolegou Matějem. Nešlo o jednorázovou realizaci, ale o dlouhodobý rozvoj e-shopu, během kterého jsme postupně řešili nový vzhled, úpravy produktových a obsahových stránek, kampaně i vlastní funkce. Grafický návrh původního e-shopu Buga jsme obdrželi v Adobe XD. Naší úlohou bylo převést ho do funkčního a responzivního prostředí Shoptetu a přitom zachovat administraci, produktová data, objednávkový proces a další standardní funkce platformy. Později hlavní Buga přešla na vlastní e-shopové řešení. Na Shoptetu však nadále funguje Buga Outlet, který průběžně spravujeme a rozvíjíme.

Řešení

Původní šablonu jsme výrazně přepracovali podle dodaného designu. Úpravy se týkaly homepage, produktových výpisů, detailu produktu, obsahových stránek, navigace i dalších částí nákupního procesu. Pro požadavky, které Shoptet standardně nenabízel, jsme stavěli vlastní řešení nad existující strukturou platformy. Takto vznikly například outfitové články propojené s produkty nebo funkce Dopis pro Ježíška, přes kterou mohla zákaznice vybraný produkt poslat e-mailem jako tip na dárek. Na Buga Outlet jsme následně řešili specifické požadavky spojené s prodejem vzorků a produktů s vadami. Informace o typu vady se spravuje pomocí produktových příznaků a automaticky se propisuje do samostatného boxu v detailu produktu. Konkrétní poškození může zákazník zároveň vidět v produktové galerii.

Co jsem udělal

• Implementace kompletního vzhledu e-shopu podle návrhu v Adobe XD
• Rozsáhlé úpravy Shoptet šablony a tvorba vlastních frontendových komponent
• Úpravy homepage, kategorií, detailu produktu, navigace, hlavičky a patičky
• Responzivní zpracování pro desktop a mobil
• Tvorba a formátování obsahových stránek
• Převod blogových článků a fotografií do vlastní HTML struktury
• Tvorba outfitových článků propojených s produkty
• Vývoj funkce Dopis pro Ježíška
• Průběžné kampaně a promo prvky
• Správa a další rozvoj Buga Outlet
• Vlastní komunikace vad produktů pomocí příznaků
• Úpravy produktové galerie pro fotografie konkrétních vad
• Časově řízené zobrazování slevových kódů
• Tvorba vlastní stránky 404
• Průběžné opravy a údržba e-shopu

Co jsem řešil

• převod návrhu z Adobe XD do Shoptetu
• přizpůsobení standardních prvků platformy značce
• vlastní obsahové a produktové komponenty
• outfitové články s konkrétními produkty
• Dopis pro Ježíška s odesláním tipu e-mailem
• vlastní HTML struktura blogových článků
• produktové příznaky pro vzorky a drobné vady
• automatické zobrazení informace o vadě
• fotografie konkrétní vady v galerii
• odlišné texty podle příznaků produktu
• časované slevové kampaně
• responzivní zobrazení všech vlastních prvků

Výsledek

Původní e-shop Buga získal kompletně přepracovaný frontend odpovídající vizuálnímu stylu značky a řadu vlastních funkcí, které v té době nebylo možné vyřešit pomocí standardních doplňků. Vedle samotného prodeje e-shop podporoval také obsah, inspiraci, práci s outfity a sezónní kampaně. Funkce jako Dopis pro Ježíška spojovaly produkty s konkrétním nákupním scénářem a rozšiřovaly možnosti běžného Shoptet e-shopu. Po přechodu hlavní Bugy na vlastní řešení zůstává na Shoptetu Buga Outlet, který dále spravujeme a rozvíjíme. Také zde vznikají vlastní řešení přizpůsobená specifickému sortimentu, například automatická komunikace drobných vad nebo časované kampaně.