Back
Sklep headless Shopware + Next.js dla producenta produktów budowlanych
Cel projektu
Zbudować dla Domax sklep internetowy do sprzedaży bezpośredniej, od pierwszej analizy po szybką platformę headless dla klientów hurtowych i indywidualnych.
Zakres prac
Analiza
Projektowanie UX/UI
Development
Optymalizacja
Czas trwania
Styczeń-czerwiec 2026 (~6 miesięcy)
Stała współpraca
Technologie
Shopware 6
Next.js
Elasticsearch
Redis
Cloudflare
Klient
DMX System (Domax)
Domax chciał sprzedawać bezpośrednio we własnym sklepie
Domax produkuje złącza ciesielskie i akcesoria montażowe w Polsce od 1991 roku i dziś należy do największych producentów tego rodzaju w Europie. Jego klientów można podzielić na dwie grupy: wykonawców i stolarzy kupujących hurtowo oraz majsterkowiczów, którzy w weekend budują ogród czy dach. Marka chciała własnego sklepu B2C - DMX System - by sprzedawać bezpośrednio ze źródła, a nie wyłącznie przez dystrybutorów. Odpowiadaliśmy za cały proces: od analizy i UX/UI po development i optymalizację. Nadal rozwijamy i prowadzimy sklep razem z klientem jako partner projektowy i technologiczny.
Zaczęliśmy od określenia wymagań
Zanim zaczęliśmy development, zamknęliśmy analizę. Opisaliśmy logikę wyszukiwania potrzebną w sklepie i z góry ustaliliśmy zasady SEO, żeby nie trzeba było wracać do nich po wdrożeniu. Wymagania Shopware dotyczące koszyka połączyliśmy z własnym projektem zamiast podporządkowywać ścieżkę zakupową domyślnym ustawieniom platformy. Po naniesieniu uwag na makiety i zamknięciu otwartych tematów w Confluence luźny brief zamienił się w kompletną podstawę do developmentu.
Shopware 6 na backendzie, Next.js na frontendzie
Sklep uruchomiliśmy w trybie headless. Shopware 6 przechowuje logikę handlową i katalog, a frontend Next.js renderuje wszystko widoczne dla klientów. Obie warstwy komunikują się przez API obejmujące katalog, koszyk, konta klientów, zwroty, listy zakupów i pozostałe funkcje sklepu. W efekcie zbudowaliśmy dedykowaną bibliotekę komponentów dla DMX na bazie shadcn/ui, dopasowaną do sklepu. A obsługa wielu sklepów trafiła do projektu od początku, gotowa na sprzedaż na kolejne rynki i marki.
Katalog zaprojektowany z myślą o zakupach hurtowych
Przemysłowe łączniki mają rozbudowany, rozgałęziony katalog. Kotwy dzielą się na gruntowe, betonowe, śrubowe i kilka kolejnych poziomów. By wszystko dało się łatwo znaleźć, dodaliśmy Elasticsearch do wyszukiwarki wraz z warstwą rekomendacji wskazującą właściwy produkt podczas wpisywania. Dynamiczne filtry zawężają długie listingi w kilka sekund. Dla klientów hurtowych dodaliśmy rabaty ilościowe nagradzające większe zamówienia oraz zestawy produktów łączące powiązane artykuły pod osobnymi regułami cenowymi.
Listy zakupowe i ponowne zamówienia jednym kliknięciem dla stałych klientów
Klienci hurtowi rzadko przeglądają katalog dla przyjemności. Uzupełniają zapasy. Dlatego zbudowaliśmy własne listy zakupowe, które można tworzyć, edytować i udostępniać współpracownikom, a następnie przenieść do koszyka jednym ruchem. Poprzednie zamówienia również można powtórzyć za pomocą jednego kliknięcia. Panel konta zbiera dane fakturowe firmy, adresy, zamówienia i zwroty w jednym miejscu. Status zamówienia można sprawdzić nawet bez logowania.
Zmapowaliśmy Shopping Experience Shopware bezpośrednio na storefront Next.js
Shopping Experience Shopware to jego wizualny kreator stron, więc zmapowaliśmy każdy komponent CMS na komponenty Next.js. Układ złożony w Shopware renderuje się bezpośrednio na storefroncie bez żadnej dodatkowej pracy. Tam, gdzie platforma nie miała potrzebnego bloku, budowaliśmy własny, dodając niestandardowe komponenty dla layoutów stron specyficznych dla DMX.
Podłączyliśmy sklep do systemów, na których Domax już działa
Zamówienia trafiają bezpośrednio do BaseLinker, platformy obsługującej fulfillment. Faktury i korekty są stamtąd pobierane z powrotem do sklepu. Brevo obsługuje newsletter i maile transakcyjne, płatności przechodzą przez Tpay i PayU, a InPost Pay przyspiesza finalizowanie zakupu.
Każdy ekran, od listingu po checkout, pochodzi z jednego zestawu komponentów
Wykonawca zamawiający te same łączniki co tydzień potrzebuje szybkości i przejrzystości, a ktoś budujący pierwszy taras potrzebuje trochę więcej wsparcia. Zaprojektowaliśmy jeden storefront obsługujący obu, z cenami netto i brutto wyświetlanymi obok siebie dla firm i głębokim drzewem kategorii przejrzystym dla każdego odwiedzającego.
Jeden interfejs działający zarówno dla profesjonalnego kupca, jak i weekendowego majsterkowicza
Design system utrzymuje spójność marki w jasnym i ciemnym motywie. Każdy ekran, od listingu po checkout, pochodzi z tego samego zestawu komponentów - zmiana motywu nigdy nie oznacza przebudowy ścieżki zakupowej od podstaw.
Migracja katalogu producenta bez utraty pozycji w wyszukiwarkach
Producent z dziesięcioleciami historii ma kapitał SEO, którego nie może stracić przy migracji platformy, więc od początku projektowaliśmy z myślą o tym. Adresy URL zostały oddzielone od tytułów produktów i H1, co pozwala zespołowi dostrajać każdy z nich bez uszkadzania pozostałych. Wycofane produkty przekierowują automatycznie. Moduł ręcznych przekierowań obsługuje przypadki wymagające ludzkiej decyzji. Po zmianie slug produktu jego linki wewnętrzne aktualizują się same. Dane strukturalne, generowana mapa strony, kontrola adresów kanonicznych i selektywne wykluczanie z indeksowania zostały zaimplementowane, a ze względu na ogromny katalog produktów teksty ALT do obrazków są generowany automatycznie.
Utrzymaliśmy szybkość dzięki cache, który wie, kiedy się odświeżyć
Większość odwiedzających trafia na strony z cache, dlatego warstwę wydajności zaprojektowaliśmy wokół niego od początku. Strony są serwowane z Redis, a obrazy przychodzą z CDN Cloudflare i są skalowane w locie. Kluczowa była jednak rewalidacja cache. Zbudowaliśmy po stronie Shopware moduł, który informuje frontend Next.js dokładnie, kiedy dana strona wymaga odświeżenia. Elasticsearch utrzymuje szybkie wyszukiwanie w całym katalogu. Frontend działa jako samodzielny build produkcyjny. Efekt widać w Core Web Vitals, PageSpeed i czasie do pierwszego bajtu.
Narzędzia backoffice dla katalogu, który ciągle się zmienia
Ceny tysięcy SKU zmieniają się często, więc można je aktualizować hurtowo z przesłanego pliku zamiast ręcznie produkt po produkcie. Każda zmiana w katalogu jest logowana. Zespół może ręcznie zmieniać kolejność produktów w kategorii, hurtowo importować parametry produktów i zarządzać dodatkowymi polami niestandardowymi. Opinie i treści statyczne - w tym pola rich text - są tłumaczone na inne języki na żądanie, jednym przyciskiem. Zwroty i reklamacje mają własną ścieżkę, a maile o ponownej dostępności i zaproszenia do recenzji są wysyłane automatycznie.
Zbudowaliśmy to tak szybko częściowo dzięki AI, wykorzystując je tam, gdzie realnie oszczędzało czas
Sześć miesięcy to napięty termin dla tak dużego e-commerce, więc polegaliśmy na narzędziach AI wszędzie, gdzie realnie oszczędzały czas. W fazie projektowania zdejmowały z nas rutynową pracę, dzięki czemu zespół mógł poświęcać godziny na decyzje kształtujące sklep. Podczas developmentu przejmowały typowe mechanizmy, boilerplate'y i scaffolding - czyli zadania które wymagają więcej pisania niż myślenia - by programiści mogli skupić się na trudniejszej logice. AI najbardziej sprawdziło się na etap uzupełnienia treści: katalog to tysiące opisów produktów, parametrów i tłumaczeń. AI pomogło nam generować i przetwarzać tę ilość znacznie szybciej niż praca ręczna. Nic z tego nie zastąpiło ludzkiego osądu. Po prostu uprościło drogę, dzięki czemu napięty termin pozostał w zasięgu.
Wdrożenie
Wdrażaliśmy DMX System między styczniem a czerwcem 2026 roku. Po wdrożeniu produkcyjnym nie zwalniamy tempa i pozostajemy partnerem projektowym i technologicznym Domax, doskonaląc to, co jest, i rozwijając sklep wraz ze wzrostem biznesu. Architektura headless sprawia, że taki stały strumień pracy łatwo dowozić, ponieważ frontend i rdzeń handlowy mogą zmieniać się niezależnie.
Efekt
DMX System dał Domax własny kanał sprzedaży bezpośredniej i partnera, który nieprzerwanie go rozwija.
Zobacz na żywo
Porozmawiajmy o Twoim projekcie!
Opowiedz nam o swoim projekcie. Pomożemy zaplanować architekturę, zakres i realizację.
