United Bike — sklep wyłącznego dystrybutora
United Bike to sklep dystrybutora rowerów górskich marek United, Dominate i Patrol — od juniorskich MTB po karbonowe hardtaile XC i enduro z pełnym zawieszeniem. Klient potrzebował jednego miejsca, w którym rowerzysta porówna modele, sprawdzi specyfikację i geometrię ramy, wybierze rozmiar i kolor. Sklep działa po polsku i po angielsku.
Wyzwanie
Marka United Bike wchodziła na rynek europejski bez profesjonalnej platformy sprzedażowej — rowery były dostępne tylko przez dealerów, bez centralnego sklepu online.
Rozwiązanie
Zaprojektowałem i wdrożyłem sklep na WooCommerce z autorską kartą roweru: trzy wybory wariantu zsynchronizowane z magazynem, specyfikacja w polach z ikonami, tabela geometrii i pełna wersja angielska — łącznie z koszykiem, kasą i mailami zamówień.
Jak to robiliśmy
- 01
Karta roweru zamiast domyślnej karty WooCommerce
Rower to produkt z trzema wymiarami wyboru: kolor, rozmiar ramy i rozmiar koła. Zbudowałem własną kartę produktu, w której każdy z nich jest osobną grupą przycisków i próbników (także dwukolorowych), zsynchronizowaną z wariantami WooCommerce — cena i dostępność zmieniają się razem z wyborem. Koszyk, mini-koszyk i kasa dostały własne szablony, a komunikaty sklepu wyświetlają się jako dyskretne powiadomienia zamiast bloków nad treścią.
- 02
Specyfikacja i geometria, którymi da się zarządzać
Kupujący rower porównuje komponenty i wymiary ramy, więc specyfikacja nie mogła być wklejonym tekstem. Przygotowałem w panelu uporządkowane pola na specyfikację (grupy z ikonami) i osobną tabelę geometrii, które na karcie produktu lądują w zakładkach „Specyfikacja” i „Geometria”. Galeria dostała powiększenie po najechaniu, lightbox i przewijanie palcem na telefonie.
- 03
Dwa języki aż do maila z zamówieniem
Wersję angielską oparłem na Polylangu, ale na samych tłumaczeniach stron się nie skończyło. Na /en/ po angielsku są też koszyk, kasa i konto, nazwy atrybutów, metody płatności i wysyłki, archiwa marek, a mail z potwierdzeniem zamówienia idzie w języku, w którym klient je złożył.
- 04
SEO, analityka i testy
Dodałem dane strukturalne produktów, Open Graph i hreflang dla par PL/EN, a meta opis nigdy nie jest pusty i nie miesza języków. GA4 mierzy zdarzenia e-commerce: wyświetlenie produktu, dodanie do koszyka, rozpoczęcie zamówienia i zakup. Cały sklep sprawdza zestaw testów Playwright w szerokości komputera i telefonu.
Co wyróżnia ten projekt
Wybór koloru, rozmiaru ramy i koła
Trzy grupy przycisków w miejsce rozwijanych list WooCommerce — rowerzysta od razu widzi, które warianty są dostępne.
Zakładka Geometria
Reach, stack, długość rury górnej i podsiodłowej w czytelnej tabeli — dane, po które doświadczony rowerzysta i tak by sięgnął, są na karcie produktu.
Specyfikacja w porządku, nie w akapicie
Rama, amortyzator, widelec, napęd, koła — każda pozycja w osobnym polu w panelu, więc nowy model dodaje się bez formatowania tekstu.
Pełna wersja angielska
Przełącznik PL/EN w górnym pasku prowadzi do angielskiej wersji całej ścieżki zakupu, łącznie z mailem potwierdzającym zamówienie.
Widoki i elementy
Marka ma profesjonalny sklep w dwóch językach, w którym klient sam porówna modele po specyfikacji i geometrii, zanim zapyta o dostępność lub dealera.
Zacznijmy Twój projekt.
Opisz w kilku zdaniach, czego potrzebujesz — odezwę się z konkretnymi pytaniami i propozycją kolejnych kroków. Bez zobowiązań.