--- title: "Projektowanie sklepów internetowych" url: "https://wzor.biz/uslugi/e-commerce/" description: "Projektujemy sklepy B2C, B2B i marketplace'y - od ścieżki zakupowej i architektury katalogu po kartę produktu, checkout, migrację platformy i wdrożenie." lang: "pl" --- # Projektowanie sklepów internetowych [Bezpłatna konsultacja](https://wzor.biz/bezplatna-konsultacja/) [Projekty](https://wzor.biz/projekty/) Sklep to kilkadziesiąt widoków i kilkaset stanów, a nie trzy kadry ze strony głównej. Projektujemy go od ścieżki zakupowej - audyt lejka, architektura katalogu, karta produktu i checkout w komplecie stanów, potem reszta widoków z jednej biblioteki komponentów. Wdrożenie bierzemy na siebie albo oddajemy projekt w formacie, z którego Wasi developerzy pracują bez dopytywania. Pracowaliśmy dla najlepszych firm i startupów Wyzwania ## Kiedy sklep wymaga przeprojektowania Nie każdy spadek sprzedaży jest problemem projektu. Poniżej cztery sytuacje, w których jest - i w których przebudowa zwraca się szybciej niż rok. - „Migracja, która nie może zabić sprzedaży” Magento, Shopware, Shopify, własny silnik - zmiana platformy to moment, w którym najłatwiej stracić widoczność w wyszukiwarce i przyzwyczajenia stałych klientów. Projektujemy tak, żeby migracja naprawiła ścieżkę, a nie tylko przeniosła stare problemy na nowy silnik. - „Porzucenia w checkoucie” Ruch jest, karty produktów się oglądają, a zamówienie nie dochodzi do końca. Odpowiada za to zwykle liczba pól, koszt dostawy pokazany za późno i wymuszona rejestracja - nie kolor przycisku. To widać dopiero w danych i w nagraniach sesji. - „Katalog, w którym nikt nic nie znajduje” Kategorie dokładane przy każdej nowej dostawie, filtry odpowiadające strukturze magazynu zamiast sposobowi, w jaki klient myśli o produkcie, i wyszukiwarka, która nie znajduje własnego asortymentu. Porządkujemy katalog, zanim cokolwiek narysujemy. - „B2B na silniku zbudowanym pod detal” Cenniki indywidualne, limity kupieckie, szybkie zamawianie z listy, powtarzalne koszyki i zamówienia w imieniu klienta. Zakupowiec ma inne zadanie niż konsument, choć bywa obsługiwany tym samym sklepem. Dla kogo ## Dla kogo projektujemy sklepy - ### Marki sprzedające obok marketplace'ów Allegro i Amazon dowożą wolumen, ale marża oraz dane o kliencie zostają po ich stronie. Własny sklep ma odebrać część tego ruchu i utrzymać go przy sobie. - ### Dystrybutorzy i hurtownie Zamówienia stałych kontrahentów przychodzą mailem, telefonem i arkuszem, a obsługa przepisuje je ręcznie do ERP. Sklep jest tu narzędziem pracy dla kupujących i dla działu handlowego naraz. - ### Producenci wchodzący w sprzedaż bezpośrednią Asortyment znają na wylot, ale pierwszy raz obsługują końcowego klienta i robią to obok istniejącej sieci dystrybucji. Projekt rozstrzyga, jak cennik detaliczny sąsiaduje z partnerskim i w którym miejscu klient trafia do dystrybutora. - ### Marketplace'y i sklepy wielosprzedawcowe Interfejs obsługuje dwie strony naraz - kupującego oraz sprzedawcę, który wystawia, wysyła i rozlicza. Panel sprzedawcy decyduje o podaży, więc projektuje się go z taką samą uwagą jak witrynę. ![Wydruki czterech układów interfejsu na stole: pulpit, ekran telefonu, formularz i tabela, jeden blok zakreślony markerem](https://wzor.biz/_astro/dla-kogo-wydruki-ekranow.GsgQefUA_1bzGfa.webp) Nasza różnica ## Co wyróżnia nasz projekt sklepu - ### Makiety na Waszym realnym asortymencie Do projektu wchodzą nazwy, zdjęcia i warianty z Waszego katalogu, razem z produktem bez opisu i tym o dwudziestu rozmiarach. Układ, który wytrzyma takie dane w makiecie, wytrzyma je też po migracji. - ### Widok osoby, która prowadzi sklep Każdy szablon dostaje wariant pusty i przepełniony - kategoria bez banera, lista z jednym produktem, promocja bez grafiki. Zespół prowadzący sklep wie z góry, co stanie się z układem, zanim cokolwiek opublikuje. - ### Dostępność liczona od pierwszej makiety Kontrast, obsługę klawiaturą i komunikaty błędów w checkoucie projektujemy zgodnie z WCAG 2.2 AA, bo od czerwca 2025 wymagania Europejskiego Aktu o Dostępności obejmują także handel elektroniczny. Dopisywanie tego po wdrożeniu kosztuje wielokrotnie więcej. - ### Ścieżkę sprawdzamy z kupującymi z Waszej kategorii Przed wdrożeniem prowadzimy sesje na działającym prototypie z osobami, które realnie kupują takie produkty. Spór o układ filtrów rozstrzyga wtedy nagranie sesji, a nie najgłośniejszy głos na spotkaniu. Proces ## Jak to prowadzimy 1. Tydzień 1–2 ### Audyt ścieżki zakupowej Przegląd danych z analityki i nagrań sesji, lejek od wejścia do zamówienia, analiza sklepów konkurencyjnych w Waszej kategorii. Wychodzimy z listą miejsc, w których tracicie zamówienia, uszeregowaną wpływem na sprzedaż. 2. Tydzień 2–4 ### Architektura katalogu i wyszukiwania Kategorie, atrybuty, filtry i wyniki wyszukiwania - zaprojektowane pod to, jak klient szuka produktu. To najtańszy moment na tę decyzję i najdroższy na jej pominięcie. 3. Tydzień 3–6 ### Karta produktu i checkout Dwa widoki, które decydują o sprzedaży, więc projektujemy je pierwsze i w pełnym zestawie stanów - warianty, brak dostępności, dostawa, płatność, błędy walidacji. 4. Tydzień 5–9 ### System i pozostałe widoki Biblioteka komponentów, a z niej reszta sklepu: konto, zamówienia, zwroty, listy, strony treściowe. Tu wychodzi, ile widoków sklep naprawdę ma. 5. Tydzień 9–12 ### Wdrożenie i pomiar sprzedaży Wdrożenie u nas albo hand-off do Waszych developerów, wpięcie zdarzeń e-commerce i przegląd lejka po pierwszym miesiącu sprzedaży. Zakres ## Co dostajecie na koniec - ### Mapa ścieżki zakupowej Lejek od wejścia do zamówienia z zaznaczonymi miejscami, w których klienci odpadają. Dokument, do którego wracacie przy każdej kolejnej zmianie w sklepie. - ### Architektura katalogu Drzewo kategorii, atrybuty i filtry oraz zasady dokładania nowego asortymentu - żeby struktura nie rozsypała się po roku dostaw. - ### Karta produktu i checkout w pełni stanów Warianty, brak dostępności, progi darmowej dostawy, płatności, błędy walidacji, zakupy bez rejestracji. To te stany decydują o zamówieniu. - ### Komplet widoków sklepu Konto, zamówienia, zwroty i reklamacje, listy, strony treściowe, wyniki wyszukiwania. Wszystkie, nie trzy najładniejsze. - ### Biblioteka komponentów Komponenty z wariantami, stanami i tokenami. To ona decyduje, czy kampanię sezonową złożycie sami w jeden dzień, czy znów zamówicie projekt. - ### Wytyczne migracji i pomiaru Mapowanie starych adresów, plan przeniesienia treści i konfiguracja zdarzeń e-commerce - żeby po starcie widzieć sprzedaż w podziale na ścieżki, a nie jedną liczbę. Warsztat ## Co stosujemy Sklep sprawdza się w stanach, których nie widać na prezentacji - brak dostępności, odrzucona płatność, produkt bez zdjęcia. Poniżej progi i wytyczne, od których zaczynamy, zanim ktokolwiek zapyta o kolor przycisku. ![Blat warsztatowy z góry: dwa wydruki układu interfejsu, lupa powiększająca jeden blok, stalowa linijka i wzornik szarości od bieli do czerni, jedna linia podkreślona pomarańczowym markerem](https://wzor.biz/_astro/warsztat-lupa-linijka-skala-szarosci.C5DINzRJ_Z2n7L7C.webp) - WCAG 2.2 AA w całej ścieżce zakupowej - Europejski Akt o Dostępności w zakresie handlu elektronicznego - Core Web Vitals - LCP poniżej 2,5 s na karcie produktu i w checkoucie - Wytyczne Baymard Institute dla katalogu, karty produktu i checkoutu - Zakup bez zakładania konta jako ustawienie domyślne - Zdarzenia e-commerce w GA4, od karty produktu po zwrot - Dane strukturalne schema.org - Product, Offer, AggregateRating - Figma z biblioteką komponentów i kompletem wariantów stanów Następny krok ## Porozmawiajmy o Waszym projekcie Powiedzcie, co macie do zrobienia. Wracamy z zakresem i wyceną. [Bezpłatna konsultacja](https://wzor.biz/bezplatna-konsultacja/) [Projekty](https://wzor.biz/projekty/) Realizacje ## Sklepy, które zaprojektowaliśmy Wybór z realizacji oznaczonych tym typem produktu. Pełne portfolio, razem z pracami pod NDA, pokazujemy na konsultacji. - [ ![WygodnaDieta - telefon z ekranem głównym aplikacji: ocena „Doskonała" na Trustpilocie i karta diety „Dieta z Wyborem Menu" z ceną od 80,90 zł/dzień, na tle czerwonego gradientu z warzywami.](https://wzor.biz/_astro/cover.BfmwIntu_1CFKMk.webp) WygodnaDieta - Aplikacja i sklep internetowy diety pudełkowej ](https://wzor.biz/projekty/wygodna-dieta/) - [ ![Lestore - sklep internetowy na makietach laptopa i telefonu: karta produktu „Roleta Rzymska Luna 42" z galerią zdjęć i ceną 49,99 zł.](https://wzor.biz/_astro/cover.ryV4Hb0o_dAA0z.webp) Lestore - Sklep internetowy z roletami i żaluzjami ](https://wzor.biz/projekty/le-store/) - [ ![SPEC Food - dwa telefony z otwartym sklepem Delikatesy SPEC: strona główna z promocjami oraz koszyk z produktami, na granatowym tle.](https://wzor.biz/_astro/cover.CbodJcEt_ZIHzVj.webp) SPEC Food - Sklep internetowy delikatesów spożywczych ](https://wzor.biz/projekty/spec-food/) - [ ![Kafezzo - strona główna sklepu na laptopie: hero „Rzemieślnicza palarnia kawy Roastains" i pasek wyjątkowych okazji, obok ceramiczny kubek na kamiennym blacie.](https://wzor.biz/_astro/cover.CCfgxWVu_Z1myuka.webp) Kafezzo - Sklep internetowy z kawą i herbatą ](https://wzor.biz/projekty/kafezzo/) - [ ![Tip Card - dwa telefony: panel klienta („Cześć Barbara", przychody 350 PLN, wypłata) oraz landing „Zwiększ swoje napiwki dzięki Tip Card!" ze spersonalizowanymi kartami QR, na kolorowym gradientowym tle.](https://wzor.biz/_astro/cover.DTw-Pu6y_4lOMF.webp) Tip Card - Platforma napiwków bezgotówkowych ](https://wzor.biz/projekty/tip-card/) - [ ![Bosfor Charter - tablet z otwartą platformą czarteru jachtów: zdjęcie pary na jachcie i wyszukiwarka (liczba tygodni, daty, typ jachtu, „Szukaj"), na tle morza.](https://wzor.biz/_astro/cover.DHPu_e5c_Zgsk30.webp) Bosfor Charter - Platforma wynajmu i czarteru jachtów ](https://wzor.biz/projekty/bosfor-charter/) - [ ![ZhongZhou - krem ZZ na makiecie laptopa na tle liści eukaliptusa i czarnych kamieni: karta produktu „Zhong Zhou (ZZ) Cream" z ceną 35 GBP i przyciskiem „Buy Now".](https://wzor.biz/_astro/cover.hrxdbzXI_ApPxK.webp) ZhongZhou - Sklep internetowy kremu na trądzik, demodekozę i różowiec ](https://wzor.biz/projekty/zhongzhou/) - [ ![Habitalux - strona główna sklepu z karmami: zielony pasek z ikonami kategorii, hero ze zdjęciem psa z piłką i hasłem „Sklep z karmami o jakości Ultra Premium", listing „Top karmy" oraz wyodrębniona karta produktu z ceną i przyciskiem „Dodaj do koszyka".](https://wzor.biz/_astro/cover.DAi0izKn_1lsw6s.webp) Habitalux - Sklep internetowy i marka karmy dla zwierząt ](https://wzor.biz/projekty/habitalux/) - [ ![MitoRevita - flat-lay brandingu i sklepu: broszura „Zdrowie od podstaw", opakowania suplementów liposomalnych (Genisteina, Kwercetyna, Koenzym Q10), telefon z widokiem sklepu i wizytówki.](https://wzor.biz/_astro/cover.67AuFRuv_APLj3.webp) MitoRevita - Branding i sklep suplementów liposomalnych ](https://wzor.biz/projekty/mitorevita/) [Projekty](https://wzor.biz/projekty/) Efekty ## Czym możecie to sprawdzić - 2 miesiące tyle trwała modernizacja sklepu CWZN - 72 widoki, w trzyosobowym zespole - 2025 rok, w którym wymogi Europejskiego Aktu o Dostępności objęły handel elektroniczny - checkout projektujemy w WCAG 2.2 AA od pierwszej makiety, nie po wdrożeniu - 101 projektów w publicznym portfolio na tej stronie - obejrzycie naszą robotę, zanim do nas napiszecie - 9+ lat tyle pracujemy w stałym, zdalnym składzie - sklep prowadzą te same osoby od audytu do wdrożenia Liczby pochodzą z case study CWZN i z naszego portfolio - jedno i drugie jest publiczne, więc każdą z nich sprawdzicie przed rozmową. Progi dostępności bierzemy z WCAG 2.2 i z Europejskiego Aktu o Dostępności. Nie podajemy średnich wzrostów sprzedaży ani ROI - zależą od bazy, ruchu i asortymentu, więc wyniki konkretnych wdrożeń omawiamy imiennie na konsultacji, część jest objęta NDA. Opinie klientów ## Co mówią nasi klienci - > „Praca z zespołem Wzór była naprawdę świetnym doświadczeniem! Zawsze szybko odpowiadali na nasze pytania i elastycznie podchodzili do naszych uwag. Mają mnóstwo kreatywnych pomysłów, a jednocześnie są bardzo rzetelni i terminowi. Efekt końcowy w pełni spełnił nasze oczekiwania, zdecydowanie polecamy każdemu, kto szuka profesjonalistów z pasją.” ![](https://wzor.biz/_astro/opinia.BrbzyDCf_1rSYiY.webp)Maja Wieloch-Silecka Dyrektor operacyjny, Bosfor Group - > „Nasi Klienci oczekują od nas szybkiego, skutecznego działania w bardzo szerokim zakresie. Od stworzenia brandu, przez budowę strony internetowej wraz ze sklepem po przeprowadzenie skutecznej kampanii sprzedażowej. Temat niełatwy, ale do zrobienia jeśli ma się zgrany zespół i firmy, z którymi wyzwania bierze się z marszu. Dla nas jakość, odpowiedzialność i zaangażowanie są kluczowe, a współpraca z Agencją UX Wzór zapewnia nam to w 100%.” ![](https://wzor.biz/_astro/piotr-alberski.B09Ae7iY_Z19yEFs.webp)Piotr Alberski Chief Operating Officer, Agencja XO Media - > „Współpraca z Agencją UX Wzór rozpoczęła się od naszej strony internetowej. Bardzo spodobał się nam sposób ich pracy. Dlatego podjęliśmy decyzję o podzlecaniu projektów realizowanych dla naszych Klientów w formie White Label. Bardzo spodobał nam się ich flow pracy, przekazywanie projektów naszemu zespołowi, ich dokumentacja czy praca na design systemie. Teraz możemy podejmować większe ryzyko.” ![](https://wzor.biz/_astro/mateusz-swol.DkFG1xeC_1fOqLw.webp)Mateusz Swół Chief Operating Officer, Sellace Zespół ## Kto poprowadzi Wasz projekt Sklep projektują u nas te same osoby, które prowadzą warsztat i oddają wdrożenie. Wiecie z góry, z kim pracujecie i kto odpowiada za efekt. - ![Aleksandra Bondar](https://wzor.biz/_astro/aleksandra-bondar.Bn8yt1m6_14BXcM.webp) ### Aleksandra Bondar Senior UX/UI Designer - ![Katarzyna Adamczuk](https://wzor.biz/_astro/katarzyna-adamczuk.BgcDb3aF_15a0Nk.webp) ### Katarzyna Adamczuk Prezes, Analityk Biznesowy - ![Patryk Korycki](https://wzor.biz/_astro/patryk-korycki.D95uAkaq_Z9hpwb.webp) ### Patryk Korycki CEO, Analityk Biznesowy Czas i zakres ## Ile to trwa i od czego zależy wycena 8–12 tygodni Od audytu do startu produkcyjnego. Migracja z istniejącej platformy dokłada zwykle 2–3 tygodnie na przeniesienie treści i mapowanie adresów. - Liczba widoków i szablonów katalogu - Sprzedaż B2C, B2B albo oba modele naraz - Migracja z istniejącej platformy - Integracje - ERP, PIM, płatności, operatorzy dostaw - Rynki i wersje językowe - Zakres badań z klientami sklepu Pytania ## Pytania, które padają najczęściej Ile kosztuje zaprojektowanie sklepu internetowego? Sklep sklepowi nierówny, więc podajemy próg wejścia, nie gotową kwotę - kilkanaście widoków katalogu i kilkaset to zupełnie inne projekty. Na wycenę wpływa liczba widoków, to czy sprzedajecie B2C, B2B czy oba modele naraz, zakres migracji z istniejącej platformy i liczba integracji. Konkretną kwotę wysyłamy w dwa dni robocze od zapytania. Ile trwa projekt sklepu? Od 8 do 12 tygodni, od audytu ścieżki zakupowej do startu produkcyjnego. Migracja z istniejącej platformy dokłada zwykle 2–3 tygodnie na przeniesienie treści i mapowanie starych adresów. Terminy wewnętrzne ustalamy razem na pierwszym warsztacie i pilnujemy ich tygodniowo. Pracujecie na konkretnej platformie - Shopify, Magento, Shopware? Projektujemy niezależnie od silnika i dopasowujemy się do tego, co macie albo co wybieracie. Platforma wpływa na to, co da się zrobić bez kosztownej nadbudowy, więc pytamy o nią na starcie i mówimy wprost, które elementy projektu będą na danym silniku drogie. Jeśli platforma nie jest jeszcze wybrana, pomagamy porównać opcje pod kątem Waszego asortymentu i modelu sprzedaży. Czy migracja na nową platformę zaszkodzi naszym pozycjom w Google? Może, jeśli nikt jej nie zaplanuje - i to jest najczęstszy sposób, w jaki firmy tracą sprzedaż przy replatformingu. W zakresie jest mapowanie starych adresów na nowe i plan przeniesienia treści kategorii, żeby przekierowania były gotowe przed startem, a nie dopisywane po spadku ruchu. Projektujecie też sprzedaż B2B - cenniki indywidualne, limity kupieckie? Tak. Zakupowiec ma inne zadanie niż konsument: zamawia z listy, powtarza koszyki, działa na indywidualnym cenniku i limicie. Projektujemy to jako osobne ścieżki, nawet gdy stoją na tym samym silniku co sprzedaż detaliczna. To jest zwykle najbardziej niedoszacowana część zakresu. Czy wdrażacie sklep, czy oddajecie sam projekt? Obie opcje są dostępne i obie wyceniamy jawnie. Wdrożenie po naszej stronie oznacza jedną odpowiedzialność za efekt. Hand-off do Waszych developerów oznacza dokumentację, Dev Mode w Figmie, sesję przekazania i wsparcie w trakcie kodowania - nie „wysłaliśmy pliki, powodzenia". Czy będziemy mogli sami składać strony promocyjne po zakończeniu projektu? Tak i po to jest biblioteka komponentów, którą oddajemy razem z projektem. Strona kampanii sezonowej powstaje ze złożenia gotowych bloków, bez zamawiania projektu graficznego za każdym razem. Przy wdrożeniu po naszej stronie dokładamy szkolenie dla osoby, która będzie sklep prowadzić. Do kogo należą prawa do projektu? Do Was. Majątkowe prawa autorskie do projektu przenosimy w umowie, wraz z plikami źródłowymi. Nie stosujemy licencji czasowych ani uzależnienia od dalszej współpracy z nami. Co, jeśli po wdrożeniu sprzedaż nie wzrośnie? Dlatego w zakresie jest konfiguracja zdarzeń e-commerce i przegląd lejka po pierwszym miesiącu sprzedaży - bez tego nikt uczciwie nie odpowie na to pytanie. Jeśli dane pokażą, gdzie klienci odpadają, dostajecie listę poprawek opartą na ich zachowaniu, nie na opiniach. Osobno prowadzimy [optymalizację konwersji](https://wzor.biz/uslugi/optymalizacja-konwersji/) dla sklepów już działających. Powiązane usługi ## Powiązane usługi - [Konsultacje UX](https://wzor.biz/uslugi/konsultacje-ux/) - [Product discovery](https://wzor.biz/uslugi/warsztaty-ux/) - [Audyt UX](https://wzor.biz/uslugi/audyty-ux/) - [Badania UX](https://wzor.biz/uslugi/badania-uzytkownikow/) - [Strategia Produktu](https://wzor.biz/uslugi/strategia-produktu/) - [Audyt techniczny](https://wzor.biz/uslugi/audyt-techniczny/)