Frontendové úpravy a rozvoj Shoptet e-shopu Dotek Slunce

Kontext klienta

Dotek Slunce je český obchod a e-shop zaměřený na přírodní kosmetiku, niche parfémy, líčení a produkty pro péči o tělo. Vedle internetového obchodu provozuje také kamennou prodejnu v Brně a staví na osobním výběru produktů a poradenství zákazníkům. E-shop funguje na platformě Shoptet a obsahuje rozsáhlou nabídku produktů různých značek, kategorií a barevných variant.

Zadání

Stávající šablona neposkytovala vhodné zobrazení odstínů u make-upů, rtěnek a dalších produktů s větším množstvím barevných variant. Zákazník musel vybírat odstín z běžného textového pole, což bylo u kosmetiky nepřehledné a neumožňovalo snadno porovnat jednotlivé barvy. Klientka zároveň potřebovala zpřehlednit hlavní stránku a navigaci, lépe představit jednotlivé kategorie, konkurenční výhody, prodávané značky a příběh obchodu.

Řešení

U vybraných produktů jsem standardní výběr variant doplnil o vlastní barevné swatche. Po kliknutí na odstín se zvolí odpovídající varianta a aktualizuje se hlavní fotografie produktu bez nutnosti znovu načítat celou stránku. Řešení nadále využívá standardní varianty Shoptetu, takže zůstává zachováno napojení na skladové zásoby, objednávky, produktové feedy a administraci. Homepage jsem rozšířil o grafické rozcestníky hlavních kategorií, konkurenční výhody, produktový slider, představení obchodu a zákaznické recenze. Součástí projektu bylo také rozšíření navigace, vytvoření přehledu prodávaných značek podle abecedy a samostatné FAQ stránky.

Co jsem udělal

• Vytvoření barevných swatchů pro varianty produktů
• Propojení swatchů se standardními variantami Shoptetu
• Změna produktové fotografie podle vybraného odstínu
• Úprava struktury a obsahu homepage
• Vytvoření grafických rozcestníků kategorií
• Doplnění konkurenčních výhod a produktových doporučení
• Rozšíření hlavní navigace o další sekce
• Vytvoření přehledu prodávaných značek A–Z
• Vytvoření FAQ stránky s rozbalovacími odpověďmi
• Responzivní úpravy pro desktop i mobil
• Testování kompatibility s existující šablonou a funkcemi Shoptetu

Co jsem řešil

• vizuální výběr produktových variant podle barvy
• synchronizace swatchů s variantami Shoptetu
• okamžitá změna hlavní produktové fotografie
• grafické rozcestníky produktových kategorií
• konkurenční výhody a produktový slider
• představení obchodu a zákaznické recenze
• rozšíření hlavního menu o důležité sekce
• přehled značek rozdělený podle počátečního písmene
• nová stránka O nás
• FAQ s rozbalovacími odpověďmi

Výsledek

Výběr odstínů je nyní pro zákazníka výrazně přehlednější a konkrétní variantu lze vybrat přímo podle její barvy. Změna odstínu probíhá plynule bez zbytečného načítání celé stránky a přitom zůstává zachováno standardní fungování produktových variant v Shoptetu. Homepage lépe představuje hlavní sortiment, výhody i příběh obchodu. Díky rozšířené navigaci, přehledu značek a FAQ se zákazníci snáze dostanou k hledaným produktům a informacím.