Kupowalny lookbook WooCommerce: hotspoty shop-the-look

Zdjęcie ze stylizacją to rzecz, która najbardziej przekonuje w sklepie i z której najtrudniej kupić. Klient widzi strój, urządzone wnętrze albo gotowy talerz, które chce mieć, ale nie wie, które produkty są na ujęciu ani jak dodać je do koszyka. Obraz budzi pragnienie, a potem zostawia je bez wyjścia. Kupowalny lookbook zamyka tę lukę: zamienia jeden obraz w galerię zakupową, gdzie każdy produkt jest hotspotem, który można otworzyć i kupić. Ten przewodnik wyjaśnia, czym jest kupowalny lookbook, dlaczego zwykłe zdjęcie traci sprzedaż, czego potrzebuje dobre narzędzie typu shop-the-look i jak darmowa wtyczka Lookbook dodaje cały ten przepływ do WooCommerce.

Czym jest kupowalny lookbook

Kupowalny lookbook to pojedynczy obraz z przypiętymi produktami jako hotspotami. Zamiast płaskiego zdjęcia z podpisem pełnym linków, każdy element sceny staje się interaktywnym znacznikiem umieszczonym nad produktem, który reprezentuje. Gdy klient aktywuje hotspot, pojawia się mała karta produktu z miniaturą, tytułem, bieżącą ceną i linkiem do koszyka.

Sedno to droga od inspiracji do koszyka. Piękne zdjęcie wzbudza pragnienie; hotspoty pozwalają klientowi na nie zareagować, bez opuszczania obrazu. Jedna scena może sprzedać całą stylizację, urządzony pokój albo zestaw prezentowy, zamiast odsyłać ludzi do katalogu po każdy element z osobna. Zdjęcie przestaje być plakatem i staje się witryną sklepu. Klient widzi, dotyka i kupuje w tym samym miejscu, w którym poczuł, że czegoś chce, a to właśnie ten ciąg bez przerwy decyduje, czy obraz zamienia się w zamówienie.

Takie rozwiązanie jest dla sklepów, które sprzedają stylizację, a nie pojedynczy produkt na raz: zestawy odzieżowe, aranżacje wnętrz, przewodniki prezentowe, ujęcia ze składnikami przepisu, wszędzie tam, gdzie kilka produktów żyje na jednym zdjęciu i pasuje do siebie.

Dlaczego zwykłe zdjęcie nie sprzedaje

Samo zdjęcie ze stylizacją ma trzy przewidywalne problemy, a każdy po cichu kosztuje cię sprzedaż, którą obraz już w połowie zrobił.

• Klient nie wie, które produkty są na zdjęciu. Widzi stylizację, nie kody produktów. Poduszka, lampa i narzuta są pożądane i wszystkie anonimowe. Bez sposobu na zidentyfikowanie każdego elementu klient zgaduje, szuka albo rezygnuje.
• Brak drogi od inspiracji do koszyka. Nawet zmotywowany klient musi opuścić obraz, otworzyć katalog i ręcznie odnaleźć każdy element. Każdy dodatkowy krok zniechęca część ludzi, a stylizacja z wielu produktów mnoży te kroki, więc najbardziej inspirujące zdjęcia konwertują najgorzej.
• Ręczne linkowanie jest żmudne i się dezaktualizuje. Wypisywanie produktów pod zdjęciem ręcznie jest wolne, a linki psują się lub pokazują stare ceny w chwili, gdy zmienia się katalog. Zdjęcie poprawne w dniu startu pół roku później po cichu kłamie, odsyłając klienta do wycofanego wariantu albo ceny, której już nie pobierasz.

Ostrzeżenie: Narzędzie, które kopiuje szczegóły produktu do lookbooka, to pułapka na utrzymanie. Ręczne linki psują się lub pokazują stare ceny w chwili, gdy zmienia się katalog, więc zamiast tego czytaj tytuł, cenę i stan na żywo z każdego produktu.

Kupowalny lookbook rozwiązuje wszystkie trzy problemy, wiążąc produkty z samym obrazem i czytając ich dane na żywo, więc stylizacja jest zidentyfikowana, kupowalna i zawsze aktualna. Zamiast zarządzać osobną listą linków pod zdjęciem, zarządzasz samymi pinezkami, a cała reszta, ceny, nazwy i dostępność, płynie wprost z katalogu, który i tak już prowadzisz.

Czego szukać

Nie każde narzędzie typu shop-the-look jest zbudowane tak samo, a różnice ujawniają się najmocniej, gdy w sklepie jest ruch albo gdy zmienia się katalog. Liczą się cztery rzeczy.

• Dane produktów na żywo. Hotspoty powinny czytać tytuł, cenę, miniaturę i link do koszyka z prawdziwego produktu WooCommerce, po ID, żeby nic się nie dezaktualizowało. Narzędzie, które kopiuje szczegóły produktu do lookbooka, to pułapka na utrzymanie; takie, które czyta je na żywo, nigdy nie wypada z synchronizacji.
• Dostępność. Znaczniki powinny być prawdziwymi przyciskami, które działają z klawiatury i mają etykiety dla czytników ekranu, nie ozdobnymi kropkami osiągalnymi tylko myszą. Ruch powinien respektować preferencję ograniczonej animacji. Treść zakupowa, która działa wyłącznie dla widzących użytkowników myszy, wyklucza realnych klientów.
• Wydajność. Galeria nie powinna ładować zasobów na całej witrynie ani przesuwać układu podczas renderowania. Ciężkie galerie spowalniają każdą stronę, na której się pojawiają, i przepychają treść, gdy obrazy się dogrywają, co szkodzi Core Web Vitals i irytuje klienta w połowie kliknięcia.
• Łagodna awaria. Jeśli przypięty produkt zostanie usunięty, cofnięty z publikacji lub wyprzedany, jego hotspot powinien po cichu zniknąć, a nie psuć strony ani renderować karty wskazującej w pustkę. Stylizacja powinna nadal trzymać się kupy z produktami, które pozostały.

Jak robi to Lookbook

Lookbook dla WooCommerce to darmowa wtyczka open source, która zamienia pojedynczy obraz w scenę zakupową. Wgrywasz zdjęcie, przypinasz dowolną liczbę produktów jako hotspoty i osadzasz wynik w dowolnym miejscu witryny shortcode’em [lookbook id="123"]. Całość zbudowana jest wokół dwóch powierzchni: ekranu edycji lookbooka, na którym budujesz scenę, oraz frontu sklepu, z którego klienci kupują.

Zdjęcie ze stylizacją zamienione w galerię zakupową, z hotspotem otwierającym kartę produktu na froncie sklepu.

Każdy lookbook jest osobnym wpisem. Tworzysz go w menu Lookbooki i ustawiasz jego zdjęcie standardowym polem Obrazek wyróżniający, więc tło sceny to zwykły element z biblioteki mediów WordPressa. Każdy hotspot ustawiasz potem prostym edytorem X/Y: powtarzalnym wierszem, w którym podajesz procent X, procent Y oraz ID produktu. Obie współrzędne liczą się od lewego górnego rogu obrazu w zakresie 0 do 100, więc znacznik na 50 / 50 siedzi dokładnie na środku, a każdą pinezkę dosuniesz do elementu, który wskazuje. Znaczniki to prawdziwe przyciski, obsługiwane z klawiatury i opisane dla czytników ekranu, nie ozdobne nakładki.

Gdy klient otwiera hotspot, popover z kartą produktu pokazuje miniaturę, tytuł, cenę na żywo i link do koszyka. Wszystko jest czytane na żywo z WooCommerce po ID produktu, więc ceny i stany są zawsze aktualne i nigdy nie wpisujesz szczegółów produktu do lookbooka ponownie. Karta zawsze pokazuje nazwę i obraz produktu; to, czy pokazuje też cenę i link do koszyka, to przełączniki globalne, a treść przycisku koszyka możesz nadpisać dla wszystkich produktów naraz, na przykład by brzmiała “Kup stylizację” albo “Dodaj do torby”.

Uwaga: Wszystko na karcie jest czytane na żywo z WooCommerce po ID produktu, więc ceny i stany są zawsze aktualne i nigdy nie wpisujesz szczegółów produktu do lookbooka ponownie.

Front jest tak zbudowany, żeby nie przeszkadzać. Arkusz stylów i skrypt ładują się tylko na stronach, na których faktycznie renderuje się lookbook, skrypt jest odroczony (defer), obraz rezerwuje swoje miejsce, więc nie ma przeskoku układu (CLS), a wtyczka nie używa jQuery. CSS dostosowuje się do jasnego i ciemnego schematu kolorów oraz honoruje prefers-reduced-motion. Brak obrazu, lookbook bez hotspotów albo usunięty produkt renderują się czysto: zniknięty lub niepublikowany produkt jest po prostu pomijany, nigdy nie rysowany jako zepsuty znacznik, więc reszta stylizacji zostaje nienaruszona. Lookbook nie łączy się z żadną usługą zewnętrzną, nie ładuje czcionek ani analityki firm trzecich, a przy odinstalowaniu usuwa własne dane.

Konfiguracja

Postawienie obrazu zakupowego zajmuje kilka minut:

1. Zainstaluj wtyczkę z Wtyczki → Dodaj nową albo wgraj ją do /wp-content/plugins/lookbook. WooCommerce musi być zainstalowane i aktywne.
2. Aktywuj ją.
3. Utwórz pierwszy lookbook w Lookbooki → Dodaj nowy. Ustaw Obrazek wyróżniający na zdjęcie ze stylizacją, z którego klienci mają kupować.
4. W polu Hotspoty zakupowe dodaj wiersz dla każdego produktu: wpisz jego ID oraz procent X i Y, żeby znacznik usiadł nad elementem na zdjęciu. Zapisz lookbook.
5. Dostosuj prezentację globalną w WooCommerce → Lookbook: główny przełącznik włącz/wyłącz, to czy karta pokazuje cenę i link do koszyka, oraz etykietę przycisku koszyka.
6. Osadź lookbook przez [lookbook id="123"], podmieniając 123 na ID widoczne podczas edycji lookbooka (to numer post= w adresie URL).

Ekran edycji lookbooka, gdzie każdy hotspot ustawiasz edytorem X/Y i wskazujesz produkt po ID.

Ekran ustawień ma pomoc kontekstową pod każdym polem i pokazuje przykład shortcode’a, więc nie krążysz między dokumentacją a konfiguracją. Ponieważ Lookbook jest zgodny z HPOS i współpracuje z blokami koszyka i zamówienia, dobrze działa na nowoczesnej instalacji WooCommerce. Ten sam shortcode wstawisz w treści wpisu, na stronie zbudowanej blokami, w widżecie albo w szablonie motywu, więc tę samą scenę zakupową możesz pokazać na stronie głównej, na landing page kampanii i w artykule na blogu, bez kopiowania konfiguracji.

Praktyczne wskazówki dla lookbooka, który konwertuje

Wtyczka daje mechanizm; kilka nawyków sprawia, że scena sprzedaje mocniej.

• Przypinaj każdy kupowalny element, ale tylko kupowalne. Jeśli produkt jest na ujęciu i w katalogu, daj mu hotspot. Nie przypinaj rekwizytów, których nie sprzedajesz, bo tylko frustrują klienta, który w nie kliknie.
• Umieszczaj znaczniki na produkcie, nie obok. Hotspot na samej lampie czyta się natychmiast; taki unoszący się obok zmusza klienta do zgadywania. Współrzędnymi procentowymi dosuń każdą pinezkę na sam element.

Wskazówka: Hotspot na samym elemencie czyta się natychmiast; taki unoszący się obok zmusza klienta do zgadywania. Współrzędnymi procentowymi X/Y dosuń każdą pinezkę na sam produkt.

• Zachowaj czytelność sceny. Tuzin nachodzących na siebie hotspotów na małym obrazie zamienia się w skupisko kropek, w które nikt nie trafi precyzyjnie. Jeśli stylizacja jest gęsta, rozważ mniej, dobrze rozstawionych znaczników albo większy obraz.

Ostrzeżenie: Tuzin nachodzących na siebie hotspotów na małym obrazie zamienia się w skupisko kropek, w które nikt nie trafi precyzyjnie. Przy gęstej stylizacji użyj mniej, dobrze rozstawionych znaczników albo większego obrazu.

• Świadomie używaj etykiety przycisku koszyka. “Kup stylizację” albo “Dodaj do torby” lepiej pasuje do tonu marki niż ogólny przycisk, a etykietę ustawia się raz dla wszystkich produktów.
• Polegaj na danych na żywo. Ponieważ ceny i stany czytane są na żywo, możesz raz zbudować sezonowy lookbook i ufać, że zostanie aktualny w miarę zmian katalogu, zamiast przebudowywać go za każdym razem, gdy ruszy się cena.
• Dobierz zdjęcie pod hotspoty. Ujęcie, na którym produkty są wyraźnie rozdzielone i dobrze oświetlone, łatwiej oznaczyć precyzyjnie niż ciasny kadr z nakładającymi się elementami. Myśl o pinezkach już na etapie sesji zdjęciowej, a nie dopiero przy konfiguracji.

Kupowalny lookbook a domyślny WooCommerce

WooCommerce nie ma wbudowanego sposobu, by uczynić obraz kupowalnym. Oto różnica dla samego shop-the-look:

Funkcja	Domyślny WooCommerce	Lookbook
Przypinanie produktów do obrazu	Brak wbudowanego	Dowolna liczba hotspotów na jednym obrazie
Ustawienie znaczników	nie dotyczy	Edytor X/Y w procentach (0 do 100)
Karta produktu na obrazie	Brak	Miniatura, tytuł, cena na żywo, koszyk
Cena i stan na żywo	nie dotyczy	Czytane na żywo z WooCommerce po ID produktu
Dostępne znaczniki	nie dotyczy	Prawdziwe przyciski, klawiatura, etykiety dla czytników
Osadzenie w dowolnym miejscu	nie dotyczy	Shortcode [lookbook]
Wydajność	nie dotyczy	Zasoby tylko gdzie użyte, defer, bez jQuery, bez przeskoku układu
Usunięty produkt	nie dotyczy	Hotspot pominięty, strona zostaje nienaruszona
Koszt	Za darmo (brak takiej funkcji)	Za darmo; PRO dodaje kolor akcentu, galerię w kartach, wiele obrazów, hotspoty wideo, analitykę

Wersja darmowa a PRO

Darmowa edycja to kompletny obraz zakupowy, a nie zajawka: dowolna liczba hotspotów, edytor X/Y, dostępne przyciski znaczników, popover z kartą produktu z ceną na żywo i dodaniem do koszyka, ustawienia prezentacji globalnej oraz shortcode [lookbook] są w komplecie, a front zostaje lekki i łagodny. Lookbook Pro buduje na tej bazie dla sklepów, które chcą bogatszych scen: kolor akcentu znaczników, galeria produktu jako pokaz slajdów w kartach hotspotów, wiele obrazów w jednym lookbooku z nawigacją zakładkami, hotspoty wideo i analityka kliknięć. To jest już wdrożone; dodatkowe style animacji ponad darmowe style znaczników są planowane. Pro to dodatek do darmowej wtyczki, nie zamiennik, więc wszystko powyżej działa dokładnie tak samo.

W skrócie

Kupowalny lookbook zamienia zdjęcie ze stylizacją w galerię zakupową, przypinając produkty do obrazu jako hotspoty, które otwierają kartę z ceną na żywo i dodaniem do koszyka, więc stylizacja jest zidentyfikowana, kupowalna i zawsze aktualna. Zwykłe zdjęcie traci sprzedaż, bo klient nie wie, które produkty są na nim, nie ma drogi do koszyka, a ręczne linki się dezaktualizują. Szukaj danych WooCommerce na żywo, dostępnych znaczników, lekkiego frontu i łagodnej awarii, gdy produkt zostanie usunięty. Lookbook daje to wszystko za darmo, a Lookbook Pro dokłada galerię w kartach, wiele scen, hotspoty wideo i analitykę.