Konfigurator produktów 3D dla Shopify - jak zbudować własny w 2026 (koszty, wdrożenie, portfolio)

Chcesz konfigurator 3D w Shopify, ale nie te 200 dolarów miesięcznie za Zakeke?

Sklep na Shopify. Produkty konfigurowalne. Klient ma zobaczyć 3D, wybrać wariant, dodać do koszyka. Wchodzisz do Shopify App Store, znajdujesz Zakeke, Threekit, Kickflip albo Cylindo - i widzisz cenniki od 199$ do 700$ miesięcznie. Do tego setup fee. Do tego "custom development" płatne oddzielnie. A produkt na końcu wygląda jak każdy inny konfigurator z tych aplikacji, bo używa ich domyślnego UI.

Jest inna droga: własny konfigurator 3D w Shopify. Kod należy do Ciebie, nie ma miesięcznej opłaty, wygląda jak Twój sklep (nie jak wszyscy inni), a integracja z koszykiem Shopify działa natywnie.

Ten tekst wyjaśnia jak to zrobić - trzy techniczne podejścia (od najprostszego do headless), realne koszty, gdzie są pułapki. Pisze developer, który postawił 9 produkcyjnych konfiguratorów 3D dla producentów w Polsce - kilka z nich mogłoby jutro pracować w Shopify (i pewnie tam wylądują).

Dlaczego apki z Shopify App Store nie wystarczają

Nie chodzi tylko o cenę. Chodzi o 3 rzeczy które łamią biznes klientów którzy dzwonili do mnie:

1. Wygląd "jak każdy inny konfigurator" - Zakeke ma jeden template UI. Threekit ma drugi. Klient który sprzedaje meble premium za 15 000 zł nie chce żeby jego strona produktu wyglądała identycznie jak strona konkurenta z Chin za 800 zł. Konfigurator staje się elementem który obniża percepcję marki, zamiast ją podnosić.

2. Zamknięty ekosystem - jak dodać do konfiguratora custom logikę pricingu (np. dopłata za pilne 3 tygodnie zamiast 6)? W Zakeke: piszesz do supportu i płacisz custom dev. W dedykowanym konfiguratorze: 30 linijek JS w Twoim kodzie, deploy tego samego dnia.

3. Wolność w limitach - większość apek z App Store ma limity: X SKU, Y wariantów, Z materiałów. Sklep z drzwiami garażowymi ma 3 modele × 5 rozmiarów × 12 kolorów × 4 wykończenia = 720 wariantów. Wychodzisz z tanim planem, trafiasz na Enterprise 700$/mies.

Trzy podejścia - od najszybszego do najczystszego

Podejście 1: Aplikacja z Shopify App Store (Zakeke / Threekit)

Kiedy ma sens: masz mały katalog (do 20 SKU), akceptujesz standardowy wygląd, chcesz startować w 2 tygodnie zamiast 2 miesięcy.

Cena: 199-700$/mies + setup 500-3000$ + custom dev płatny.

Ograniczenia: wygląd unifikowany, brak dostępu do kodu, dane produktowe siedzą po ich stronie (co przy migracji Shopify → Woo albo custom = koszmar).

Podejście 2: Custom Three.js embedded w Shopify Theme (rekomendowane dla większości)

Jak to działa: dodajesz sekcję Shopify (sections/product-configurator.liquid), która ładuje własny skrypt Three.js. Sekcja jest wpięta w standardowy szablon produktu - obok galerii i przycisku "Dodaj do koszyka". Konfigurator komunikuje się z Shopify przez Ajax Cart API - dokładnie ten sam endpoint co "Buy Now" na każdej innej stronie produktu.

Zalety:

• Wygląd 100% Twój - theme, kolory, typografia, layout
• Kod należy do Ciebie (jeden plik .js w themes)
• Zero miesięcznej opłaty
• Ładujesz TYLKO na stronach produktów wymagających konfiguratora (SEO OK)
• Integracja z checkout Shopify jest natywna - konfigurator dodaje wariant + properties do koszyka jednym POST /cart/add.js

Wymaga: developer znający Three.js + Shopify Liquid. To ok. 80% wdrożeń które robię dla klientów którzy nie chcą płatnych apek.

Podejście 3: Headless Shopify + własny frontend (Next.js / Nuxt / Remix)

Kiedy ma sens: duży katalog (500+ SKU), planujesz mobilne PWA/aplikację, chcesz absolutną kontrolę nad frontend performance. Shopify Storefront API dostarcza dane produktu, cart, checkout - front piszesz od zera.

Cena wdrożenia: 30-80 tys. zł. Dłuższy time-to-market (3-5 mies), ale najczystsza architektura na długi dystans.

Uwaga: dla większości sklepów jest to overkill. Podejście #2 daje 90% korzyści za 30% ceny.

Custom Three.js dla Shopify - jak to wygląda technicznie

Trzy komponenty które musisz połączyć:

1. Renderer 3D (Three.js WebGL). Ładuje model glTF (skompresowany Draco), renderuje na <canvas>, obsługuje kamerę, oświetlenie, materiały. To jest miejsce gdzie klient przeciąga myszką i widzi swój produkt w 3D.

2. Stan konfiguracji - obiekt JS trzymający wybory klienta: { model: 'M1', material: 'oak', size: '180cm', extras: ['handles-brushed'] }. Zmiana w tym obiekcie triggeruje re-render 3D + aktualizację ceny.

3. Most Shopify - dwie funkcje:

• Wycena: POST /apps/quote (Shopify App Proxy do Twojego serwera) → zwraca aktualną cenę na podstawie konfiguracji
• Dodanie do koszyka: POST /cart/add.js z variant_id + properties: { Konfiguracja: '...' } → Shopify traktuje to jak każdy inny produkt

Klient klika "Dodaj do koszyka", wybiera dostawę, płaci. Shopify wysyła zamówienie, w administrator's panelu widzi w polu "Notes" pełną konfigurację którą klient złożył.

Integracja z Shopify - co konkretnie trzeba spiąć

Product Variants + Metafields

Shopify ma natywny system wariantów (rozmiar/kolor). Do 3 opcji × po kilka wartości działa świetnie. Powyżej - używasz Metafields (custom pola per produkt) do trzymania definicji konfiguratora:

{
  "configurator_url": "https://cdn.grodev.pl/pool-model-3.5m.glb",
  "materials": ["oak", "beech", "walnut"],
  "sizes": ["180", "200", "220"],
  "base_price": 12000,
  "material_multipliers": { "oak": 1.0, "walnut": 1.4 }
}

Konfigurator czyta Metafields przez Liquid → JSON i renderuje warianty dynamicznie. Zero hardkodowania w JS.

Wycena po stronie serwera (nie klienta)

Nigdy nie licz ceny w JavaScript. Wystawiasz endpoint POST /apps/quote (App Proxy) który przyjmuje konfigurację, sięga do Twojej bazy pricingu (Twój serwer, nie Shopify) i zwraca cenę. Dlaczego:

• Klient może zmieniać JS w DevTools → cena hardkodowana w JS = klient płaci co chce
• Producent zmienia ceny co miesiąc - jedna edycja w bazie, zero redeploy
• Ten sam endpoint może wysłać ofertę PDF na e-mail (bonus funkcja)

Ajax Cart API - dodanie do koszyka

await fetch('/cart/add.js', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({
    id: variantId,
    quantity: 1,
    properties: {
      'Model': 'M1',
      'Wybarwienie': 'Dąb szczotkowany',
      'Rozmiar': '180 cm',
      'Numer konfiguracji': 'CFG-2026-08-1234'
    }
  })
})

Shopify pokazuje properties przy pozycji w koszyku i w zamówieniu. Producent widzi dokładnie co klient skonfigurował. Zero błędów przy realizacji.

Ile to kosztuje

Cena zależy od trzech rzeczy: liczby wariantów wizualnych (materiały, rozmiary, dodatki), jakości modelu 3D (masz gotowy plik CAD czy trzeba go zbudować od zera), integracji dodatkowych (CRM, ERP, e-mail marketing).

Realne widełki wdrożeniowe dla Shopify:

• Prosty konfigurator (do 5 wariantów, gotowy model 3D): 15-25 tys. zł
• Średni (20 wariantów, model do przerobienia): 25-40 tys. zł
• Zaawansowany (100+ wariantów, model od zera + AR viewer): 40-70 tys. zł

Do tego doliczyć:

• Przygotowanie modeli 3D (jeśli producent nie ma): 800-4000 zł za model
• Integracja z CRM/ERP producenta: +5-15 tys. zł
• Wielojęzyczność (EN/DE): +3-8 tys. zł
• Wersja AR (klient widzi produkt w swoim pokoju przez telefon): +8-15 tys. zł

Czas wdrożenia: 6-10 tygodni dla podejścia #2 (Shopify Section), 3-5 miesięcy dla headless.

Pełny cennik konfiguratorów 3D (nie tylko Shopify): grodev.pl/konfigurator-produktowy-3d.

Portfolio - 8 wdrożonych konfiguratorów 3D

Zbudowałem dedykowane konfiguratory dla polskich producentów z różnych branż. Wszystkie działają na własnych subdomenach i pokazują dokładnie te same mechanizmy które opisałem wyżej (Draco compression, InstancedMesh, server-side pricing):

• basen3d.grodev.pl - konfigurator basenów ogrodowych (wymiary, kolor, dodatki, wycena live)
• brama3d.grodev.pl - bramy segmentowe (typ, kolor, wypełnienie, automatyka)
• lampy3d.grodev.pl - lampy dekoracyjne (white-label dla producenta)
• opakowania3d.grodev.pl - opakowania kartonowe (wymiary, nadruk, koszt jednostki)
• oranzeria3d.grodev.pl - oranżerie ogrodowe (moduły, przeszklenia, dach)
• pergola3d.grodev.pl - pergole bioklimatyczne (rozmiar, kolor, silniki, oświetlenie LED)
• sauna3d.grodev.pl - sauny ogrodowe (typ drewna, przeszklenia, piec)

Wszystkie działają na WooCommerce/custom stack, ale ta sama logika (renderer + stan + most do koszyka) przenosi się 1:1 do Shopify. Różnica to wymiana POST /cart/add z WooCommerce na POST /cart/add.js z Shopify.

FAQ

Czy Shopify Storefront limituje custom konfigurator? Nie - Storefront API jest open. Możesz odczytać/zapisać produkty, warianty, kartę, klienta, zamówienia. Konfigurator wpina się w istniejący koszyk i checkout, nie tworzy niczego równoległego.

Ile trwa wdrożenie w Shopify vs WooCommerce? Podobnie: 6-10 tygodni dla średniego konfiguratora. Shopify daje szybszy hosting (CDN, wydajność) i mniej problemów z kompatybilnością tematów. WooCommerce daje pełniejszą kontrolę nad kodem PHP.

Czy konfigurator działa na mobile? Tak, i to jest 60-70% ruchu w praktyce. Three.js działa świetnie na telefonach - trzeba tylko wiedzieć jak obniżyć jakość materiałów, ograniczyć pixel ratio i zoptymalizować geometry. To standard wdrożenia, nie dodatek.

Czy klient może zapisać konfigurację i wrócić do niej później? Tak - dwa sposoby. (1) Zapis w localStorage przeglądarki - bez logowania, działa natychmiast. (2) Zapis w koncie klienta Shopify - trzeba logowanie, ale przetrwa zmianę urządzenia. Wybór zależy od buyer persona (B2B klient korporacyjny woli #2, B2C consumer #1).

Kto rysuje modele 3D - Wy czy producent? Najpierw pytamy producenta o pliki CAD (STEP, SolidWorks, IGES). Jeśli są - konwersja do glTF + optymalizacja to 800-1500 zł/model. Jeśli nie - modelujemy od zera w Blenderze, koszt zależy od skomplikowania (proste bryły 500 zł, produkty z detalem - 2-4 tys.).

Co jeśli producent zmieni cennik za 6 miesięcy? Ceny nigdy nie są w kodzie konfiguratora. Siedzą w bazie po Twojej stronie (Twój Laravel/Node backend). Producent edytuje pricing w panelu admina - konfigurator pobiera nową cenę przez API. Zero deployu, natychmiastowa zmiana.

Czy dostanę kod źródłowy? Tak. Zawsze. Nawet gdyby jutro coś się ze mną stało, kod jest w Twoim repo GitHub (albo GitLab, jeśli wolisz), dostęp masz Ty. Nikt inny nie musi być pośrednikiem żeby coś zmienić - wystarczy dowolny developer znający Three.js i Shopify Liquid.

Podsumowanie

Konfigurator 3D w Shopify nie musi kosztować 200$/mies i wyglądać jak każdy inny. Dedykowane rozwiązanie oparte o Three.js + Shopify Sections + Ajax Cart to sprawdzony przepis który:

• Kosztuje 15-40 tys. zł jednorazowo zamiast 200-700$/mies
• Wygląda 100% jak Twój sklep (kod należy do Ciebie)
• Integruje się natywnie z checkout Shopify
• Skaluje do 500+ wariantów bez przechodzenia na plan Enterprise
• Działa na mobile bez dopłaty

Jeśli rozważasz konfigurator dla swojego sklepu na Shopify - napisz do mnie, zrobię wycenę i harmonogram wdrożenia dla Twojego konkretnego produktu. Pierwsza rozmowa zawsze bez opłaty.

Podobne teksty z bloga:

• Konfigurator 3D - WooCommerce, Shopify czy custom? - porównanie trzech ekosystemów
• Jak działa konfigurator produktu 3D - techniczne podstawy
• Ile kosztuje konfigurator produktowy 3D - pełny cennik z wariantami
• Jak wygląda budowa portalu z konfiguratorem 3D - proces krok po kroku

Często zadawane pytania

Czy konfigurator 3D działa ze Shopify?

Tak. Konfigurator instaluje się jako Shopify App (custom) lub Shopify Section (dla Shopify 2.0). Integracja z checkout Shopify - zamówienie z konfiguratora tworzy Product Variant z custom attributes (opcje, cena, warianty). Zero problemów z Shopify Payments.

Ile kosztuje własny konfigurator 3D dla Shopify vs Zakeke?

Custom: 18-45 tys zł jednorazowo + 4-6 tys/rok. Zakeke Enterprise: 30-72 tys zł/rok. Po 1. roku custom 3× tańszy, po 3 latach 5-8× tańszy. Custom = pełen kod klienta, integracja z ERP w cenie, brak limitów opcji/wariantów.

Czy Shopify Plus jest wymagany dla custom konfiguratora 3D?

Nie, custom konfigurator działa na dowolnym Shopify plan (Basic $32, Standard $92, Advanced $399, Plus). Ale Shopify Plus daje więcej Storefront API calls (przydatne dla high traffic) i Checkout Extensibility dla custom checkoutu (niezbędne dla B2B z NIP).

Jak zamówienie z konfiguratora 3D trafia do systemu Shopify?

Konfigurator generuje unique Product Variant przez Shopify Admin API - z custom SKU, ceną (obliczoną z opcji), custom fields (opcje wybrane przez klienta). Ten Variant jest dodawany do koszyka klienta. Standardowy Shopify checkout obsługuje resztę (płatność, wysyłka, faktura).

Ile trwa integracja custom konfiguratora 3D z Shopify?

MVP 4-6 tygodni. Standard z 6-8 produktami i mobile: 8-12 tygodni. Enterprise z integracją Shopify Plus checkout i ERP: 14-18 tygodni. Timeline zakłada gotowe modele 3D. Bez modeli: +2-4 tygodnie.