Jak zrobić konfigurator produktu 3D - przewodnik krok po kroku

W skrócie

Konfigurator produktu to narzędzie, w którym klient sam składa produkt z opcji i od razu widzi cenę. Zbudowanie go od zera to osiem konkretnych kroków: zdefiniowanie drzewa decyzji, wybór technologii, przygotowanie modeli 3D, logika cenowa, projekt interfejsu, integracja z koszykiem lub CRM, optymalizacja pod telefon i testy. Ten tekst prowadzi przez każdy z nich, pokazuje realne widełki czasu i kosztów, i uczciwie mówi, kiedy w ogóle nie warto tego robić samemu.

Zanim zaczniesz: trzy pytania, które decydują o wszystkim

Zanim ktokolwiek napisze pierwszą linię kodu, odpowiedz sobie na trzy rzeczy. Odpowiedzi wyznaczają budżet, technologię i to, czy projekt ma sens.

1. Ile realnych kombinacji ma Twój produkt? Policz: liczba modeli × warianty koloru × warianty wymiarów × dodatki. Poniżej 20 kombinacji konfigurator się nie zwróci, lepsze będą dobre zdjęcia produktowe i szybka odpowiedź na maila. Powyżej 200 kombinacji katalog PDF przestaje działać i konfigurator zaczyna być jedynym sensownym rozwiązaniem. Między 20 a 200 to strefa, w której decyduje wartość koszyka: przy produkcie za 500 zł raczej nie, przy produkcie za 15 000 zł zdecydowanie tak.

2. Czy potrafisz zapisać swoją wycenę jako formułę? Jeśli cena wynika z tabeli, mnożników i dopłat, konfigurator policzy ją bez problemu. Jeśli za każdym razem handlowiec „patrzy i wycenia z doświadczenia", trzeba najpierw ten proces sformalizować. To bywa trudniejsze niż samo programowanie i jest najczęstszą przyczyną opóźnień we wdrożeniu.

3. Co ma się stać po kliknięciu „chcę to"? Zamówienie do koszyka i płatność online? Zapytanie do handlowca? Zlecenie produkcyjne do ERP? Każda z tych ścieżek to inny zakres integracji i inny koszt. Decyzja zapada na starcie, bo przebudowa handoffu w połowie projektu jest droga.

Krok 1: Zdefiniuj drzewo decyzji

Konfigurator to nie zbiór suwaków, tylko uporządkowana ścieżka wyborów. Zacznij od kartki i wypisz wszystko, co klient może zmienić, a potem ustaw to w kolejności od decyzji najbardziej brzemiennych do kosmetycznych.

Dla mebla tapicerowanego wygląda to tak: typ (sofa, narożnik, fotel) → układ modułów → wymiar → tkanina → nogi → dodatki. Dla drzwi: model → wymiar → okleina → klamka → szyba → ościeżnica. Dla opakowania: format → materiał → nadruk → uszlachetnienie → nakład.

Zasada, która ratuje konwersję: pierwsza decyzja musi być łatwa. Klient, który na wejściu dostaje wybór spośród 40 wariantów okleiny, zamyka kartę. Klient, który najpierw klika „sofa trzyosobowa", jest już w procesie i przejdzie dalej.

Na tym etapie wypisz też reguły zależności: czego nie da się połączyć. Szyba matowa niedostępna w modelu pełnym, tkanina premium tylko od rozmiaru XL w górę, napęd tylko do bram powyżej 3 metrów. Te reguły są równie ważne jak same opcje, bo to one pilnują, żeby klient nie złożył produktu, którego nie umiesz wyprodukować.

Krok 2: Wybierz technologię

Trzy realne ścieżki, każda z innym profilem kosztów.

Wtyczka do sklepu (WooCommerce, PrestaShop, Shopify). Najtańsze wejście, 200-2 000 zł za licencję. Sprawdza się przy prostych wariantach 2D: kolor, rozmiar, grawer. Konfigurator produktu w WooCommerce oparty o wtyczkę zrobisz w tydzień. Ograniczenie: brak realnego 3D, sztywna logika cenowa, zależność od aktualizacji autora wtyczki. Przy nietypowych regułach szybko trafiasz w ścianę.

Gotowy SaaS (Threekit, Cylindo, Roomle, Zakeke, Variantic, ConfigOne). Płacisz abonament 500-8 000 zł miesięcznie, dostajesz dopracowane narzędzie i wsparcie. Wdrożenie 4-8 tygodni. Ograniczenia: dane i modele siedzą na infrastrukturze dostawcy, każda nietypowa reguła to ticket do supportu, a po trzech latach zapłacisz 18-290 tys. zł i nadal nie masz kodu.

Własny kod (Three.js / WebGL). Koszt jednorazowy 12-55 tys. zł, wdrożenie 6-12 tygodni, potem tylko hosting 30-80 zł miesięcznie. Dostajesz pełną własność, dowolną logikę i integrację z czymkolwiek. Ograniczenie: potrzebujesz kogoś, kto to napisze i utrzyma.

Prosty test: jeśli Twoje reguły wyceny mieszczą się w gotowym panelu SaaS i nie planujesz integracji z własnym ERP, zostań przy SaaS. Jeśli którykolwiek z tych warunków nie zachodzi albo patrzysz na horyzont trzech lat i dalej, własny kod wychodzi taniej i daje więcej.

Krok 3: Przygotuj modele 3D

Najczęściej niedoszacowany etap. Modele decydują o tym, czy konfigurator wygląda profesjonalnie, czy jak gra sprzed dwudziestu lat.

Skąd wziąć modele:

• Masz pliki CAD (SolidWorks, Rhino, Fusion 360, STEP, IGES) - trzeba je uprościć i przekonwertować do formatu webowego. Modele produkcyjne mają setki tysięcy trójkątów, przeglądarka potrzebuje kilkunastu tysięcy. Oszczędność około 40% budżetu na tym etapie.
• Masz zdjęcia i rysunki techniczne - modelowanie od zera w Blenderze, 1-3 dni na produkt.
• Masz tylko fizyczny produkt - fotografowanie tekstur w studio plus modelowanie z pomiaru. Najdroższe, ale efekt najbardziej realistyczny.

Wymagania techniczne, których nie da się pominąć:

• Format glTF/GLB - standard dla weba, kompresja Draco lub meshopt
• Waga jednego produktu 200-500 KB, cała scena poniżej 3 MB
• Tekstury 1K lub 2K, seamless (bezszwowe), w formacie WebP lub skompresowanym JPG
• Prawidłowe UV - bez tego tekstura się rozjeżdża i widać to od razu
• Materiały w standardzie PBR (physically based rendering), żeby światło zachowywało się realistycznie

Nie kupuj generycznych modeli ze Sketchfaba bez sprawdzenia topologii i UV. Zaoszczędzisz 200 zł, a stracisz dwa dni na poprawki.

Krok 4: Zbuduj logikę cenową

To jest miejsce, w którym konfigurator zarabia albo traci wiarygodność.

Cena składa się zwykle z: bazy (cena modelu w konfiguracji minimalnej), mnożników (za wymiar ponad standard, za wzór montażu), dopłat (za każdą wybraną opcję) i modyfikatorów (rabat ilościowy, marża dla partnera).

Prosty przykład dla drzwi: 850 zł baza + 120 zł okleina dąb + 280 zł klamka premium + 150 zł szyba satyna + 200 zł ościeżnica regulowana = 1 600 zł. Klient widzi tę kwotę w momencie kliknięcia ostatniej opcji, nie po dwóch dniach.

Trzy zasady, które warto przyjąć od początku:

1. Cennik trzymaj poza kodem. W bazie danych albo w panelu administracyjnym, nie zaszyty w JavaScripcie. Inaczej każda podwyżka to zlecenie do programisty.
2. Nazywaj rzeczy uczciwie. Jeśli wycena jest orientacyjna, napisz „szacunek" albo „wycena wstępna". Klient, który dostanie później inną kwotę, straci zaufanie do całej firmy, nie tylko do konfiguratora.
3. Przewiduj przypadki brzegowe. Co się dzieje przy wymiarze nietypowym? Konfigurator powinien powiedzieć „powyżej 100 cm wymagana ościeżnica specjalna, +350 zł", a nie policzyć bzdurę albo pokazać „-".

Krok 5: Zaprojektuj interfejs

Konfigurator przegrywa najczęściej nie na technologii, tylko na tym, że jest zbyt skomplikowany.

Co działa:

• Trzy do pięciu kroków, nie dwanaście. Klient widzi postęp i wie, ile zostało.
• Domyślna konfiguracja od startu. Nigdy pusta scena. Klient wchodzi i od razu widzi gotowy produkt, który może zmieniać.
• Bestsellery na wierzchu. Pierwsze 3-6 opcji to te najczęściej wybierane, reszta pod „pokaż wszystkie". Wybór spośród 6 wariantów w 15 sekund konwertuje lepiej niż wybór spośród 40 w pięć minut.
• Cena zawsze widoczna, aktualizowana natychmiast po kliknięciu. To ona napędza decyzję.
• Podgląd zmiany w czasie rzeczywistym. Klient klika tkaninę i widzi ją na modelu w tej samej sekundzie, bez przeładowania.

Co zabija konwersję:

• Wymóg rejestracji przed konfiguracją
• Ukrywanie ceny do momentu podania maila
• Ładowanie sceny dłuższe niż 3 sekundy
• Brak możliwości cofnięcia wyboru

Krok 6: Podłącz konfigurator do swojego procesu

Konfigurator, z którego dane trafiają do handlowca jako zrzut ekranu, to zmarnowana połowa wartości.

Ścieżki handoffu, od najprostszej:

• Formularz zapytania - mail z pełną specyfikacją, renderem i ceną. Najtańsze, sprawdza się przy produktach premium, gdzie klient i tak chce rozmowy.
• Koszyk sklepu - konfiguracja wchodzi jako produkt z atrybutami do WooCommerce, PrestaShop czy Shopify. Klient płaci od razu. Sensowne przy produktach do około 5 000 zł.
• Integracja z CRM - lead ląduje w systemie z pełną konfiguracją jako pola strukturalne, nie jako tekst. Handlowiec ma wszystko, czego potrzebuje, i zamyka szybciej.
• Integracja z ERP - konfiguracja przekłada się na listę materiałową i zlecenie produkcyjne. Najdroższe, ale przy dużym wolumenie zwraca się na samym wyeliminowaniu przepisywania zamówień.

Do tego zawsze warto dołożyć zapis konfiguracji pod unikalnym linkiem. Klient wraca po tygodniu, otwiera link i ma swoją konfigurację. Może ją też wysłać żonie albo projektantowi. To kosztuje niewiele, a wyraźnie podnosi liczbę powrotów.

Krok 7: Zoptymalizuj pod telefon

Około 60% ruchu na strony produktowe przychodzi z telefonów. Konfigurator, który działa tylko na desktopie, obsługuje mniejszość klientów.

Twarde wymagania:

• 30 FPS na starszym telefonie (iPhone SE 2020, średniopółkowy Android) i 60 FPS na nowszym
• Ładowanie poniżej 3 sekund na LTE, z widocznym wskaźnikiem postępu
• Sterowanie palcem: obrót jednym palcem, zoom dwoma, bez ukrytych gestów
• Panel opcji jako arkusz od dołu, nie jako boczna kolumna wciśnięta na siłę
• Brak komunikatu „obróć telefon" - to najprostszy sposób, żeby stracić klienta

Techniczne sposoby, żeby to osiągnąć: lazy loading modeli, kompresja tekstur, level of detail (uproszczony model przy oddaleniu kamery), wykrywanie możliwości karty graficznej i automatyczne obniżanie jakości przy spadku klatek.

Krok 8: Przetestuj i wdroż

Lista kontrolna przed publikacją:

• Każda kombinacja opcji daje poprawną cenę, także skrajne przypadki
• Reguły zależności blokują niemożliwe konfiguracje
• Test na iPhone (Safari), Androidzie (Chrome), tablecie i desktopie
• Konsola przeglądarki bez błędów, brak nieudanych żądań
• Formularz zapytania faktycznie wysyła maila i nie ląduje w spamie
• PDF ze specyfikacją generuje się z polskimi znakami
• Zapisany link do konfiguracji otwiera się poprawnie po kilku dniach
• Analityka mierzy: wejścia, ukończone konfiguracje, wysłane zapytania

Po wdrożeniu obserwuj przez pierwszy miesiąc, w którym kroku klienci odpadają. To zwykle jedno konkretne miejsce i zwykle da się je naprawić drobną zmianą kolejności lub domyślnych wartości.

Ile to trwa i ile kosztuje

Realne widełki dla polskiego rynku, przy założeniu, że pracujesz z doświadczonym wykonawcą.

Zakres	Czas	Koszt
Wtyczka do sklepu, warianty 2D	1-2 tygodnie	2-8 tys. zł
Konfigurator 3D podstawowy (1 produkt, do 20 opcji)	4-6 tygodni	12-25 tys. zł
Konfigurator 3D rozbudowany (kilka produktów, reguły, wymiary custom)	6-12 tygodni	25-55 tys. zł
Portal z konfiguratorem (panel admina, CRM, wielu użytkowników)	12-20 tygodni	55-100 tys. zł

Do tego dochodzi hosting (30-80 zł miesięcznie przy własnym kodzie) i opcjonalna opieka serwisowa.

Co najczęściej podnosi koszt: brak gotowych modeli 3D, niesformalizowany cennik, integracja ze starym ERP bez API oraz zmiany zakresu w trakcie prac.

Pięć błędów, które kosztują najwięcej

1. Budowanie wszystkiego naraz. Zacznij od jednego produktu i dwudziestu opcji. Zobacz, jak klienci go używają, dopiero potem rozbudowuj. Konfigurator obejmujący od razu cały katalog to projekt na pół roku, który może nie trafić w potrzebę.
2. Pomijanie reguł zależności. Klient składa produkt, którego nie da się wykonać, dostaje cenę, a potem telefon „przepraszam, tego nie zrobimy". Gorsze niż brak konfiguratora.
3. Fotorealizm za wszelką cenę. Klient nie ocenia jakości renderu, tylko czy widzi swój wariant. Scena ważąca 20 MB i ładująca się dziesięć sekund przegrywa z lekką i czytelną.
4. Ukrywanie ceny. „Podaj maila, wyślemy wycenę" niweczy główną przewagę konfiguratora. Jeśli nie możesz podać ceny dokładnej, podaj widełki i tak to nazwij.
5. Traktowanie wdrożenia jako końca projektu. Konfigurator wymaga aktualizacji przy każdej nowej kolekcji. Zaplanuj, kto i jak będzie dodawał warianty, zanim wystartujesz.

Często zadawane pytania

Czy da się zrobić konfigurator produktu samodzielnie, bez programisty?

Przy prostych wariantach 2D tak: wtyczka do WooCommerce lub PrestaShop plus kilka godzin konfiguracji wystarczy, żeby klient wybierał kolor i rozmiar. Przy 3D w przeglądarce realnie nie. Three.js wymaga znajomości JavaScriptu, grafiki 3D i optymalizacji wydajności, a błędy na tym poziomie kończą się konfiguratorem, który zawiesza telefony klientów. Alternatywa bez programisty to gotowy SaaS, gdzie płacisz abonament, ale wdrożenie sprowadza się do wgrania modeli i ustawienia cennika.

Jak zrobić konfigurator produktu w WordPressie i WooCommerce?

Dwie drogi. Pierwsza: konfigurator produktu WordPress oparty o wtyczkę, na przykład WooCommerce Product Add-Ons, obsłuży warianty 2D, dopłaty i proste reguły. Koszt licencji 200-800 zł, wdrożenie kilka dni. Druga: własny konfigurator produktu WooCommerce w Three.js, osadzony na stronie produktu, który po kliknięciu „dodaj do koszyka" przekazuje konfigurację przez REST API jako produkt z atrybutami. Wtedy cała logika 3D i cenowa żyje we własnym kodzie, a WooCommerce obsługuje płatność i zamówienie. Druga droga kosztuje 12-30 tys. zł, ale nie ma ograniczeń wtyczki.

Jak zrobić konfigurator produktu w PrestaShop?

PrestaShop ma wbudowany mechanizm kombinacji atrybutów, który obsłuży proste warianty: kolor, rozmiar, materiał. Przy kilkudziesięciu kombinacjach to wystarczy i nie musisz nic dokładać. Problem zaczyna się przy dwóch rzeczach: cenach wynikających z formuły (za metr kwadratowy, za centymetr ponad standard) oraz przy wizualizacji 3D, bo PrestaShop pokazuje wyłącznie wgrane zdjęcia.

Wtedy są dwie drogi. Moduł z marketplace (150-600 zł) doda konfigurator 2D z podglądem warstwowym i prostymi dopłatami. Albo własny konfigurator produktu w PrestaShop napisany w Three.js, osadzony na karcie produktu, który po zatwierdzeniu przekazuje konfigurację do koszyka przez PrestaShop Web Service API jako produkt z atrybutami i ceną policzoną po Twojej stronie. Druga droga kosztuje 12-30 tys. zł, ale nie ogranicza Cię logika modułu ani jego zgodność z kolejnymi wersjami sklepu, co przy migracjach z 1.7 na 8.x bywało bolesne.

Ile trwa wdrożenie konfiguratora 3D od podpisania umowy?

Typowo 6-12 tygodni dla konfiguratora rozbudowanego. Rozkład: specyfikacja i drzewo decyzji (tydzień), modelowanie 3D (2-4 tygodnie, zależnie od katalogu i tego, czy masz pliki CAD), programowanie logiki i interfejsu (3-5 tygodni), integracja z koszykiem lub CRM (tydzień), testy na urządzeniach (tydzień), wdrożenie i szkolenie zespołu (kilka dni). Etapy modelowania i programowania częściowo się nakładają, dlatego suma jest krótsza niż prosta suma składników.

Czy konfigurator poprawia pozycje w Google?

Pośrednio i wyraźnie. Sam konfigurator to zwykle aplikacja JavaScript, której Google nie zindeksuje jako treści. Ale wydłuża czas na stronie, obniża współczynnik odrzuceń i generuje linki przychodzące, bo ludzie chętnie dzielą się takim narzędziem. Warto pod nim umieścić opisową treść z frazami, na które chcesz rankować, oraz oznaczyć produkt schematem Product w strukturze JSON-LD. Największą wartością pozostaje jednak konwersja, nie ruch.

Co z produktami, które mają setki wariantów?

Wtedy konfigurator ma największy sens, ale trzeba zmienić podejście do interfejsu. Zamiast pokazywać wszystko, prowadź klienta ścieżką filtrowania: najpierw zawężasz do typu, potem do serii, dopiero na końcu wybierasz szczegóły. Sprawdza się też wyszukiwarka opcji i mechanizm „pokaż mi coś podobnego". Technicznie setki wariantów to nie problem, jeśli modele są parametryczne, a nie osobnym plikiem dla każdej kombinacji.

Czy konfigurator zadziała, gdy nie mam modeli 3D swoich produktów?

Tak, tylko trzeba je najpierw stworzyć i to jest osobna pozycja w budżecie. Jeśli masz dokumentację techniczną lub pliki CAD, modelowanie jest szybkie i tanie. Jeśli masz tylko zdjęcia, modelarz odtworzy produkt z referencji, licz 1-3 dni na produkt. Przy prostych bryłach (opakowania, blaty, panele) opłaca się modelowanie parametryczne: jeden model obsługuje wszystkie wymiary, zamiast dziesiątek osobnych plików.

Kiedy konfigurator się nie opłaca?

Przy małej liczbie wariantów (poniżej dwudziestu), przy niskiej wartości koszyka (poniżej kilkuset złotych), przy produktach, których klient nie personalizuje, oraz wtedy, gdy nie potrafisz zapisać wyceny jako reguły. W tych przypadkach lepiej zainwestować w zdjęcia produktowe, opisy i szybkość odpowiedzi na zapytania. Uczciwie: mniej więcej co czwarta firma, która pyta mnie o konfigurator, dostaje odpowiedź, że w jej sytuacji to nie jest najlepsze wydanie pieniędzy.

Co się dzieje z konfiguratorem po kilku latach?

Jeśli powstał na własnym kodzie w Three.js, żyje dalej praktycznie bez ingerencji. WebGL to standard W3C, a Three.js jest utrzymywany od lat i używany przez producentów samochodów i duże sklepy. Nadchodzące WebGPU zostanie obsłużone wewnątrz biblioteki, bez przepisywania Twojego kodu. Realne prace utrzymaniowe to dodawanie nowych kolekcji i aktualizacja cennika. Przy rozwiązaniu SaaS sytuacja jest inna: żyjesz na warunkach dostawcy i przy zmianie cennika albo zamknięciu usługi migracja jest po Twojej stronie.

Potrzebujesz konfiguratora dla swojego produktu?

Jeśli po przeczytaniu tego widzisz, że konfigurator ma u Ciebie sens, odezwij się. Zaczniemy od krótkiej rozmowy o katalogu i regułach wyceny, a potem dostaniesz widełkową wycenę na piśmie w ciągu 48 godzin. Jeśli okaże się, że w Twojej sytuacji lepszy będzie gotowy SaaS albo wtyczka, powiem to wprost.

Zobacz też pełny landing konfiguratorów produktowych 3D, porównanie własnego kodu z SaaS-em albo realne widełki cenowe na 2026 rok. Osiem działających konfiguratorów możesz kliknąć od razu: sauna, pergola, brama, ścianka szklana, basen, opakowania, oranżeria i lampy.