Dlaczego klienci nie kupują – i co z tym zrobić?
Jedną z największych barier zakupowych w e-commerce jest brak możliwości „przymierzenia" produktu. W przypadku fizycznych sklepów klient może wziąć obraz do ręki, przyłożyć go do ściany, poczuć proporcje. W sklepie internetowym ma do dyspozycji jedno zdjęcie na białym tle i wyobraźnię. Badania Nielsen Norman Group pokazują, że 56% klientów rezygnuje z zakupu, ponieważ nie jest w stanie wyobrazić sobie produktu w swoim otoczeniu. Dla kategorii takich jak meble, dekoracje czy dzieła sztuki problem ten jest szczególnie dotkliwy. Odpowiedzią jest wizualizacja kontekstowa – narzędzie, które pokazuje produkt tam, gdzie docelowo wyląduje: na ścianie salonu, w biurze, we wnętrzu o konkretnym klimacie. W tym case study opisujemy, jak zbudowaliśmy takie rozwiązanie od podstaw jako dedykowaną wtyczkę WordPress dla sklepu z obrazami adrapaintings.com.
Mockup Generator na stronie głównej – klient widzi obraz na ścianie już w pierwszych sekundach wizyty
Wyzwanie biznesowe
Klientka prowadzi sklep z oryginalnymi obrazami – 18 prac w 6 kolekcjach, dostępnych jako oryginały i płótna w kilkunastu rozmiarach (łącznie 342 warianty w WooCommerce). Problem był prosty: klienci mieli trudność z oceną, jak obraz będzie wyglądał na ich ścianie. Zdjęcia produktowe na białym tle nie dawały wystarczającego kontekstu. Potrzebowaliśmy narzędzia, które automatycznie generuje realistyczne wizualizacje – dla każdego obrazu, każdego rozmiaru, w różnych wnętrzach – bez konieczności ręcznego tworzenia setek mockupów w Photoshopie.
Architektura rozwiązania – wtyczka WordPress z silnikiem Imagick
Zdecydowaliśmy się na budowę dedykowanej wtyczki WordPress zamiast integracji z zewnętrznym SaaS. Powody były trzy: pełna kontrola nad danymi klientów, brak miesięcznych opłat abonamentowych i głęboka integracja z istniejącym sklepem WooCommerce. Wtyczka działa w oparciu o cztery warstwy:Silnik generowania (PHP + Imagick)
Serwer pobiera zdjęcie obrazu, przeskalowuje je do odpowiednich wymiarów w pikselach i nakłada na template wnętrza z precyzyjnie skalibrowanymi współrzędnymi centrum i skalą pikseli/cm.
REST API (WordPress REST)
Cztery publiczne endpointy: upload zdjęcia użytkownika, generowanie mockupu, zapis e-maila i pobieranie listy szablonów oraz produktów. Każdy endpoint chroniony rate limitingiem per IP.
Frontend (jQuery + Fetch API)
Interfejs oparty na shortcode'ach WordPress. Generowanie odbywa się asynchronicznie – użytkownik nie czeka na przeładowanie strony. Podgląd renderowany przez Blob URL bez zapisu w DOM.
Integracja WooCommerce
Wtyczka czyta dane produktów bezpośrednio z WooCommerce – kolekcje, warianty, dostępne rozmiary. Panel admina umożliwia przypisanie zdjęcia oryginalnego (nie mockupu) do każdego produktu z osobna.
Panel administracyjny – pełna kontrola bez dotykania kodu
Jednym z kluczowych założeń projektu było to, żeby klientka mogła samodzielnie zarządzać aplikacją bez technicznej wiedzy. Panel administracyjny wtyczki składa się z trzech sekcji dostępnych bezpośrednio z menu WordPress:
Panel administracyjny – przypisywanie oryginalnych zdjęć prac do produktów i eksport zebranych adresów e-mail
Trzy sekcje wtyczki w menu WordPress: ustawienia główne, zdjęcia prac i baza e-maili
W panelu admina dostępne są trzy sekcje: Mockup Generator (ustawienia ogólne i zarządzanie szablonami wnętrz), Paintings Photos (przypisywanie oryginalnych zdjęć prac do konkretnych produktów i wariantów WooCommerce) oraz Email Leads (przeglądanie i eksport bazy maili zebranych przez email gate). Żadna z tych operacji nie wymaga edycji kodu – wszystko odbywa się przez interfejs WordPress.Ważna decyzja projektowa: W panelu admina klientka przypisuje oryginalne zdjęcia prac – nie mockupy ani featured images WooCommerce. Dzięki temu aplikacja generuje mockupy z czystego, nieskażonego zdjęcia oryginalnego, a nie z już przetworzonego wizerunku produktowego.
5 szablonów wnętrz – kalibracja piksel po pikselu
Sama technologia compositing to jedno. Kluczem do realistycznego efektu jest precyzja: obraz musi pojawiać się we właściwym miejscu na zdjęciu wnętrza, w skali odpowiadającej rzeczywistości. Dla każdego z 5 szablonów określiliśmy ręcznie:- Współrzędne centrum – dokładny punkt na zdjęciu, wokół którego centruje się obraz
- Maksymalne wymiary obszaru – ograniczenie, żeby obraz nie wychodził poza ścianę
- Przelicznik piksele/cm – ile pikseli odpowiada jednemu centymetrowi w danej perspektywie
Trzy tryby działania aplikacji
Wtyczka obsługuje różne konteksty strony za pomocą trzech dedykowanych trybów uruchamianych shortcode'ami WordPress:Tryb katalogowy [mockup_catalog] – strona główna
Siatka wszystkich 18 obrazów z kolekcji, automatyczne generowanie przy wejściu na stronę, pełna swoboda wyboru wnętrza i rozmiaru. Klient w pierwszych sekundach wizyty widzi gotowy mockup bez żadnej interakcji.
Tryb produktowy [mockup_product] – strona produktu WooCommerce
Automatycznie wykrywa ID produktu i pokazuje tylko jego warianty. Klient na stronie konkretnej pracy od razu widzi ją w różnych rozmiarach i wnętrzach – bez konieczności szukania w katalogu.
Tryb generatora [mockup_generator] – upload własnego pliku
Klient wgrywa własne zdjęcie i widzi je w dowolnym wnętrzu. Dodatkowa funkcja angażująca użytkowników i wydłużająca czas spędzony na stronie.
Tryb produktowy na stronie WooCommerce – wizualizacja automatycznie dopasowana do wybranego rozmiaru płótna
Email gate – zbieranie leadów przy każdym pobraniu
Sam mockup to narzędzie sprzedażowe. Ale wtyczka robi coś więcej: zamienia zainteresowanie w lead. Klient widzi podgląd z dyskretnym znakiem wodnym. Żeby pobrać pełną wersję w wysokiej rozdzielczości – musi podać adres e-mail. Dostaje wtedy automatyczny e-mail z linkiem do pobrania, ostylowanym pod identyfikację wizualną marki.Dlaczego to działa: Klient, który pobrał mockup z własnym obrazem na ścianie, jest już emocjonalnie zaangażowany. Ma plik na dysku. Wraca do niego. Pokazuje znajomym. A do tego jest w bazie e-mailowej z informacją, który obraz go zainteresował – gotowy do retargetingu.
- Klient wpisuje e-mail i klika „Download full resolution"
- System generuje unikalny 64-znakowy token kryptograficzny (nie wygasający link jak w standardowych nonce'ach WordPress)
- Na skrzynkę trafia e-mail z jednorazowym linkiem do pobrania, ostylowany pod markę klientki
- Adres e-mail zapisuje się w bazie danych wtyczki z informacją o pobranym mockupie
- Wszystkie zebrane maile są eksportowalne z panelu admina do CSV
Automatyczny e-mail z linkiem do pobrania – ostylowany pod identyfikację marki, z przyciskiem CTA w stylu strony
Bezpieczeństwo – bo każda aplikacja przyjmująca pliki to potencjalny wektor ataku
Przy projektach e-commerce bezpieczeństwo to nie opcja. Po zakończeniu implementacji przeprowadziliśmy pełny security review i usunęliśmy wszystkie zidentyfikowane podatności:Zagrożenia zneutralizowane
- Weryfikacja MIME po stronie serwera (finfo_file) zamiast nagłówka klienta – eliminuje upload przebranych plików PHP
- Blokada wykonywania PHP w folderze uploadów przez .htaccess
- Rate limiting per IP – upload: 10/min, generowanie: 20/min, e-mail: 5/5 min
- Path traversal sandbox – uniemożliwia odczyt plików spoza katalogu uploadów
- XSS w handlerach błędów JS – .text() zamiast .html()
Mechanizmy ochronne
- Token 64-znakowy (bin2hex random_bytes) dla linków downloadowych – nie wygasa jak standardowe WP nonce'y
- Walidacja obrazów przez getimagesize() – odrzuca pliki podszywające się pod JPG/PNG
- Brak logowania danych wrażliwych w error_log produkcyjnym
- Sanityzacja wszystkich danych wejściowych REST API
- Automatyczne tworzenie .htaccess przy aktywacji i aktualizacji wtyczki
Wydajność – cache i asynchroniczne generowanie
Przy 342 wariantach WooCommerce i dynamicznym generowaniu danych produktów wydajność była kluczowym aspektem projektu. Zaimplementowaliśmy trzy mechanizmy optymalizacyjne:Cache kolekcji w transientach WordPress – lista 342 wariantów produktowych jest buforowana i odświeżana tylko przy zmianie danych produktu, nie przy każdym żądaniu
Blob URL dla podglądu – wygenerowany mockup trafia do przeglądarki jako binarny blob, nie jest zapisywany na serwerze jako plik tymczasowy ani eksponowany jako URL w DOM
Równoległe AJAX ($.Deferred + $.when) – dane szablonów i kolekcji pobierane jednocześnie, generowanie startuje dopiero gdy oba są gotowe – bez zbędnego czekania w kolejce
Wpływ na sprzedaż – co mówią dane
Narzędzia do wizualizacji produktów to jeden z najlepiej udokumentowanych sposobów na zwiększenie konwersji w e-commerce. Liczby z badań rynkowych mówią same za siebie:Jak wizualizacja wpływa na decyzje zakupowe
+40%
wyższy współczynnik konwersji przy produktach z wizualizacją kontekstową (Shopify, 2023)
–25%
mniej zwrotów przy zakupach wspieranych wizualizacją (raport IKEA Digital)
3×
dłuższy czas spędzony na stronie produktu z interaktywnym narzędziem wizualizacyjnym
Potencjalne rozszerzenia systemu
Wtyczka jest zbudowana modularnie, co otwiera drogę do dalszego rozwoju bez przepisywania architektury:Integracja z e-mail marketingiem
Leady z email gate trafiają do Mailchimp lub Klaviyo z tagiem konkretnego obrazu. Automatyczne przypomnienie po 3 dniach z linkiem do produktu, który klient wizualizował.
Więcej szablonów wnętrz
System szablonów oparty na PNG + konfiguracji. Dodanie nowego wnętrza to wgranie zdjęcia przez panel admina i kalibracja parametrów – bez zmian w kodzie aplikacji.
AR / WebAR
Rozszerzenie o tryb rzeczywistości rozszerzonej – klient nakierowuje kamerę telefonu na ścianę i widzi obraz w skali 1:1 w swoim rzeczywistym wnętrzu. Model A-Frame lub WebXR jako warstwa frontendowa.
Eksport do mediów społecznościowych
Przycisk „Udostępnij na Instagram" generujący wersję mockupu w formacie 1:1 lub 9:16, gotową do Stories. Dodatkowy kanał organicznego zasięgu bez budżetu reklamowego.
Podsumowanie
Aplikacja do wizualizacji produktów to inwestycja, która zwraca się wielokrotnie: skraca ścieżkę decyzyjną klienta, redukuje liczbę zwrotów i jednocześnie zbiera wartościowe dane kontaktowe. Dla sklepów w kategoriach, gdzie „przymierzenie" produktu jest kluczowe – sztuka, meble, dekoracje, oświetlenie – to narzędzie, które powinno być standardem, nie wyróżnikiem. Opisana wtyczka to rozwiązanie szyte na miarę: zintegrowane z istniejącym sklepem WooCommerce, bez zewnętrznych zależności i miesięcznych abonamentów, z pełną kontrolą nad danymi klientów i możliwością rozbudowy w każdym kierunku.Masz sklep i chcesz podobne rozwiązanie?
Budujemy dedykowane narzędzia e-commerce dla sklepów z produktami, których klienci chcą „zobaczyć u siebie".- Sklepy z meblami i dekoracjami – wizualizacja produktu w rzeczywistym wnętrzu
- Galerie i sklepy z dziełami sztuki – kontekstowe mockupy zamiast białego tła
- Sklepy z oświetleniem – symulacja efektu w różnych pomieszczeniach
- Każdy sklep, gdzie „jak to wygląda u mnie?" jest kluczowym pytaniem klienta
