SerianGroup: sklep B2B, który rozumie po polsku i zna stan magazynu

12.10.20267 min czytaniaRealizacje

SerianGroup sprzedaje hodowcom i firmom DDD środki biobójcze Quimunsa oraz żeliwne poidła z częściami zamiennymi. Zbudowaliśmy im sklep B2B od zera: własny frontend w React, a pod spodem Shopify. Wyszukiwarka rozumie „muchami” i numer ze starego poidła, a kiedy towar się kończy, strona wie o tym bez niczyjej pomocy.

Punkt wyjścia: wyłączny dystrybutor bez sklepu

SerianGroup (otwiera się w nowej karcie) to wyłączny dystrybutor hiszpańskiej marki Quimunsa w Polsce: insektycydy, rodentycydy i preparaty dla hodowli. Obok tego firma rozwija własną linię żeliwnych poideł dla bydła i koni, z kompletem części zamiennych. Kupują hodowcy i firmy DDD, czyli ci, którzy zawodowo zwalczają owady i gryzonie.

Sprzedaż szła starym torem. Nie było porządnego katalogu ani możliwości zamówienia przez internet. Żeby coś kupić, trzeba było zadzwonić albo napisać, a potem czekać na odpowiedź.

Do tego asortyment, który nie wybacza skrótów. Środek na muchy ma numer pozwolenia na obrót i kartę charakterystyki, o którą zapyta każda firma DDD. Poidło ma zawór, pojemność miski i przyłącze wody. Część zamienna musi pasować do poidła, które hodowca już ma w oborze, a to często model innego producenta. Takiego katalogu nie da się wcisnąć w szablon sklepu i udawać, że działa.

Co zbudowaliśmy: React na wierzchu, Shopify pod spodem

Sklep jest headless, czyli rozdzielony na dwie warstwy. Wszystko, co widzi klient, napisaliśmy sami w React: stronę główną, katalog z filtrami, wyszukiwarkę, karty produktów, koszyk i obie wersje językowe. Każda strona wychodzi do przeglądarki jako gotowy HTML, prosto z szybkiego hostingu. Bez motywu, bez wtyczek, bez jednej linijki szablonu.

Wszystko, co dotyczy pieniędzy i towaru, robi Shopify. Koszyk od pierwszego kliknięcia „Dodaj do koszyka” jest koszykiem Shopify. Kasa, płatności, zamówienia, stany magazynowe i konta klientów też są w Shopify. Klient płaci pod adresem sklep.seriangroup.com, w kasie Shopify, tej samej, z której korzystają miliony sklepów. Obie warstwy rozmawiają przez Storefront API (otwiera się w nowej karcie), oficjalny interfejs Shopify do budowania własnych sklepów.

Strona główna SerianGroup: nagłówek „Poidła dla bydła i koni. Środki na owady i gryzonie.” na zdjęciu obory, przyciski „Poznaj ofertę” i „O firmie” — Strona główna seriangroup.com. Ani jednego elementu z szablonu Shopify. Zrzut ekranu z 30 września 2026, bez retuszu.

Jeden szczegół domyka sprawę. Shopify ma też własną witrynę sklepu, z adresami produktów i wyszukiwarką. U SerianGroup każdy taki adres przekierowuje na seriangroup.com: produkt na jego kartę, wyszukiwanie do katalogu. Koszyk, kasa i konto klienta zostają tam, gdzie mają być. Kto trafi na witrynę Shopify ze starego linku, i tak ląduje na stronie, którą zaprojektowaliśmy.

Stany magazynowe na żywo

To nasza ulubiona część tego projektu. Strona SerianGroup nie trzyma żadnej kopii cen ani stanów magazynowych. Każda karta produktu i każdy produkt na liście katalogu w chwili otwarcia pyta Shopify, ile towaru jest i po ile. Pyta znowu, gdy klient wraca do karty przeglądarki, i dostaje świeży stan przy każdej zmianie w koszyku. Cała strona katalogu pyta jednym zapytaniem, więc nie zwalnia.

Strona nie pamięta stanów magazynu. Za każdym razem pyta.

Efekt jest prosty. Ktoś w biurze SerianGroup ustawia w panelu Shopify stan produktu na zero. Następny klient, który otworzy jego kartę, zamiast „Dodaj do koszyka” widzi szary, zablokowany przycisk „Niedostępny”. Nikt nie przebudowuje strony, nikt nie dzwoni do agencji, nikt niczego nie przepisuje. Towar wraca na stan i przycisk wraca razem z nim. Cena zmieniona w panelu trafia na stronę tą samą drogą.

query Stock($ids: [ID!]!) @inContext(country: PL) {
  nodes(ids: $ids) {
    ... on ProductVariant {
      id availableForSale quantityAvailable currentlyNotInStock
      price { amount currencyCode }
    }
  }
}

Zapytanie, które karta produktu wysyła do Shopify przy każdym otwarciu. availableForSale decyduje o przycisku, quantityAvailable o tym, ile sztuk da się dodać.

Trzy zamki zamiast jednego

Klient nie ma jak zamówić czegoś, czego nie ma. Pilnują tego trzy miejsca naraz:

Karta produktu. Przy stanie zero przycisk zamienia się w „Niedostępny”, a licznik sztuk zatrzymuje się na tym, co leży w magazynie. Trzy sztuki na stanie to najwyżej trzy w koszyku.
Koszyk. Jeśli ostatnia sztuka zniknie, kiedy produkt czeka już w koszyku, pozycja dostaje dopisek „Niedostępny”, a przejście do kasy czeka, aż klient ją usunie.
Kasa. Na końcu pilnuje kasa Shopify, która liczy według tych samych stanów co strona.

Wyszukiwarka, która zna polską odmianę

Polski ma siedem przypadków, a klient nie wpisuje mianownika. Wpisuje „muchy”, „na muchy” albo „przeciw muchom”. Wyszukiwarka, która porównuje same litery, przy „muchami” nie znajdzie produktu opisanego słowem „muchy”.

Wyszukiwarka SerianGroup sprowadza każde słowo do rdzenia. „Mucha”, „muchy” i „muchami” to dla niej jedno słowo, tak samo „szczur” i „szczurów” albo „poidło” i „poideł”, gdzie po drodze znika ruchome „e”. Zna też słowa, którymi mówi hodowca, a nie katalog: „prusak” znajdzie środki na karaluchy, a „krowy” i „jałówka” prowadzą do produktów dla bydła. Działa w trakcie pisania: po trzech literach „kro” już wie, że chodzi o bydło. Wersja angielska ma własne reguły, więc „flies” znajdzie „fly”.

Co klient wpisuje i czego szuka wyszukiwarka SerianGroup
Klient wpisuje	Wyszukiwarka szuka
„mucha”, „muchy”, „muchami”	Jednego słowa: mucha
„trutka na muchy”	Trutki i much, bez „na”
„prusak”	Także karaluchów
„krowy”, „jałówka”	Produktów dla bydła
„kro”	Już teraz: krowa, czyli bydło
„PM-5R”	Części, które pasują do poidła PM-5R

Numer ze starego poidła

Hodowca nie zna numerów z katalogu SerianGroup. Zna numer swojego starego poidła.

Wyszukiwarka na seriangroup.com

„PM-5R”

PM-5R to model poidła innego producenta. Weźmy hodowcę, który ma takie w oborze i potrzebuje do niego zaworu. Dlatego wyszukiwarka czyta też wiersze „Pasuje do” i numery referencyjne z danych technicznych każdej części. Po wpisaniu „PM-5R” pokazuje części SerianGroup, które do tego poidła pasują, a przy każdym wyniku dopisek „Pasuje do: PM-5R”, żeby nikt nie musiał zgadywać, skąd się wziął. Dokładne dopasowania idą na górę listy.

A kiedy numer nie pasuje do niczego? Zapytanie z cyfrą wyszukiwarka traktuje jak numer modelu i zamiast pustej strony proponuje „Zapytaj o zamiennik”. Formularz otwiera się z tym numerem już wpisanym w wiadomość. Klient nie zostaje z niczym, a SerianGroup dostaje zapytanie, z którego od razu wiadomo, czego szukać.

44 produkty, sześć kategorii, dwa języki

Katalog ma 44 pozycje w sześciu kategoriach: poidła, części zamienne, insektycydy, rodentycydy, pielęgnacja zwierząt i repelenty. Filtry mówią językiem tego asortymentu: zwierzęta, rodzaj zaworu, wykonanie, zwalczany szkodnik, substancja czynna, postać preparatu. W obrębie jednej grupy filtry się sumują, między grupami zawężają wynik. Poidła mają na liście tabelę porównawczą, bo przy podobnych modelach różnica siedzi w szczegółach. Całość działa po polsku i po angielsku, każda wersja pod własnymi adresami.

Kategoria insektycydów Quimunsa w katalogu SerianGroup: filtry po marce, kategorii i zwalczanych szkodnikach, karty preparatów DIPTRON i BLATICIDA — Insektycydy Quimunsa w katalogu, z filtrami po marce, kategorii i szkodnikach. Zrzut ekranu z 30 września 2026, bez retuszu.

Na karcie produktu jest wszystko, o co klient B2B i tak by zapytał:

Dane techniczne. Przy poidłach to, co odróżnia jeden model od drugiego: zawór, pojemność miski, przyłącze wody, wykończenie. Przy częściach: do czego pasują i numery referencyjne.
Pozwolenia. Przy środkach biobójczych numer pozwolenia na obrót i numer UFI, widoczne na karcie, a nie schowane w PDF-ie.
Dokumenty. Karty charakterystyki (SDS) i karty techniczne do pobrania prosto z karty produktu.
Warianty opakowań. Jeden preparat, kilka pojemności, każda ze swoją ceną i własnym stanem w Shopify.
Zapytanie B2B. Kto chce wyceny hurtowej zamiast zakupu, pisze z tej samej strony. Formularz sam dopisuje produkt i wybrane opakowanie.

Dlaczego headless, a nie szablon

Bo SerianGroup potrzebował dwóch rzeczy naraz. Pierwsza to katalog ułożony pod ten konkretny asortyment: części dopasowane do cudzych poideł, pozwolenia i karty charakterystyki na wierzchu, wyszukiwarka po polsku, porównanie modeli. Szablon nie udźwignąłby tego bez stosu aplikacji, z których każda dokłada skrypt i spowalnia stronę. Druga to zaplecze, na którym bezpiecznie przyjmuje się pieniądze: kasa, płatności, zamówienia, magazyn. Tego nie opłaca się pisać od zera.

Headless daje jedno i drugie. Wygląd i szybkość są w naszych rękach, bo frontend to nasz kod. Pieniądze, zamówienia i stany obsługuje Shopify, który nie wymaga od nikogo utrzymywania serwera ani łatania sklepu.

Po stronie SerianGroup zostaje panel Shopify: zamówienia, klienci, stany magazynowe i statystyki sprzedaży, na komputerze i w aplikacji na telefon. Zespół nie uczy się systemu napisanego przez agencję, a do obsługi zamówienia nie potrzebuje nas. Stan wpisany w panelu rządzi stroną bez naszego udziału.

Klient widzi SerianGroup od pierwszego ekranu aż po koszyk. Shopify pokazuje się dopiero w kasie, czyli tam, gdzie znana i sprawdzona kasa działa na korzyść sklepu. Jak taka architektura wygląda krok po kroku, co daje i ile kosztuje, opisaliśmy w osobnym wpisie. Więcej ekranów SerianGroup pokazujemy na stronie głównej.