Kupowalny lookbook w WooCommerce: zamień jeden obraz w galerię zakupową z hotspotami

Zdjęcie ze stylizacją to rzecz, która najbardziej przekonuje w sklepie i z której najtrudniej kupić. Klient widzi strój albo wnętrze, które chce mieć, ale nie wie, które produkty są na ujęciu ani jak dodać je do koszyka. 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, czego szukać i jak robi to Lookbook.

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. 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 działać 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.

Dlaczego zwykłe zdjęcie nie sprzedaje

Samo zdjęcie ze stylizacją ma trzy problemy:

• Klient nie wie, które produkty są na zdjęciu. Widzi stylizację, nie kody produktów.
• Brak drogi od inspiracji do koszyka. Każdy element trzeba wyszukać w katalogu, a większość ludzi rezygnuje.
• 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, gdy zmienia się katalog.

Kupowalny lookbook rozwiązuje wszystkie trzy, wiążąc produkty z samym obrazem i czytając ich dane na żywo.

Czego szukać

Nie każde narzędzie typu shop-the-look jest zbudowane tak samo. Liczą się cztery rzeczy:

• Dane produktów na żywo. Hotspoty powinny czytać tytuł, cenę, miniaturę i link do koszyka z prawdziwego produktu WooCommerce, żeby nic się nie dezaktualizowało.
• Dostępność. Znaczniki powinny być prawdziwymi przyciskami, które działają z klawiatury i mają etykiety dla czytników ekranu, nie tylko ozdobnymi kropkami.
• Wydajność. Galeria nie powinna ładować zasobów na całej stronie ani przesuwać układu. Ciężkie galerie spowalniają sklep i przesuwają treść w trakcie ładowania.
• Łagodna awaria. Jeśli przypięty produkt zostanie usunięty, jego hotspot powinien po prostu zniknąć, a nie psuć strony.

Jak robi to Lookbook

Lookbook dla WooCommerce zamienia pojedynczy obraz w scenę zakupową. Wgrywasz zdjęcie, przypinasz dowolną liczbę produktów jako hotspoty i osadzasz wynik przez shortcode [lookbook id="123"] w dowolnym miejscu witryny.

Każdy hotspot ustawiasz prostym edytorem X/Y: nadajesz każdemu produktowi pozycję w procentach od lewego górnego rogu obrazu, w zakresie 0 do 100, żeby znacznik trafił w element na zdjęciu. Znaczniki to prawdziwe przyciski, obsługiwane z klawiatury i opisane dla czytników ekranu.

Gdy klient otwiera hotspot, popover z kartą produktu pokazuje miniaturę, tytuł, bieżącą cenę i link do koszyka. Wszystko jest czytane na żywo z WooCommerce po ID produktu, więc ceny i stany są zawsze aktualne. Etykieta przycisku koszyka oraz to, czy pokazuje się cena, to przełączniki w WooCommerce → Lookbook, które działają dla wszystkich lookbooków naraz.

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, a wtyczka nie używa jQuery. Brak obrazu, lookbook bez hotspotów albo usunięty produkt renderują się czysto, bez błędów w kodzie strony. Przy odinstalowaniu wtyczka usuwa własne dane.

Darmowa edycja to kompletny obraz zakupowy. Lookbook Pro rozszerza go o kolor akcentu znaczników, galerię produktu jako pokaz slajdów w kartach hotspotów, wiele obrazów w jednym lookbooku z nawigacją zakładkami, hotspoty wideo i analitykę kliknięć. To jest już wdrożone; dodatkowe style animacji ponad trzy darmowe style znaczników są planowane.

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ę

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. 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ę.