# Dodawanie hotspotów produktowych na obrazie PrestaShop, by sprzedać kompletną stylizację
> Punkt umieszczony w pikselach ląduje w złym miejscu, gdy tylko obraz zmienia rozmiar. Gdzie umieszczać punkty, jak obsłużyć ekrany dotykowe bez najechania i element, który sam załatwia dostępność i SEO.
- Strona:
- Język: pl
- Opublikowano: 2026-10-06
- Zaktualizowano: 2026-10-06
- Inne języki: [fr](https://www.datafirefly.com/2026/10/06/hotspots-produits-image-prestashop/index.md), [en](https://www.datafirefly.com/en/2026/10/06/product-hotspots-image-prestashop/index.md), [es](https://www.datafirefly.com/es/2026/10/06/hotspots-productos-imagen-prestashop/index.md), [de](https://www.datafirefly.com/de/2026/10/06/produkt-hotspots-bild-prestashop/index.md), [it](https://www.datafirefly.com/it/2026/10/06/hotspot-prodotti-immagine-prestashop/index.md), [nl](https://www.datafirefly.com/nl/2026/10/06/producthotspots-afbeelding-prestashop/index.md), [pt](https://www.datafirefly.com/pt/2026/10/06/hotspots-produtos-imagem-prestashop/index.md)
- Indeks:
Zdjęcie aranżacyjne pokazuje kompletną stylizację, umeblowane wnętrze, wyposażony warsztat. Odwiedzający widzi całość i nie wie, jakie produkty ją tworzą ani gdzie je znaleźć. Hotspoty rozwiązują ten problem, pod warunkiem że są poprawnie rozmieszczone i wdrożone.
Komercyjny sens tego formatu został omówiony osobno. Ten artykuł dotyczy wdrożenia.
## Gdzie umieszczać punkty
Cztery zasady, według ważności.
**Na produkcie, nie obok.** Punkt umieszczony na środku obiektu jest rozumiany natychmiast. Punkt unoszący się kilka centymetrów dalej zmusza do zgadywania, co wskazuje.
**Oddalone od siebie co najmniej o szerokość palca.** Dwa zbyt bliskie punkty są nie do odróżnienia dotykiem. Licz odległość równą minimalnej strefie dotykowej między dwoma środkami.
**Maksymalnie pięć do ośmiu na obraz.** Powyżej obraz staje się zasiewem plakietek i odwiedzający nie otwiera żadnej. Jeśli Twój wizual zawiera dwanaście produktów, pokaż osiem i zaproponuj pełną listę poniżej.
**Na czytelnych strefach.** Punkt na bardzo ciemnym lub mocno teksturowanym obszarze znika. Przewidź obrys lub cień, by zagwarantować widoczność niezależnie od tła.
## Problem współrzędnych
Główna trudność techniczna, i jest niedoceniana.
Punkt umieszczony 340 pikseli od lewej krawędzi na obrazie o szerokości 1200 pikseli ląduje w złym miejscu, gdy tylko obraz jest wyświetlany w 380 pikselach na telefonie.
Zasada: **przechowuj współrzędne w procentach** szerokości i wysokości, nigdy w pikselach. Punkt zostaje na swoim miejscu niezależnie od rozmiaru wyświetlania.
Druga pułapka: kadrowanie. Jeśli Twój obraz jest kadrowany różnie w zależności od formatu ekranu, szeroki na komputerze i kwadratowy na telefonie, punkty obliczone na jednym są błędne na drugim.
Dwie możliwe odpowiedzi. Używać **tego samego obrazu** wszędzie, tylko przeskalowanego. Albo zdefiniować **osobne zestawy współrzędnych** na format, co podwaja pracę rozmieszczania.
Pierwsze rozwiązanie jest najprostsze i wystarcza w zdecydowanej większości przypadków.
## Zachowanie dotykowe
To ono decyduje o rzeczywistym użyciu, ponieważ ten format jest często przeglądany na telefonie.
Na komputerze najechanie pokazuje podgląd, a kliknięcie prowadzi do produktu. Na ekranie dotykowym najechanie nie istnieje, a bezpośrednie przeniesienie tego zachowania daje bezużyteczny interfejs.
Trzy opcje dla dotyku.
**Jedno dotknięcie otwiera podgląd, drugie prowadzi do produktu.** Częste zachowanie, z tą wadą, że wymaga dwóch gestów.
**Jedno dotknięcie otwiera kompaktową kartę** z obrazem, nazwą, ceną i przyciskiem dodania do koszyka. Odwiedzający może kupić bez opuszczania obrazu, co jest najlepszym zachowaniem komercyjnie.
**Jedno dotknięcie prowadzi bezpośrednio do produktu.** Szybkie, ale traci kontekst obrazu, co jest szkodą przy kompletnej stylizacji.
Druga opcja konwertuje najlepiej, bo pozwala skomponować kilka zakupów z tego samego obrazu.
Dwa szczegóły wdrożeniowe. **Strefa dotykowa** musi być większa niż widoczny punkt, co najmniej czterdzieści cztery piksele na bok. A zamknięcie podglądu musi być możliwe dotknięciem na zewnątrz, nie tylko małego krzyżyka.
## Dostępność
Punkt systematycznie zaniedbywany w tym formacie, a przecież możliwy do załatwienia w kilku liniach.
Obraz z klikalnymi strefami stawia trzy pytania.
**Sam obraz** musi mieć tekst alternatywny opisujący scenę, nie listę produktów. „Salon z szarą sofą, dębowym stolikiem kawowym i lampą stojącą" wystarczy.
**Każdy punkt** musi być nazwanym elementem interaktywnym, noszącym nazwę produktu, który wskazuje. Punkt bez etykiety to niemy przycisk dla czytnika ekranu.
**Nawigacja klawiaturą** musi pozwalać dotrzeć do każdego punktu w logicznej kolejności i otworzyć podgląd klawiszem aktywacji.
Dodaj element, który załatwia wszystko: **tekstową listę produktów pod obrazem**. Służy czytnikom ekranu, użytkownikom klawiatury, wyszukiwarkom i odwiedzającym, którzy wolą listę. To najbardziej opłacalne uzupełnienie tego mechanizmu.
## Co widzą wyszukiwarki
Hotspoty są budowane skryptem i ich zawartość nie zawsze jest czytelna.
Trzy praktyczne konsekwencje.
**Linki do produktów** muszą być prawdziwymi linkami w kodzie, nie klikalnymi elementami obsługiwanymi wyłącznie skryptem. Inaczej tracisz naturalne linkowanie między stroną aranżacyjną a kartami produktów.
**Tekst alternatywny** obrazu niesie informację o scenie, co pomaga wyszukiwarce obrazów.
**Lista pod obrazem**, wspomniana wyżej, czyni treść w pełni czytelną bez zależności od renderowania skryptów.
## Wydajność
Obraz lookbooka jest zwykle duży i ciężki. Trzy środki ostrożności.
**Serwować właściwy rozmiar** według ekranu, z formatami adaptacyjnymi. Obraz 2400 pikseli na telefonie to czyste marnotrawstwo.
**Deklarować wymiary**, by zarezerwować miejsce i uniknąć skakania strony, gdy obraz się pojawia.
**Ładować punkty po obrazie**, ale rezerwować ich pozycję od początku, by nie pojawiały się z przesunięciem.
Punkt uzupełniający: jeśli masz kilka obrazów lookbooka na jednej stronie, ładuj natychmiast tylko pierwszy, a kolejne odłóż.
## Zawartość podglądu
Pięć elementów, nie więcej.
**Miniatura** produktu, która wizualnie potwierdza, o co chodzi.
**Nazwa**, pełna, ale krótka.
**Cena**, z informacją o niedostępności w razie potrzeby.
**Przycisk dodania do koszyka**, lub wyboru rozmiaru, jeśli produkt ma warianty.
**Link do pełnej karty produktu**, dla tych, którzy chcą wiedzieć więcej.
Przy produktach z wariantami pojawia się kwestia rozmiaru. Dwa podejścia: otworzyć selektor w podglądzie albo odesłać do karty. Pierwsze konwertuje lepiej przy produktach łatwych do wyboru, drugie unika błędów przy produktach, gdzie wybór wymaga namysłu.
## Utrzymanie
Aspekt często odkrywany po kilku miesiącach.
Obraz lookbooka starzeje się wraz z katalogiem. Trzy sytuacje do obsłużenia.
**Produkt jest wyprzedany.** Punkt musi zostać, z informacją o niedostępności i ewentualnie powiadomieniem o powrocie do sprzedaży. Usunięcie go zostawia w obrazie dziurę bez wyjaśnienia.
**Produkt jest wycofany na stałe.** Dwie opcje: usunąć punkt albo przekierować go na równoważny produkt z wyraźną wzmianką.
**Cały obraz staje się nieaktualny.** Miniona kolekcja. Przewidź datę końca dla każdego obrazu, a przynajmniej okresowy przegląd.
Przydatna kontrola, do zautomatyzowania: wylistować punkty wskazujące na nieaktywne lub usunięte produkty. W sklepie, który zgromadził dwadzieścia lookbooków, ta lista szybko się zapełnia.
## Pomiar
Trzy wskaźniki.
**Współczynnik interakcji** z punktami w stosunku do wyświetleń obrazu. Mówi Ci, czy mechanizm jest zauważany i rozumiany.
**Liczba różnych otwartych produktów** na sesję. To właściwa wartość formatu: odwiedzający, który otwiera trzy, komponuje stylizację.
**Średni koszyk sesji**, które przeszły przez lookbook, w porównaniu z pozostałymi. To tu format się broni albo nie.
Moduł wdraża ten mechanizm w PrestaShop 8 i 9: rozmieszczanie punktów we współrzędnych względnych, by pozostawały dokładne przy każdym rozmiarze, kompaktowa karta z dodaniem do koszyka po dotknięciu, tekstowa lista produktów pod obrazem dla dostępności i SEO oraz wykrywanie punktów wskazujących na nieaktywne produkty.