Wonder Theme to nasz autorski motyw na Shopify, dostępny w oficjalnym Shopify Theme Store. Ma 5 presetów dla różnych branż - beauty, fashion, wellness, home decor i one-product DTC. Ale to nie jest artykuł o featurach. To jest artykuł o tym, dlaczego zdecydowaliśmy się zbudować własny theme, jak nam poszło z code review w Shopify (spoiler: nie za pierwszym razem) i co to zmieniło dla naszych klientów.
Kiedy zaczynaliśmy pracować na Shopify, rynek był jeszcze dosyć młody. Liczba dostępnych themes była ograniczona, a te, które były - po prostu nas nie satysfakcjonowały. Brakowało w nich konkretnych sekcji, których potrzebowali nasi klienci. Brakowało elastyczności w customizacji. Brakowało feature'ów branżowych - czegoś, co byłoby naturalne dla marki beauty, ale niepotrzebne dla marki meblowej.
Po latach pracy nad sklepami klientów zauważyliśmy powtarzający się wzorzec. Zaczynaliśmy projekt od jakiegoś dostępnego theme'a. Klient miał konkretne potrzeby: chciał Before/After slider w karcie produktu (bo sprzedaje skincare), albo Image Hotspots na zdjęciach pokoi (bo sprzedaje meble), albo subscription widget z elastycznymi cyklami (bo sprzedaje suplementy). Theme tego nie obsługiwał. Wchodziliśmy w kod. Modyfikowaliśmy. Łamaliśmy update path. Klient zostawał z theme'em, którego nie mógł już zaktualizować bez utraty wszystkich customizacji.
Powtórz to przy 30 sklepach. Potem przy 50. W którymś momencie pomyśleliśmy: zamiast za każdym razem hackować cudzy kod, może by tak napisać własny od zera, dokładnie tak, żeby obsługiwał te wszystkie use cases natywnie?
To była pierwsza iskra. Druga była bardziej praktyczna.
Większość premium themes na rynku ma jeden wspólny problem: są przeładowane. Dodają funkcjonalność za funkcjonalnością, każda kolejna wersja waży więcej, każdy update dorzuca kolejny skrypt JavaScript, kolejny CSS, kolejną zewnętrzną zależność.
Konsekwencja? LCP (Largest Contentful Paint) na poziomie 3-4 sekund zamiast 1.5s. INP wystrzeliwujące powyżej 300ms przy każdej interakcji. Mobile PageSpeed score w okolicach 30-40.
Dla klienta to nie jest abstrakcja. Każda dodatkowa sekunda load time'u to średnio 7% mniej konwersji. Przeliczenie jest bezlitosne - sklep robiący 500k EUR rocznie traci ~70k EUR przychodu rocznie tylko dlatego, że jego theme jest źle napisany.
Wiedzieliśmy, że jeśli mamy budować coś własnego, musimy zacząć od fundamentów. Natywne lazy loading. Krytyczny CSS inline. Deferred JavaScript. Native image formats. Każda decyzja architektoniczna podporządkowana CWV od pierwszej linii kodu - nie dorzucana po fakcie jako optymalizacja.
Etap pierwszy: research
Przejrzeliśmy wszystkie nasze projekty z ostatnich lat i zrobiliśmy listę funkcjonalności, których klienci potrzebowali, ale których standardowe theme'y nie miały albo miały w słabej formie. Lista wyszła długa. Niektóre rzeczy były uniwersalne - slide-out cart, sticky cart, mega menu, color swatches. Inne były wybitnie branżowe - Before/After dla beauty, Image Hotspots dla home decor, FAQ na PDP dla suplementów.
Etap drugi: jeden theme Shopify, 5 presetów
Czy budujemy jeden theme, który robi wszystko (i jest przez to średni dla każdego)? Czy 5 osobnych theme'ów (i utrzymujemy 5 produktów)?
Wybraliśmy trzecią drogę: jeden theme, 5 presetów. Ten sam fundament technologiczny - performance, struktura, sekcje. Pięć różnych konfiguracji wizualnych i funkcjonalnych pod konkretne branże. Klient wybiera preset, dostaje od razu sklep dopasowany do swojej branży, bez kompromisu. My utrzymujemy jeden codebase. Win-win.
Etap trzeci: design Wonder Theme oparty na Baymard
Każda sekcja, każdy komponent, każdy state - projektowane zgodnie z wytycznymi Baymard Institute. To nie jest marketing speak. Martyna Kosowska, nasza Head of Design, ma indywidualny certyfikat Baymard zobacz certyfikat - to znaczy, że zna 650+ wytycznych dotyczących e-commerce UX i potrafi je zaaplikować w design systemie.
Etap czwarty: podejście do developmentu Wonder Theme
Liquid, minimum zewnętrznych zależności. Każdy section niezależny, lazy-loadowany. Każdy obrazek serwowany w nowoczesnym formacie. Testy performance po każdym commiсie.
Shopify Theme Store ma jeden z najsurowszych procesów review na rynku. Każdy theme zgłaszany do oficjalnego sklepu przechodzi rygorystyczny code review prowadzony przez zespół Shopify. Sprawdzają wszystko - accessibility, performance, jakość kodu, UX, edge cases, mobile, dokumentację. Jeśli coś jest nie tak, dostajesz listę uwag i wracasz do pracy.
Nie przeszliśmy za pierwszym razem - i to jest jedna z najlepszych rzeczy, jakie nas spotkały.
Dostaliśmy szczegółowy feedback od ludzi, którzy patrzyli na setki theme'ów i wiedzą dokładnie, czego nie widzą inne zespoły. Część uwag była techniczna - drobne kwestie performance, accessibility na konkretnych komponentach. Część była strategiczna - sugestie, jak lepiej obsłużyć konkretne edge cases.
Wzięliśmy każdą uwagę, wróciliśmy do kodu, przepisaliśmy fragmenty, dopracowaliśmy. Kolejna iteracja. Code review……. Zatwierdzone!
Dlaczego o tym piszemy? Bo to jest jedna z rzeczy, które odróżniają zatwierdzony theme w Shopify Theme Store od dowolnego theme'a sprzedawanego na zewnętrznych marketplace'ach. Tam możesz wrzucić cokolwiek. Tu Twój kod jest sprawdzany przez ludzi, którzy znają platformę lepiej niż ktokolwiek inny. To filtr jakości, którego nie da się obejść - i w naszym przypadku zrobił z dobrego theme'a lepszy theme.
Trzy konkretne rzeczy.
Przed Wonder Theme typowy projekt nowego sklepu to było 12-16 tygodni. Z Wonder Theme jako fundamentem - 6-8 tygodni. Dlatego, że nie zaczynamy od zera. Klient wybiera preset dopasowany do branży, dostosowujemy go do brandbooka, podłączamy integracje i zostaje czas na to, co naprawdę dodaje wartość: mikro-optymalizacje UX, customowe sekcje, integracje pod konkretny biznes.
Bo znamy każdą linię kodu. Bo sami ją napisaliśmy. Klient mówi "chcę żeby na karcie produktu pojawił się dodatkowy moduł z opiniami z Trustpilota tylko dla wybranych produktów, z customową logiką wyświetlania na mobile" - to jest godzina pracy, nie tydzień analizy theme'a, którego nie znamy.
Większość naszych sklepów osiąga 90+ score w PageSpeed na desktopie i 70+ na mobile. To jest baseline, nie cel. Klient nie musi się martwić o CWV, nie musi optymalizować obrazków po fakcie, nie musi dopłacać za audyty performance - to jest wbudowane w produkt.
Presety Wonder Theme - przegląd Shopify Theme Store
Każdy preset ma własny artykuł na blogu (z deep dive dla branży), ale dla porządku - co dziś jest w Shopify Theme Store:
Wszystkie 5 presetów ma wspólne komponenty premium: Shoppable Video, mobile-first design, EU translations (EN/FR/IT/DE/ES), slide-out cart, sticky cart, color swatches, mega menu, product badges. Cena licencji: $390 jednorazowo w Shopify Theme Store.
Wonder Theme to żywy produkt. Co kilka tygodni publikujemy update - nowe sekcje, optymalizacje performance, ulepszenia accessibility, nowe presety w planach. Każdy klient, który kupił licencję, dostaje wszystkie kolejne wersje za darmo.
Mamy też road map oparty na feedbacku od użytkowników. Jeśli kupisz Wonder Theme i zauważysz coś, czego brakuje - daj znać. Realnie wbudowujemy to w kolejne wersje, bo dla nas Wonder to nie jest projekt zamknięty. To jest fundament, na którym budujemy każdy sklep w Nethype.
Zobacz Wonder Theme w Shopify Theme Store
Najszybszy sposób, żeby zrozumieć co Wonder Theme potrafi, to po prostu go zobaczyć. Wszystkie 5 presetów ma demo na Shopify Theme Store, gdzie możesz przeklikać każdą sekcję, sprawdzić mobile layout, przetestować Shoppable Video.
Sprawdź Wonder Theme w Shopify Theme Store → https://themes.shopify.com/themes/wonder
Współpracuj z nami na Wonder Theme (bezpłatna konsultacja)
Jeśli interesuje Cię wdrożenie sklepu z Wonder Theme jako fundamentem (z dostosowaniem pod Twój brandbook, integracjami, migracją z innej platformy) - zapraszamy na bezpłatną konsultację i wycenę. Napisz na info@nethype.co. Pierwsze 60 minut to rozmowa o Twoim biznesie, bez zobowiązań, bez sales pitchu. Po rozmowie dostaniesz konkretną wycenę z timeline'em. Zwykle odpowiadamy w ciągu 24h.
Tak. Wonder Theme jest dostępny w oficjalnym Shopify Theme Store, co oznacza że przeszedł rygorystyczny proces code review prowadzony przez zespół Shopify - sprawdzający kod, performance, accessibility, UX i mobile usability.
Oczywiście. Wonder Theme to pełnoprawny premium theme dostępny za $390 jednorazową licencję. Dostajesz dokumentację, support techniczny dotyczący samego motywu i wszystkie kolejne update'y.
Dawn to punkt startowy dla małych sklepów - darmowy, ale z minimalną liczbą sekcji i bez branżowych funkcjonalności. Wonder Theme ma 5 presetów dopasowanych do konkretnych branż (beauty, fashion, wellness, home decor, one-product), Shoppable Video, Before/After slider, Image Hotspots, Shop the Look i kilkanaście innych premium sekcji, których w Dawn nie znajdziesz.
Co kilka tygodni publikujemy nową wersję. Każdy klient z licencją dostaje wszystkie kolejne wersje za darmo, na zawsze.
Tak. Wonder Theme jest w pełni kompatybilny z Shopify Plus - obsługuje wszystkie funkcjonalności Plus, włącznie z Shopify Markets, Shopify Functions, B2B i custom checkout extensions.
Tak. W Shopify Theme Store każdy preset ma pełne demo - możesz przeklikać każdą sekcję, sprawdzić mobile layout, przetestować Shoppable Video. Shopify oferuje też 24-godzinny okres próbny po zakupie, w którym możesz zwrócić licencję.
