JFlow Labs / WIEDZA

Wizualizacje 3D dla sklepu internetowego: warianty bez sesji, obrót 360°, AR i szybkość na telefonie

Wizualizacje 3D dla sklepu internetowego to obrazy i interaktywne widoki produktu tworzone z jednego modelu 3D: zdjęcia wszystkich wariantów bez sesji zdjęciowej, obrót 360°, podgląd w 3D z funkcją „zobacz u siebie” (AR) i konfigurator. Najbezpieczniej zacząć od renderów wariantów w galerii, bo działają na każdej platformie i ważą tyle co zwykłe zdjęcia, a model 3D i AR warto dodać tam, gdzie klient waha się co do kształtu albo rozmiaru. Każdy element 3D musi zmieścić się w budżecie szybkości strony na telefonie i mieć alternatywę dla osób, które modelu nie obrócą.

Do czego sklep internetowy wykorzystuje wizualizacje 3D?

Sklep internetowy wykorzystuje wizualizacje 3D na pięć sposobów: jako rendery w galerii, zdjęcia wariantów, obrót 360°, interaktywny model z podglądem AR i konfigurator. Wszystkie powstają z jednego modelu produktu, ale odpowiadają na inne pytania klienta i inaczej obciążają telefon.

3D w e-commerce zaczyna się od modelu, czyli cyfrowej kopii produktu z prawdziwymi wymiarami i materiałami. Buduje się go raz, z plików CAD, rysunków technicznych albo zdjęć i pomiarów, a potem wykorzystuje wiele razy. Kiedy taki model jest lepszy od fotografa, a kiedy nie, porównuję w tekście render 3D czy sesja zdjęciowa.

Zanim wybierzesz formę, sprawdź, na jakie pytanie Twoja karta produktu dziś nie odpowiada. Jeśli klienci piszą „jak to wygląda w grafitowym?”, potrzebujesz zdjęć wariantów. Jeśli pytają o tył i boki, pomoże obrót 360°. Jeśli o to, czy sofa zmieści się w salonie, pomoże AR. Jeśli składają produkt z wielu opcji i nie wiedzą, ile zapłacą, potrzebny jest konfigurator. Nie warto zamawiać wszystkich naraz.

Tabela zestawia pięć form 3D od najlżejszej do najcięższej. Pierwsze dwie to zwykłe obrazy, więc działają wszędzie, pozostałe wymagają przeglądarki 3D albo aplikacji na karcie produktu.

Pięć form 3D w sklepie internetowym: na jakie pytanie odpowiadają i co musi pobrać telefon.
Forma 3DPytanie klientaCo pobiera telefonGdzie działa
Render w galerii„Jak to wygląda?”Zwykły obraz AVIF lub WebP, tak lekki jak zdjęcie.Każda platforma, marketplace’y, porównywarki.
Zdjęcia wariantów„Jak wygląda w moim kolorze?”Obrazy wybranego wariantu, podmieniane po wyborze opcji.Shopify, WooCommerce i większość platform sklepowych.
Obrót 360°„Co jest z tyłu i z boku?”Serię klatek albo krótkie wideo, najlepiej dopiero po geście.Przeglądarka 360° w szablonie albo wideo w galerii.
Model 3D z AR„Czy zmieści się u mnie?”Plik GLB rysowany przez kartę graficzną, na iPhonie plik USDZ.Shopify natywnie, WooCommerce przez wtyczkę, własny sklep przez komponent.
Konfigurator 3D„Ile kosztuje moja wersja?”Aplikację w przeglądarce z modelem i logiką cen.Osobna aplikacja osadzona na karcie produktu.

Jak zrobić zdjęcia wariantów produktu bez sesji zdjęciowej?

Zdjęcia wariantów bez sesji robi się z jednego modelu 3D: kamera i światło zostają na miejscu, zmienia się tylko materiał, a program liczy kolejne obrazy. Każdy wariant wygląda wtedy identycznie, bo różni się wyłącznie kolorem albo wykończeniem.

Model dostaje komplet materiałów, po jednym na każdy kolor czy wykończenie z oferty, opisany kodem koloru z produkcji i sprawdzony z próbką. Scena ma ustalone kadry: zdjęcie główne, ujęcia z boku i z tyłu, zbliżenia detali. Skrypt podmienia materiał, liczy wszystkie kadry i zapisuje pliki z numerem SKU w nazwie, żeby trafiły do właściwego wariantu. Nowy kolor w ofercie oznacza dodanie materiału i ponowne przeliczenie, a nie kolejną sesję.

Rendery do galerii projektuję najpierw pod telefon. Na mojej stronie rendery słuchawek, perfum i głośnika (marki wymyśliłem na potrzeby pokazu) powstają w Blenderze ze skryptu, w którym cała scena jest zapisana w kodzie. Kadr 4:5 na pionowy ekran komponuję osobno, a nie wycinam z poziomego. Z 16-bitowych plików PNG robię potem wersje WebP o szerokości 480, 768 i 1200 pikseli, więc telefon nie pobiera 1600-pikselowego oryginału do ramki szerokiej na kilkaset pikseli.

Platformy różnie wiążą zdjęcia z wariantami. W Shopify do wariantu przypiszesz jedno zdjęcie, a pozostałe ujęcia tego koloru układasz obok siebie w galerii produktu; pokazywanie całej grupy po wyborze opcji daje aplikacja Combined Listings w planach Shopify Plus i Enterprise. WooCommerce od wersji 11.1 po wyborze wariacji podmienia całą galerię na jej zdjęcia.

Granica tej metody to wierność koloru. Ekran klienta i tak pokaże kolor po swojemu, ale render nie może odbiegać od produktu bardziej niż dobre zdjęcie. Dlatego każdy nowy materiał akceptuje osoba, która zna produkt i ma przed sobą próbkę, a nie automat. Przy tkaninach o wyraźnym splocie, jedzeniu i produktach, które klient chce zobaczyć w dłoni, uczciwie polecam łączyć rendery ze zdjęciami.

Nowy kolor w ofercie: render wariantu z istniejącego modelu, z akceptacją koloru przez osobę, która zna produkt.
  1. 01 · StartNowy kolor w ofercieProducent dodaje wariant: kod koloru, próbkę materiału i SKU z systemu sklepu.Arkusz wariantów
  2. 02 · AutomatMateriał i wszystkie kadrySkrypt podmienia materiał w scenie i liczy te same kadry co przy innych kolorach: 4:5 na telefon i 1:1 na listę.Blender
  3. 03 · CzłowiekPorównanie z próbkąOsoba, która zna produkt, porównuje render z próbką na kilku ekranach i akceptuje kolor albo zgłasza poprawkę.
  4. 04 · AutomatKompresja i nazwy po SKUObrazy dostają wersje WebP lub AVIF w kilku szerokościach i nazwy z numerem SKU, żeby trafiły do właściwego wariantu.
  5. 05 · EfektGaleria wariantu w sklepiePo wyborze koloru klient widzi spójną serię zdjęć tego wariantu, w tym samym świetle co pozostałe.

Odzyskany czasZespół zajmuje się opisami, cenami i pytaniami klientów, zamiast organizować osobną sesję zdjęciową dla każdego nowego koloru.

Obrót 360°, film czy model 3D: co wybrać do karty produktu?

Obrót 360° z klatek działa w każdej przeglądarce, film najłatwiej wstawić do galerii, a tylko model 3D pozwala obejrzeć produkt z dowolnego kąta i otworzyć AR. Wybór zależy od tego, co klient ma zobaczyć i ile telefon ma pobrać.

Obrót 360° to seria obrazów zrobionych co kilka stopni dookoła produktu: 36 klatek co 10 stopni albo 24 klatki co 15 stopni. Przy renderach nie potrzeba stołu obrotowego, bo kamera okrąża produkt w scenie, a światło nie zmienia się między klatkami. Waga obrotu to suma wszystkich klatek, więc na karcie produktu pokazujesz najpierw jedną klatkę jak zwykłe zdjęcie, a resztę pobierasz dopiero wtedy, gdy klient zacznie obracać.

Film obrotowy albo pokazujący działanie produktu najłatwiej wdrożyć, bo Shopify i WooCommerce przyjmują wideo w galerii; limity zestawiam niżej, w części o platformach. W WooCommerce ta funkcja jest jeszcze w becie, a film odtwarza się sam, bez dźwięku i w pętli, bez przycisków sterowania, dlatego dokumentacja radzi krótkie klipy. Jak przygotować sam film, opisuję w tekście o animacji 3D produktu.

Model 3D to jeden plik GLB, który telefon rysuje na żywo. Klient obraca go, przybliża i otwiera w AR, ale płaci za to pracą karty graficznej. Komponent model-viewer, którego używa się do takich podglądów, gdy karta graficzna nie nadąża, sam obniża rozdzielczość obrazu, domyślnie nawet do połowy, żeby utrzymać płynność. Domyślne mapowanie tonów w tym komponencie, Khronos PBR Neutral, dokumentacja opisuje jako zaprojektowane do wiernego oddania kolorów w e-commerce, co ważne, gdy obok modelu stoją rendery.

Moja zasada dla większości sklepów: galeria renderów zawsze, obrót 360° albo krótki film dla produktów o ciekawej bryle, a model 3D z AR dla towarów, przy których liczy się skala w pomieszczeniu. Tabela porównuje te trzy formy z perspektywy klienta i telefonu.

Obrót 360°, film i model 3D na karcie produktu: co daje klientowi, ile kosztuje telefon i kiedy go wybrać.
KryteriumObrót 360° z klatekFilm w galeriiModel 3D (GLB)
Co robi klientObraca produkt wokół jednej osi.Ogląda ujęcia w kolejności, którą ustaliłeś.Obraca, przybliża, otwiera AR.
Waga na telefonieSuma klatek, pobieranych po geście.Jeden plik, zależny od długości i jakości.Jeden plik GLB plus praca karty graficznej.
DostępnośćPrzyciski obrotu obok przeciągania.Pauza, gdy pętla rusza sama i trwa ponad 5 sekund.Opis tekstowy, klawiatura, przyciski.
Kiedy wybraćProdukt o ciekawej bryle, bez potrzeby AR.Ruch, działanie, montaż.Skala w pomieszczeniu, wiele kątów, AR.

Jak działa podgląd AR „zobacz u siebie” w sklepie internetowym?

Podgląd AR, czyli „zobacz u siebie”, otwiera model 3D produktu w aparacie telefonu i stawia go w prawdziwym pokoju klienta. Na iPhonie działa przez AR Quick Look, na Androidzie przez Scene Viewer albo WebXR, bez instalowania aplikacji.

Podstawą jest plik GLB: z niego przeglądarka rysuje model na karcie produktu, a Android otwiera go w AR przez Scene Viewer albo WebXR. AR Quick Look na iPhonie potrzebuje pliku USDZ, ale komponent model-viewer generuje go z GLB w chwili stuknięcia przycisku AR; osobny USDZ przygotowuję, gdy model ma animację, bo tej automatyczne generowanie jeszcze nie obsługuje. Dla Scene Viewera Google zaleca najwyżej 100 000 trójkątów, najlepiej od 30 000 do 50 000, tekstury do 2048 × 2048 pikseli i plik o wadze około 10 MB. Szczegóły opisałem w poradniku model 3D na stronie internetowej; tu piszę o tym, co z nich wynika dla sklepu.

W Shopify AR jest częścią obsługi modeli 3D. Shopify konwertuje wgrany model tak, żeby działał na iPhonie i Androidzie, a plik większy niż 15 MB sam optymalizuje. Wytyczne Shopify dla twórców motywów każą pokazywać przycisk „View in your space” tylko na urządzeniach obsługujących AR, czyli z iOS 13 lub nowszym albo Androidem 9 lub nowszym, i umieszczać go pod głównym zdjęciem produktu.

We własnym sklepie decydujesz o szczegółach, które w AR mają znaczenie handlowe. W komponencie model-viewer atrybut ar-scale domyślnie pozwala klientowi zmieniać rozmiar modelu gestem szczypania, a wartość fixed trzyma go w skali 100 procent. Przy meblach i lampach ustawiam fixed, bo klient sprawdza właśnie, czy produkt się zmieści. Atrybut ar-placement="wall" stawia model na ścianie zamiast na podłodze, co przydaje się przy lustrach, kinkietach i obrazach. Wymiary modelu sprawdzam metodą getDimensions(), która podaje rozmiar w metrach, i porównuję z kartą produktu.

AR pomaga najbardziej tam, gdzie niepewność klienta jest największa. Yong-Chin Tan, Sandeep R. Chandukala i Srinivas K. Reddy w artykule opublikowanym w Journal of Marketing przeanalizowali dane międzynarodowego sprzedawcy kosmetyków i stwierdzili, że korzystanie z AR w jego aplikacji mobilnej wiązało się z wyższą sprzedażą przede wszystkim przy mniej popularnych markach, produktach o węższym gronie odbiorców i droższych produktach, a silniej u klientów nowych w kanale online albo w danej kategorii. W podsumowaniu dla dydaktyków na stronie American Marketing Association autorzy piszą, że ogólny efekt wydaje się niewielki.

Wniosek dla sklepu: AR warto dodać do mebli, oświetlenia, wyposażenia wnętrz i droższego sprzętu o ważnych wymiarach, a nie do wszystkiego. Przy tanich drobiazgach i odzieży model na podłodze niewiele mówi.

Kiedy sklep potrzebuje konfiguratora 3D, a kiedy wystarczą warianty?

Warianty wystarczą, dopóki lista kombinacji jest skończona i każda ma swój numer SKU. Konfigurator 3D jest potrzebny, gdy klient składa produkt z wielu opcji, wymiarów lub personalizacji, a cena zależy od jego wyboru.

Zmiana koloru w podglądzie 3D nie wymaga konfiguratora. Rozszerzenie glTF KHR_materials_variants, zatwierdzone przez Khronos Group, zapisuje w jednym pliku GLB kilka gotowych wersji materiałów, przygotowanych do szybkiego przełączania w czasie wyświetlania. Specyfikacja podaje jako typowy przykład handel internetowy, w którym każdy wariant może odpowiadać osobnemu SKU, i wprost zaznacza, że obsługa konfiguratorów nie jest jej celem. Blender tworzy takie warianty w swoim dodatku glTF, a model-viewer przełącza je atrybutem variant-name.

Sygnałem, że warianty przestają wystarczać, jest liczba kombinacji. W WooCommerce przy produkcie, który ma więcej niż 30 wariacji, listy wyboru na stronie przestają się dynamicznie zawężać: klient widzi także niedostępne kombinacje i dowiaduje się o tym dopiero po wyborze. Przy produktach na wymiar, z dziesiątkami opcji albo z dopłatami zależnymi od kilku wyborów naraz lepiej sprawdza się konfigurator, w którym cenę liczy serwer.

Kiedy konfigurator się opłaca, jak go połączyć z koszykiem i od czego zależy jego koszt, opisuję w poradniku konfigurator 3D produktu. Tabela poniżej to skrót tej decyzji.

Warianty, model z wariantami materiałów czy konfigurator: decyzja dla typowych sytuacji w sklepie.
SytuacjaRozwiązanie
Kilka kolorów, każdy z własnym SKURendery wariantów w galerii; opcjonalnie jeden plik GLB z wariantami materiałów.
Kolor i rozmiar, kilkanaście kombinacjiWarianty sklepu, zdjęcia na każdy kolor, a nie na każdą kombinację.
Ponad 30 wariacji w WooCommerceSprawdź, czy klient nie gubi się w listach; to pierwszy sygnał, że warto pomyśleć o konfiguratorze.
Wymiary na zamówienie, dopłaty za opcjeKonfigurator 3D z ceną liczoną po stronie serwera.

Jak wizualizacje 3D wpływają na szybkość sklepu na telefonie?

Wizualizacje 3D spowalniają sklep tylko wtedy, gdy telefon musi je pobrać, zanim pokaże to, czego klient potrzebuje od razu. Obrazy WebP i AVIF ważą mniej niż JPEG-i o podobnej jakości, a model 3D i obrót 360° powinny czekać na gest klienta.

Miarą są Core Web Vitals. Według web.dev dobry wynik to LCP do 2,5 sekundy, INP do 200 milisekund i CLS do 0,1, sprawdzane na 75. percentylu wizyt, osobno dla telefonów i komputerów. Dane z prawdziwych wizyt zbiera Chrome User Experience Report, z którego korzystają PageSpeed Insights i raport Core Web Vitals w Google Search Console. Lighthouse w testach laboratoryjnych zamiast INP podaje Total Blocking Time, więc rozstrzygają dane z wizyt klientów.

Zdjęcia to zwykle najcięższa część strony: web.dev, za HTTP Archive, podaje, że na 90. percentylu strony wysyłają ponad 5 MB obrazów, zarówno na komputerach, jak i na telefonach. MDN podaje, że stratny WebP jest średnio o 25 do 35 procent mniejszy od JPEG-a o podobnej jakości, a stratny AVIF około o połowę. AVIF działa w Chrome, Edge, Operze, Safari i Firefoksie, ale nie wyświetla się stopniowo, więc obok niego warto dać wersję zapasową w elemencie <picture>. Render ma tu przewagę nad zdjęciem: eksportujesz go od razu w potrzebnym formacie i szerokości z bezstratnego pliku źródłowego, zamiast ponownie kompresować JPEG z aparatu.

Na platformach część pracy robi się sama. Shopify sam wybiera format obrazu, który obsługuje przeglądarka klienta, a WordPress od wersji 6.5 przyjmuje pliki AVIF, o ile obsługuje je biblioteka graficzna serwera; sprawdzisz to w menu Narzędzia, Kondycja witryny, zakładka Informacje, sekcja obsługi mediów.

Głównego zdjęcia produktu, które na karcie produktu często jest elementem LCP, nigdy nie ładuj leniwie; web.dev zaleca loading="lazy" tylko dla obrazów poza pierwszym ekranem. Każdy obraz ma mieć atrybuty width i height, żeby przeglądarka zarezerwowała miejsce i nic nie skakało. Chrome pobiera leniwe obrazy, gdy są około 1250 pikseli od widocznego obszaru przy szybkim połączeniu i 2500 pikseli przy wolniejszym.

Model 3D i obrót 360° ładuj po geście klienta, a w ich miejscu pokaż zwykły obraz o tych samych proporcjach co przeglądarka 3D, żeby po załadowaniu nic się nie przesunęło. Wytyczne Shopify dla motywów idą w tę samą stronę: na telefonach i tabletach wszystkie media mają startować nieaktywne, dopóki klient sam ich nie uruchomi. Im mniej skryptów startuje przy wejściu na kartę produktu, tym mniej z nich może opóźnić reakcję na dotknięcie przycisku „Dodaj do koszyka”.

Core Web Vitals według web.dev i elementy 3D, które najczęściej je psują.
WskaźnikCo mierzyDobry wynikCo psuje 3D w sklepie
LCPCzas wyświetlenia największego elementu pierwszego ekranu.Do 2,5 sLeniwe ładowanie głównego zdjęcia, ciężki obraz zastępczy modelu.
INPCzas reakcji strony na dotknięcie lub kliknięcie.Do 200 msSkrypty przeglądarki 3D i obrotu 360° uruchamiane od razu.
CLSPrzesunięcia elementów podczas ładowania.Do 0,1Obrazy bez wymiarów, przeglądarka 3D bez zarezerwowanego miejsca.

Czy Shopify i WooCommerce obsługują modele 3D i AR?

Shopify obsługuje modele 3D i podgląd AR natywnie jako media produktu, a WooCommerce w swoim rdzeniu nie: model 3D dodaje się tam wtyczką albo własnym kodem szablonu.

W Shopify model wgrywasz jak zdjęcie, ale motyw musi umieć go wyświetlić: według pomocy Shopify potrafią to wszystkie motywy Online Store 2.0 przygotowane przez Shopify i rodzina motywów Horizon, a przy motywach innych twórców sprawdź ich dokumentację. Modelu 3D nie przypiszesz do wariantu, więc przełączanie koloru w podglądzie 3D razem z wyborem wariantu to praca dla programisty motywu.

W WooCommerce dokumentacja galerii produktu opisuje zdjęcia i, od wersji 11.1, wideo w becie. Modelu 3D w niej nie ma, więc potrzebna jest wtyczka. Przykładem z katalogu WordPress.org jest 3D Viewer: w wersji bezpłatnej dodaje model do karty produktu WooCommerce, ładuje go dopiero, gdy jest widoczny, i włącza AR przez WebXR, Scene Viewer i Quick Look. Kilka modeli na produkt, osobne modele dla wariacji oraz obraz zastępczy wyświetlany w czasie ładowania modelu są w wersji Pro. Dlatego taką wtyczkę zawsze testuję na telefonie przed wdrożeniem.

Obsługi 3D na Shoperze, IdoSellu czy PrestaShopie w tym poradniku nie sprawdzałem, więc nie zgaduję. Zapytaj dostawcę, czy galeria przyjmuje pliki GLB, a jeśli nie, czy szablon pozwala na własny kod, w którym model osadza się komponentem model-viewer. Jeśli dopiero wybierasz platformę, porównanie znajdziesz w tekście Shopify czy WooCommerce.

Media produktu w Shopify i WooCommerce według dokumentacji obu platform.
FunkcjaShopifyWooCommerce
Model 3D w galeriiTak: GLB lub USDZ do 500 MB; plik ponad 15 MB Shopify sam optymalizuje.Nie w rdzeniu; wtyczka, na przykład 3D Viewer, albo własny kod szablonu.
Podgląd ARTak, w motywach z obsługą 3D, przycisk „View in your space”.We wtyczce 3D Viewer już w wersji bezpłatnej.
Zdjęcia wariantuJedno zdjęcie na wariant, bez modelu 3D i wideo.Zdjęcie główne, a od wersji 11.1 cała galeria na wariację.
Wideo w galeriiMP4, MOV, WebM do 10 minut, 1 GB i 4K albo YouTube i Vimeo.Od wersji 11.1 w becie, domyślnie wyłączone, bez sterowania.
Obrót 360°Nie ma takiego typu mediów; potrzebny kod motywu albo aplikacja.Brak w rdzeniu; potrzebna wtyczka albo własny kod.
Formaty zdjęćMiędzy innymi PNG, JPEG i WebP; format dla przeglądarki Shopify wybiera sam.AVIF od WordPressa 6.5, jeśli obsługuje go serwer.
Rozmiar zdjęćDo 5000 × 5000 pikseli i 20 MB; kwadrat 2048 × 2048 pikseli zwykle wygląda najlepiej.Dokumentacja zaleca co najmniej 800 × 800 pikseli.

Jak zrobić dostępne wizualizacje 3D w sklepie internetowym?

Dostępna wizualizacja 3D ma opis tekstowy, da się ją obsłużyć klawiaturą i przyciskami bez przeciągania, nie porusza się sama bez możliwości zatrzymania, a wymiary, materiały i kolory produktu są też w treści strony.

Polski Akt o Dostępności od 28 czerwca 2025 r. obejmuje usługi handlu elektronicznego, czyli także sklepy internetowe, ale nie stosuje się do usług oferowanych przez mikroprzedsiębiorców. Kogo dokładnie obejmuje, jakie normy go wypełniają i co grozi za braki, opisałem w poradniku o dostępności sklepu internetowego. Nawet bez tego obowiązku przyciski obrotu i opis produktu pomagają każdemu, kto ogląda sklep jedną ręką w tramwaju.

Interaktywny podgląd 3D dotyka kilku kryteriów WCAG 2.2, które przy zwykłej galerii zdjęć rzadko wychodzą. Najważniejsze jest kryterium 2.5.7, nowe w wersji 2.2: funkcję wykonywaną przeciąganiem musi dać się wykonać pojedynczym wskaźnikiem bez przeciągania. Sama obsługa klawiaturą tu nie wystarcza, bo kryterium mówi o pojedynczym wskaźniku, czyli palcu albo myszy. Dla modelu produktu oznacza to widoczne przyciski „obróć w lewo”, „obróć w prawo”, „przybliż” i „oddal”, które działają zwykłym dotknięciem.

Wytyczne Shopify dla twórców motywów dodają szczegóły: przeglądarka 3D startuje nieaktywna, da się nią sterować samą klawiaturą, ma przyciski z etykietami, widoczny fokus i opis każdego widoku, a zmianę stanu ogłasza czytnikowi ekranu region ARIA live. Komponent model-viewer ma atrybut alt i atrybut a11y na opisy kolejnych widoków, a jego domyślna podpowiedź mówi o obsłudze myszą, dotykiem i strzałkami.

Kryteria WCAG 2.2, które dotyczą wizualizacji 3D, obrotu 360° i filmu na karcie produktu.
Kryterium WCAG 2.2PoziomCo oznacza dla 3D w sklepie
1.1.1 Treść nietekstowaAModel, obrót i render mają tekst alternatywny opisujący produkt, a przyciski sterowania mają nazwy.
2.1.1 KlawiaturaAObrót i przybliżenie działają z klawiatury.
2.2.2 Pauza, zatrzymanie, ukrycieAAutoobrót albo pętla, która rusza sama, trwa ponad 5 sekund i stoi obok innej treści, ma sposób na zatrzymanie.
2.3.3 Animacja wywołana interakcjąAAARuch wywołany interakcją da się wyłączyć; uszanuj systemowe ustawienie ograniczenia ruchu.
2.5.1 Gesty wskaźnikaAPrzybliżanie dwoma palcami ma odpowiednik jednym palcem, na przykład przyciski plus i minus.
2.5.7 Ruchy przeciąganiaAAObrót przeciąganiem ma odpowiednik bez przeciągania, na przykład przyciski obrotu.
2.5.8 Rozmiar celu (minimum)AAPrzyciski sterowania mają co najmniej 24 × 24 piksele CSS, z wyjątkami opisanymi w kryterium.

Jak sprawdzić, czy 3D w sklepie się opłaca?

Opłacalność 3D sprawdzisz tylko na własnych danych: porównując podobne produkty z wizualizacjami i bez nich, w tym samym okresie, osobno na telefonie i komputerze. Liczby z materiałów firm sprzedających 3D nie przenoszą się na Twój sklep.

Najczęściej cytowana liczba pochodzi od Shopify. W notce z 11 maja 2022 r., zapowiadającej podgląd 3D i AR w aplikacji Shop, Shopify napisał, że sprzedawcy, którzy dodają treści 3D, notują średnio 94 procent wzrostu konwersji. Notka nie opisuje metody, a sklepy, które inwestują w 3D, mogą różnić się od innych także zdjęciami, opisami i reklamami, więc nie traktuję tej liczby jako prognozy dla konkretnego sklepu. Opisane wyżej badanie Tana, Chandukali i Reddy’ego pokazuje efekt zależny od produktu. Liczb o spadku zwrotów nie podaję, bo w materiałach, które sprawdziłem, pochodziły od firm sprzedających usługi 3D, bez opisanej metody.

Zwroty mierz ostrożnie. Konsument, który kupił na odległość, może według art. 27 ust. 1 ustawy o prawach konsumenta odstąpić od umowy w ciągu 14 dni bez podawania przyczyny, więc pole „powód zwrotu” wypełnia tylko część klientów. Do tego zwroty z powodu rozmiaru czy uszkodzenia w transporcie nie mają z wizualizacjami nic wspólnego. Patrz więc na zwroty z podanym powodem typu „wygląda inaczej”, na pytania do obsługi o kolor, wymiary i tył produktu oraz na reklamacje, w których klient powołuje się na wizualizację; te ostatnie są sygnałem, że render jest mniej wierny, niż powinien.

Trzeci pomiar to samo użycie. Jeśli z modelu 3D korzysta mało osób, nie może on mocno zmienić sprzedaży, więc warto wiedzieć, ilu klientów go obraca i otwiera AR. Komponent model-viewer wysyła zdarzenie camera-change z informacją, czy ruch wykonał klient, a zdarzenie ar-status raportuje sesje WebXR na Androidzie; start AR Quick Look na iPhonie najprościej policzyć jako kliknięcie własnego przycisku AR. Kod poniżej dokłada pomiar Core Web Vitals biblioteką web-vitals, którą poleca web.dev.

  1. Wybierz dwie podobne grupy produktówNa przykład produkty, o których wygląd klienci pytają najczęściej. Jedna grupa dostaje 3D, druga zostaje bez zmian.
  2. Zmierz punkt wyjściaPrzez kilka tygodni zapisz dla obu grup dodania do koszyka, konwersję, zwroty z podanym powodem, pytania do obsługi i Core Web Vitals na telefonie.
  3. Wprowadź tylko jedną zmianęNie zmieniaj w tym czasie cen, reklam ani opisów, bo nie odróżnisz efektu wizualizacji od efektu promocji.
  4. Mierz użycie wizualizacjiPolicz obroty modelu, starty AR i kliknięcia w obrót 360°, osobno dla telefonów i komputerów.
  5. Porównaj grupy w tym samym okresieGrupa bez 3D pokazuje wpływ sezonu, wyprzedaży i zmian w ruchu z reklam.
  6. Zdecyduj na podstawie wynikówWłaściciel sklepu decyduje, czy rozszerzyć 3D na kolejne produkty, poprawić wdrożenie, czy zostać przy renderach w galerii.
Pomiar na karcie produktu: obrót modelu przez klienta, start sesji AR i Core Web Vitals, wysyłane do własnego punktu analityki
import { onCLS, onINP, onLCP } from 'web-vitals';

const viewer = document.querySelector<HTMLElement>('model-viewer');
const sku = viewer?.dataset.sku ?? 'brak';
const device = matchMedia('(pointer: coarse)').matches ? 'telefon' : 'komputer';
let rotated = false;

function send(name: string, data: Record<string, unknown>) {
  const body = JSON.stringify({ name, sku, device, ...data });
  // sendBeacon nie blokuje strony i działa także przy jej zamykaniu
  if (!navigator.sendBeacon('/analytics', body)) {
    void fetch('/analytics', { body, method: 'POST', keepalive: true });
  }
}

// Pierwszy obrót wykonany przez klienta, nie przez autoobrót
viewer?.addEventListener('camera-change', (event) => {
  const { source } = (event as CustomEvent<{ source: string }>).detail;
  if (!rotated && source === 'user-interaction') {
    rotated = true;
    send('model_3d_obrot', {});
  }
});

// Sesje WebXR (Android); 'failed' przychodzi przy każdej nieudanej próbie AR
viewer?.addEventListener('ar-status', (event) => {
  const { status } = (event as CustomEvent<{ status: string }>).detail;
  if (status === 'session-started') send('ar_start', {});
  if (status === 'failed') send('ar_blad', {});
});

// AR Quick Look na iPhonie: liczymy kliknięcie własnego przycisku AR
document.querySelector('[slot="ar-button"]')?.addEventListener('click', () => send('ar_klik', {}));

// Core Web Vitals z prawdziwych wizyt, ten sam podział na telefon i komputer
onLCP((metric) => send('cwv', { metric: metric.name, value: metric.value }));
onINP((metric) => send('cwv', { metric: metric.name, value: metric.value }));
onCLS((metric) => send('cwv', { metric: metric.name, value: metric.value }));

Od czego zacząć 3D w sklepie i co mi przesłać?

Zacznij od renderów wariantów dla produktów, o których wygląd klienci pytają najczęściej, a model 3D i AR dodaj tam, gdzie liczy się skala. Konfigurator zostaw na moment, w którym kombinacji robi się za dużo na zwykłe warianty.

Kolejność, którą polecam: galeria renderów pod telefon, potem obrót 360° albo model 3D dla kilku produktów z największą sprzedażą lub liczbą pytań, następnie AR tam, gdzie klient sprawdza wymiary, a na końcu, jeśli w ogóle, konfigurator. Są też sytuacje, w których odradzam 3D: tani, prosty produkt dobrze sfotografowany w kilku ujęciach albo sklep, który już dziś ładuje się na telefonie zbyt wolno. Wtedy najpierw poprawiamy szybkość, a dopiero potem dokładamy wizualizacje.

W ramach usługi wizualizacji 3D produktów przygotowuję model, rendery pod Twoją galerię, plik GLB i w razie potrzeby USDZ, a także wdrożenie w Shopify, WooCommerce albo we własnym sklepie, który buduję w ramach usługi strony internetowe i sklepy. Od czego zależy cena samej wizualizacji, rozpisuję w tekście ile kosztuje wizualizacja 3D produktu.

Jeśli chcesz sprawdzić, które produkty w Twoim sklepie zyskają na 3D, napisz mi, na jakiej platformie działa sklep, które produkty i ile wariantów chcesz pokazać, jakie pliki masz (CAD, rysunki, zdjęcia, próbki materiałów) i o co klienci najczęściej pytają przed zakupem. Odpowiadam w ciągu jednego dnia roboczego i uczciwie powiem, jeśli lepiej wyjdą dobre zdjęcia. Pracuję z Mikołowa, zdalnie w całej Polsce.

Pytania i odpowiedzi

Czy wizualizacje 3D zwiększają sprzedaż w sklepie internetowym?

Wizualizacje 3D mogą zwiększyć sprzedaż, ale efekt 3D w e-commerce zależy od produktu i trzeba go zmierzyć samemu. Shopify w 2022 r. podał średnio 94 procent wzrostu konwersji u sprzedawców dodających 3D, bez opisu metody. Badanie opublikowane w Journal of Marketing wykazało, że korzystanie z AR wiązało się z wyższą sprzedażą głównie przy mniej popularnych markach, niszowych i droższych produktach.

Czy model 3D spowolni sklep internetowy na telefonie?

Model 3D zwykle nie pogorszy szybkości sklepu, jeśli na start pokażesz zwykły obraz, a sam model pobierzesz dopiero po geście klienta. Przeglądarce 3D zarezerwuj miejsce o stałych proporcjach, żeby układ nie skakał. Efekt sprawdzisz w danych z prawdziwych wizyt, na przykład w raporcie Core Web Vitals w Google Search Console.

Czy Shopify obsługuje modele 3D produktów?

Tak, Shopify przyjmuje modele 3D w formatach GLB i USDZ do 500 MB jako media produktu i pokazuje je razem z podglądem AR, o ile motyw sklepu obsługuje 3D. Modelu 3D nie da się jednak przypisać do wariantu produktu.

Jak dodać model 3D do sklepu na WooCommerce?

WooCommerce nie ma obsługi modeli 3D w rdzeniu, więc model dodaje się wtyczką albo własnym kodem szablonu. Na przykład wtyczka 3D Viewer z katalogu WordPress.org w wersji bezpłatnej dodaje model do karty produktu i włącza AR, a kilka modeli na produkt i modele dla wariacji ma w wersji Pro.

Czym się różni obrót 360° od modelu 3D w sklepie?

Obrót 360° to seria gotowych obrazów zrobionych dookoła produktu, więc klient obraca go tylko wokół jednej osi i nie otworzy AR. Model 3D to jeden plik GLB rysowany na żywo przez telefon, który można obracać w każdą stronę, przybliżać i postawić w pokoju przez AR.

Czy można zrobić zdjęcia wszystkich kolorów produktu bez sesji zdjęciowej?

Tak, z jednego modelu 3D powstają zdjęcia wszystkich kolorów i wykończeń w identycznym świetle i kadrze, bo zmienia się tylko materiał. Kolor każdego wariantu powinna zaakceptować osoba, która porównuje render z fizyczną próbką. Przy tkaninach o wyraźnym splocie i produktach pokazywanych w użyciu warto łączyć rendery ze zdjęciami.

Jaki format zdjęć produktu wybrać do sklepu: AVIF, WebP czy JPEG?

Według MDN stratny WebP jest średnio o 25 do 35 procent mniejszy od JPEG-a o podobnej jakości, a stratny AVIF około o połowę. AVIF nie wyświetla się stopniowo, dlatego obok niego warto dać wersję WebP lub JPEG. Shopify dobiera format sam, a WordPress przyjmuje AVIF od wersji 6.5, jeśli obsługuje go serwer.

Czy wizualizacje 3D w sklepie muszą spełniać WCAG?

Polski Akt o Dostępności obejmuje sklepy internetowe jako usługi handlu elektronicznego, ale nie stosuje się do usług mikroprzedsiębiorców. Jeśli sklep podlega ustawie, warto zadbać, żeby także podgląd 3D spełniał kryteria WCAG 2.2: tekst alternatywny, obsługę klawiaturą, pauzę dla ruchu i kryterium 2.5.7, które wymaga obrotu bez przeciągania, na przykład przyciskami.

Czy klient może zwrócić towar, jeśli wyglądał inaczej niż na wizualizacji?

Konsument kupujący na odległość może odstąpić od umowy w ciągu 14 dni bez podawania przyczyny, zgodnie z art. 27 ust. 1 ustawy o prawach konsumenta, niezależnie od tego, czy oglądał render, czy zdjęcie. Wizualizacja musi wiernie pokazywać kolor, skalę i wyposażenie produktu, bo inaczej oprócz zwrotów pojawią się reklamacje.

Źródła

Liczby i terminy w tym przewodniku sprawdziłem w oficjalnych źródłach. Ceny i przepisy się zmieniają, więc przy decyzji warto zajrzeć do nich ponownie.

Masz pytanie do swojego projektu?

Opisz, co chcesz osiągnąć. Odpowiem konkretnie, także wtedy, gdy najlepszą odpowiedzią jest „nie rób tego”.

Jonasz Jankowski · Bezpośrednia współpraca · Mikołów (Śląsk), zdalnie w całej Polsce

CO DALEJ PO WYSŁANIU
  1. Odpowiadam osobiście w ciągu jednego dnia roboczego.
  2. Krótka rozmowa o celu, funkcjach, materiałach i integracjach.
  3. Dostajesz zakres z etapami i konkretną kwotę, zanim cokolwiek zaczniemy.

Pola oznaczone jako opcjonalne możesz pominąć. Odpowiadam na każdą wiadomość.

Minimum 20 znaków. Wystarczy zalążek pomysłu.0/5000

Na podany e-mail otrzymasz potwierdzenie z numerem zapytania. Odpowiadam w ciągu jednego dnia roboczego. Dalszą rozmowę możemy prowadzić w tym samym wątku.