Shopify Plus Frontendový vývoj Dlouhodobá spolupráce

Dlouhodobý frontendový vývoj e-shopu Snuggs

Frontendový vývoj Shopify Plus e-shopů značky Snuggs napříč pěti samostatnými instancemi a několika jazykovými mutacemi.

Shrnutí projektu

V rámci agentury Ideal Eshop se od března 2024 podílím na dlouhodobém frontendovém vývoji Shopify Plus e-shopů značky Snuggs. Převádím návrhy z Figmy do responzivních landing pages, nových Shopify sekcí a dalších částí e-shopu napříč pěti samostatnými instancemi a několika jazykovými mutacemi.

Shopify Plus instancí

03/2024

začátek spolupráce

10+

landing pages a kampaní

Frontend

moje role

Detaily projektu

Kontext, problém, řešení a moje role v projektu.

Kontext klienta

Snuggs je značka zaměřená na menstruační prádlo, která působí na několika evropských trzích. Pro český, slovenský, německý, britský a mezinárodní trh využívá pět samostatných Shopify Plus instancí. Mezinárodní e-shop zároveň obsluhuje další jazykové mutace, například polskou a nizozemskou.

Kontext spolupráce

Na projektu Snuggs pracuji pravidelně od března 2024 v rámci agentury Ideal Eshop. Nejde o jednorázovou realizaci, ale o průběžný rozvoj existujících Shopify Plus e-shopů. Mým hlavním úkolem je převádět hotové návrhy z Figmy do funkčního a responzivního prostředí Shopify, vytvářet nové spravovatelné sekce, testovat výsledné řešení a následně změny nasazovat do jednotlivých instancí.

Řešení

Nové části vytvářím jako znovupoužitelné Shopify sekce a komponenty, jejichž obsah lze následně upravovat přímo v administraci. Při implementaci vycházím z návrhů ve Figmě pro desktop a mobil. Mezilehlé responzivní stavy dopracovávám ručně podle charakteru konkrétní stránky a existujícího chování e-shopu. U navigace vznikla nová desktopová i mobilní implementace od začátku včetně mega menu, chování při scrollování a barevných variant podle typu stránky.

Co jsem udělal

Implementace návrhů z Figmy do Shopify tématu pomocí Liquid, HTML, Tailwind CSS a JavaScriptu
Tvorba nových komponent a spravovatelných Shopify sekcí
Napojení nastavení do administrace
Dopracování responzivního chování mezi desktopem a mobilem
Přizpůsobení řešení existujícímu tématu
Testování v různých rozlišeních a prohlížečích
Práce s Gitem a nasazení změn do jednotlivých Shopify Plus instancí
Kontrola jazykových mutací a lokálního obsahu

Co jsem řešil

tvorba kampaňových a produktových landing pages
landing page pro aplikaci Snuggs Phases
stránka New to Snuggs
kolekce Dreams a Ateliér
Black Friday kampaně
Swim a Lace landing pages
kompletní redesign desktopové a mobilní navigace
vytvoření nového mega menu
chování navigace při scrollování
barevné varianty navigace podle typu stránky a pozadí
redesign stránek kolekcí
úpravy filtrů, subkolekcí a Shopify metafieldů
správa produktů, kolekcí a parametrů pro nové produktové řady

Hlavní výzva

Snuggs klade vysoký důraz na přesnost vizuálního zpracování. Implementace proto nestačí pouze přibližně převést návrh do webové podoby. Jednotlivé části musí co nejvěrněji odpovídat Figmě v typografii, rozestupech, proporcích, chování i responzivních stavech. Další náročnou částí je nasazování změn napříč pěti samostatnými Shopify Plus instancemi a několika jazykovými mutacemi.

Výsledek

Výsledkem je průběžně rozvíjený frontend, který umožňuje značce nasazovat nové kampaně, kolekce a produktové stránky v souladu s aktuálním vizuálním stylem. Návrhy připravené ve Figmě jsou převáděny do responzivních a spravovatelných Shopify sekcí, které lze dále používat a upravovat v administraci. Nové landing pages, navigace, kolekce a další části e-shopu fungují konzistentně napříč jednotlivými Shopify Plus instancemi a jazykovými mutacemi.

Poznámka ke spolupráci

Projekt je realizován v rámci agentury Ideal Eshop. Na projektu působím jako frontendový vývojář a prezentuji zde pouze části, na jejichž implementaci jsem se přímo podílel.

Použité technologie

Shopify Plus Liquid HTML Tailwind CSS JavaScript Shopify metafields Git Figma