Case study
SŁÓJ - sklep demo na WooCommerce
Kompletny sklep meblowy na autorskim motywie - bez page buildera i gotowych szablonów. Od karty produktu z wariantami po ostylowany checkout z testowymi płatnościami.
Zakres prac
Co powstało w tym projekcie
- Autorski motyw WooCommerce pisany od zera: własny SCSS, zero page builderów i bibliotek CSS
- Marka SŁÓJ od podstaw: nazwa, identyfikacja, ciepła paleta i serifowa typografia
- Karta produktu z wariantami wymiarów, galerią z lightboxem, omnibusem i sekcjami zaufania
- Koszyk i checkout w pełni ostylowane, z AJAX-owymi ilościami, kuponem rabatowym i testowymi bramkami płatności (BLIK, P24, karta)
- Filtry kategorii pokazujące tylko dostępne opcje, popup po dodaniu do koszyka z upsellami
- Blog z karuzelami produktów, FAQ per kategoria i strony informacyjne
- Responsywność od 320 px w górę - mobilne menu, slider galerii, drawer filtrów
Decyzje projektowe
Dlaczego wygląda i działa tak, a nie inaczej
Motyw od zera zamiast szablonu
Gotowe motywy WooCommerce wiozą ze sobą megabajty nieużywanego kodu i wszystkie wyglądają podobnie. Autorski motyw ładuje tylko to, co widać - stąd setka w Lighthouse bez sztuczek.
Pełny lejek, nie wydmuszka
W wielu demo klikanie kończy się na koszyku. Tutaj można przejść całe zamówienie z wyborem kuriera i płatności, a zamówienie ląduje w panelu - bo tak testuje się prawdziwy sklep.
Detale, które sprzedają meble
Warianty wymiarów jak w konfiguratorze, najniższa cena z 30 dni przy promocjach, sekcje pielęgnacji drewna i FAQ pod każdą kategorią. Klient sklepu meblowego kupuje zaufanie, nie zdjęcie.
Backend gotowy na headless
Ten sam WordPress obsługuje równolegle drugi, headlessowy frontend FORM&. Sklep na klasycznym motywie może dorosnąć do headless bez migracji danych - to demo tego dowodzi.
Pod lupą
Najważniejsze ekrany, punkt po punkcie
Karta produktu
Karta zaprojektowana pod meble: wymiary, omnibus i argumenty zaufania w zasięgu wzroku od ceny.
-
1
Warianty wymiarów
Przyciski zamiast rozwijanej listy: wybór 140-180 cm od razu zmienia cenę i dostępność - jak w konfiguratorze, bez zbędnych kliknięć.
-
2
Omnibus przy promocji
Najniższa cena z 30 dni stoi tuż przy przekreślonej cenie - zgodność z dyrektywą podana naturalnie, nie jako prawniczy przypis.
-
3
Sekcje zaufania
Dostawa z wniesieniem, 100 dni na zwrot, 10 lat gwarancji. Meble kupuje się nerwami, więc odpowiedzi na obiekcje są przy przycisku zakupu.
Koszyk
Ostylowany od zera koszyk WooCommerce - wygląda autorsko, a pod spodem działa na natywnych mechanizmach.
-
1
Ilości bez przeładowania
Zmiana ilości i usuwanie pozycji działają AJAX-owo - koszyk przelicza się w miejscu, bez skakania strony.
-
2
Kupon z pełnym flow
Testowy kod SLOJ15 nalicza -15% i pokazuje rabat w podsumowaniu - to działający mechanizm rabatowy, nie atrapa.
-
3
Podsumowanie zawsze pod ręką
Suma i przycisk kasy trzymają się ekranu przy dłuższej liście produktów - najkrótsza droga do checkoutu.
Wydajność
Zmierzone, nie obiecane
Pomiar Lighthouse na produkcji (strona główna, desktop). Kategorię SEO pomijamy celowo - sklep demo jest wyłączony z indeksowania.
- Wydajność
- 100
- Dostępność
- 95
- Praktyki
- 100
Stack
Technologie
Chcesz taki sklep dla swojej marki?
Napisz, co sprzedajesz i czego potrzebujesz. Wycena wraca do ciebie w 24 godziny, bez zobowiązań.