Sklep wędkarski online
Sklep wędkarski na WooCommerce, zaprojektowany od zera w Figmie: katalog z filtrami po parametrach sprzętu, gotowe zestawy, ceny zgodne z dyrektywą Omnibus i zamówienie z Paczkomatem na jednej stronie. Sklep jest fikcyjny — strona i jej kod są prawdziwe.
- Klient
- wedkujemy.com — klient fikcyjny, projekt demonstracyjny webmotion
- Branża
- Sklep wędkarski online
- Czas trwania
- Październik 2026
- Zakres
- Design, Development, Maintenance, Security
- Zespół
- Jedna osoba — projekt w Figmie i wdrożenie w WordPressie
- Dostępna pod
- wedkujemy.webmotion.io
Co ten projekt musiał rozwiązać
Problem, jaki był, i decyzja, która go rozwiązała.
Sklep, który odpowiada jak wędkarz, a nie jak hurtownia
Wędkarz nie szuka „kołowrotka” — szuka kołowrotka 2500 do wędki 2,40 m na szczupaka. Sklep musiał filtrować po długości, ciężarze wyrzutu i liczbie składów, podpowiadać gotowe zestawy i prowadzić do zamówienia bez zakładania konta, a przy tym spełniać polskie wymogi: najniższą cenę z 30 dni przy promocji, fakturę na NIP i zwrot w 30 dni.
- Filtry po parametrach sprzętu, nie tylko po cenie i marce
- Ceny promocyjne zgodne z dyrektywą Omnibus
- Paczkomat, faktura i zgody w jednym formularzu zamówienia
WooCommerce pod spodem, własny sklep na wierzchu
Koszyk, zamówienia i stany zostają w WooCommerce, ale każdy widok — od kafla produktu po stronę podziękowania — to szablon Blade zbudowany z makiety. Funkcje, po które zwykle sięga się po wtyczki, czyli lista życzeń, powiadomienia o dostępności, przypomnienia o koszyku i prośby o opinię, są małymi serwisami w motywie.
- Lista życzeń, alerty dostępności i przypomnienia bez wtyczek
- Historia cen zapisywana przy każdej zmianie ceny
- Zestawy jako zwykłe produkty z listą elementów
Stack, na którym to zbudowaliśmy
Ten sam benchmark, od którego zaczyna się każdy projekt webmotion, plus WooCommerce i kilka elementów, których wymagał sklep.
- WordPress CMS i edytor blokowy
- WooCommerce Koszyk, zamówienia i stany magazynowe
- ACF Pro 15 autorskich bloków i pola produktów
- PHP 8.2+ Typowane serwisy sklepu
- Sage 11 Szkielet motywu od Roots
- Acorn 6 Kontener Laravela w WordPressie
- Blade Szablony WooCommerce przepisane z makiet
- Alpine.js Filtry, mini-koszyk i lista życzeń
- Tailwind CSS v4 Tokeny prosto ze zmiennych Figmy
- Lexend Hostowany lokalnie, z polskimi znakami
- Lenis Płynne przewijanie
- Swiper 11 Karuzele produktów i filmów
- Vite 6 Build assetów i HMR
- ddev / Docker Identyczne środowiska lokalne
- GitLab CI + Deployer Najpierw testy, potem wdrożenie
- LiteSpeed + LSCache Serwer produkcyjny i cache stron
Z czym to połączyliśmy
Każda karta mówi, co to za system, co robi w tym sklepie i w którą stronę płyną dane.
-
Dostawa
InPost
Wybór Paczkomatu na mapie prosto w formularzu zamówienia, obok kuriera InPost; wybrany punkt trafia do zamówienia i na stronę podziękowania.
Sklep ⇄ InPost -
Newsletter
MailerLite
Zapis do newslettera z bloku na stronie i zgoda zaznaczona przy zamówieniu trafiają przez API do wybranej grupy subskrybentów.
Sklep → MailerLite -
Wideo
TikTok
Filmy pokazane jako miniatury z przypiętym produktem; odtwarzacz TikToka ładuje się dopiero po kliknięciu i zgodzie na treści zewnętrzne.
TikTok → strona -
Omnibus
Historia cen (Omnibus)
Każda zmiana ceny dopisuje się do historii produktu, a przy promocji obok przekreślonej ceny pojawia się najniższa cena z 30 dni przed obniżką.
Cena → historia → karta produktu -
E-maile
Action Scheduler
Przypomnienia o porzuconym koszyku po 1 h i 24 h (tylko za zgodą), prośba o opinię po realizacji zamówienia i e-mail, gdy produkt wraca na stan.
Sklep → klient -
RODO
Zgody cookies
Baner z kategoriami — analityka, marketing, treści zewnętrzne — blokuje skrypty i osadzenia, dopóki odwiedzający się na nie nie zgodzi.
Odwiedzający → skrypty
Kolory i typografia, z którymi wychodzi
Paleta klienta zapisana jako tokeny — każda próbka poniżej to zmienna eksportowana przez motyw.
- Niebieski #2B5BD7 Przyciski, linki, aktywne filtry
- Atrament #0E1D24 Tekst i nagłówki
- Mgła #F5F7FB Tło strony
- Szaroniebieski #E9EEF7 Panele, sekcja zestawów
- Pomarańczowy #C2410C Promocje i rabaty
- Zielony #1E7A4C Status: w magazynie
- Regular 400
- Medium 500
- SemiBold 600
- Bold 700
- Szczupak już bierze
- 56 / 1.1 / −1.5
- Gotowe zestawy
- 40 / 1.15 / −1
- 249,00 zł
- 22 / 1.2 / 700
- Tekst główny w rozmiarze 16 na 1.6
- 16 / 1.6 / 400
- Dodaj do koszyka
- 16 / 1 / 500
- 8px Pola, małe przyciski
- 12px Karty produktów, panele
- 16px Hero, duże sekcje
- 999px Chipy kategorii, liczniki
Sam produkt
Zrzuty z działającego sklepu. Każdy kafelek otwiera się w pełnym rozmiarze.
Co faktycznie zbudowaliśmy
Sześć elementów, na których stoi sklep — tych, które kupujący widzą przy każdym zamówieniu.
-
01
Filtry po parametrach, nie tylko po cenie
Długość wędki, ciężar wyrzutu, liczba składów, marka, dostępność i promocja. Każdy filtr to parametr w adresie, więc wynik da się podlinkować, a strona listingu nadal korzysta z cache'u.
-
02
Ceny zgodne z dyrektywą Omnibus
Każda zmiana ceny trafia do historii produktu. Przy promocji sklep sam wylicza najniższą cenę z 30 dni przed obniżką i pokazuje ją pod ceną.
-
03
Termin dostawy liczony na żywo
„Zamów w ciągu 16 min — dostawa jutro” uwzględnia godzinę odcięcia, weekendy i polskie święta. Liczy go przeglądarka, więc działa także zza cache'u stron.
-
04
Zestawy i „kup taniej w zestawie”
Zestaw to zwykły produkt z listą elementów: ma własną cenę, stan i miejsce w koszyku, a na karcie produktu pokazuje, ile kupujący oszczędza.
-
05
Koszyk bez przeładowań
Mini-koszyk z licznikami ilości, koszyk aktualizowany w tle z powiadomieniami jako toasty i konfetti, kiedy zamówienie przekroczy próg darmowej dostawy.
-
06
Konto bez obowiązku
Zakupy bez rejestracji, a po zamówieniu konto jednym kliknięciem: historia zamówień, zwroty online, adresy i lista życzeń przeniesiona z ciasteczka.
Co to zmieniło
Zmierzone na działającej stronie, nie oszacowane — pod każdą liczbą jest źródło pomiaru.
Co obsługa sklepu może prowadzić bez otwierania kodu.
- Trzynaście widoków w Figmie, na desktop i mobile
- 15 bloków ACF i szablony WooCommerce w Blade
- Katalog z filtrami, karta produktu, koszyk i zamówienie
- Konto klienta ze zwrotami online i listą życzeń
- Poradnik z artykułami powiązanymi z produktami
- Testy Pest dla Omnibusa, NIP-u, zwrotów i filtrów
Masz projekt, który ma działać tak samo?
Prześlij brief albo umów rozmowę. Odpowiadamy zakresem i widełkami, nie szablonem.
