Case study
Butikowy e-commerce dla luxury hand-craft
Marka INARD tka torebki z naturalnych włókien w warsztacie w Prizren. Sklep miał oddać charakter rzemiosła — bez Shopify-clichu, bez frameworków, bez bloatu.
Wyzwanie
Z czym przyszedł klient
INARD to butikowa marka tworząca hand-woven torebki z naturalnych, certyfikowanych włókien w warsztacie w Prizren (Kosowo). Każda sztuka jest unikatowa, kolekcje są małe, klientka kupuje raz i wraca po historii. Standardowy template Shopify by tę markę zabił — wszyscy konkurenci wyglądają tak samo. Wyzwanie: e-commerce, który czyta się jak butikowy magazyn modowy, ładuje się natychmiast (rynek luxury fashion = 70% mobile, brak cierpliwości na 3-sekundowy LCP), ma editorial typografię, opowiada o pochodzeniu materiałów i pojedynczego rzemieślnika, a jednocześnie pozwala zamówić w trzech klikach. I robi to bez frameworków, bo każdy framework to dług techniczny dla zespołu, który chce w przyszłości wprowadzać zmiany sam.
Podejście
Jak to rozwiązaliśmy
Stack świadomie minimalny — vanilla HTML, CSS (custom properties), wanilia JS. Żadnego Reacta, Vue, Shopify Liquid. Cloudflare Pages dla anycast TLS i bezpłatnego CDN. Editorial typografia: serif heading („Woven with passion. Worn with class.”), sans-serif body, paleta off-white + dusty gold + espresso. Top bar z trzema USP rotującymi co 4s (free shipping, certified materials, 16-day returns). Strona kolekcji z masonry grid produktów + filter po typie (clutch, bucket, tote) i materiale. Strona produktu: galeria 4-5 kadrów (full-frame, model, detail, scale), opis z origin story, wybór koloru jako ikony, opis materiałów z certyfikatami, „Hand-woven in Prizren” jako badge. Koszyk + checkout — na razie statyczny embed Snipcart (vendor-locked tylko na koszyku, reszta zostaje vanilla). Cart drawer wjeżdża z prawej, zachowuje stan w localStorage. Strona About z reportażem fotograficznym z warsztatu i biografiami rzemieślniczek. Newsletter z early-access do nowych kolekcji. Schema.org Product + AggregateRating per produkt. Mobile-first 100% — desktop dostosowuje się do mobile, nie odwrotnie.
Rezultaty
Co udało się osiągnąć
0
frameworków JS — pure vanilla
Cloudflare
Pages + R2 dla obrazów (anycast)
Snipcart
checkout bez backendu
schema.org
Product + AggregateRating na każdej karcie
Zakres prac
Co zbudowaliśmy
Editorial design bez frameworków
Serif heading + sans-serif body, paleta off-white/gold/espresso. Wygląda jak butikowy magazyn, nie jak Shopify-template.
Top bar z USP rotacją
Trzy kluczowe wartości (free shipping, certified materials, 16-day returns) rotują co 4s. Pure CSS animation, pauzuje przy reduced-motion.
Filtr produktów po typie i materiale
Bez przeładowywania strony — vanilla JS toggle ze smooth fade-in. Działa offline po pierwszym załadowaniu.
Strona produktu z origin story
Galeria 4-5 kadrów, opis z pochodzeniem, wybór koloru jako ikony, badge 'Hand-woven in Prizren'. Storytelling sprzedaje, nie cena.
Cart drawer + localStorage
Koszyk wjeżdża z prawej strony, stan trzymany w localStorage. Klient wraca po dniach i ma wszystko gotowe.
Snipcart checkout
Vendor-locked tylko w koszyku — reszta strony zostaje vanilla. Stripe + Klarna + 3DS w jednym SDK.
Schema.org Product + AggregateRating
Produkty pokazują się w Google z ceną, dostępnością i oceną. Klikalność z SERP wyższa o ~20% niż bez schema.
Reportaż z warsztatu
Strona 'Our Story' z fotografią z Prizren i biografiami rzemieślniczek. Najsilniejszy social proof w segmencie luxury hand-craft.
Stack technologiczny
Z czego jest zbudowane
Czas realizacji
2–3 tygodnie
Twój projekt może być następny. Wyślij brief — przygotujemy konkretną propozycję w jeden dzień roboczy.
Wyceń podobny projektInne realizacje
Może Cię zainteresować
Wielostronicowa wizytówka apartamentu wakacyjnego — blog, galeria, formularz Web3Forms.
Durres.pl — apartament w Albanii
HTML · GSAP · Swiper
Strona własnej agencji web — pełen lejek od strategii po wdrożenie, cennik widełkowy, kalkulator brief.
BuildLab — strona własnej agencji
Next.js 14 · Tailwind · GSAP
Strona dla firmy outsourcingowej IT z kalkulatorem pakietu, formularzem audytu i blogiem eksperckim.
Second Life IT — outsourcing IT dla firm
Next.js 14 · Tailwind · GSAPTwój projekt może być następny
Masz pomysł? Zrealizujemy go.
Niezależnie czy potrzebujesz nowej strony, sklepu czy modernizacji — wyślij brief i porozmawiajmy.