# Produkt-Hotspots auf einem PrestaShop-Bild, um ein komplettes Outfit zu verkaufen
> Ein in Pixeln platzierter Punkt landet an der falschen Stelle, sobald das Bild seine Größe ändert. Wo die Punkte hingehören, wie man Touchscreens ohne Hover behandelt, und das eine Element, das Barrierefreiheit und SEO zugleich regelt.
- Seite:
- Sprache: de
- Veröffentlicht am: 2026-10-06
- Aktualisiert am: 2026-10-06
- Weitere Sprachen: [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), [it](https://www.datafirefly.com/it/2026/10/06/hotspot-prodotti-immagine-prestashop/index.md), [pl](https://www.datafirefly.com/pl/2026/10/06/hotspoty-produktowe-obraz-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)
- Index:
Ein Ambientefoto zeigt ein komplettes Outfit, einen eingerichteten Raum, eine ausgestattete Werkbank. Der Besucher sieht das Ganze und weiß weder, welche Produkte es ausmachen, noch wo er sie findet. Hotspots lösen dieses Problem, sofern sie richtig platziert und umgesetzt werden.
Der kommerzielle Nutzen dieses Formats wurde separat behandelt. Dieser Artikel behandelt die Umsetzung.
## Wo die Punkte platziert werden
Vier Regeln, nach Wichtigkeit geordnet.
**Auf dem Produkt, nicht daneben.** Ein Punkt in der Mitte des Objekts wird sofort verstanden. Ein Punkt, der einige Zentimeter daneben schwebt, zwingt zum Raten, was er bezeichnet.
**Mindestens fingerbreit auseinander.** Zwei zu nahe Punkte lassen sich per Touch nicht unterscheiden. Rechnen Sie mit einem Abstand in Höhe der minimalen Touch-Fläche zwischen zwei Mittelpunkten.
**Fünf bis acht pro Bild maximal.** Darüber hinaus wird das Bild zu einem Punkteteppich und der Besucher öffnet keinen einzigen. Enthält Ihr Visual zwölf Produkte, zeigen Sie acht und bieten die vollständige Liste darunter an.
**Auf lesbaren Flächen.** Ein Punkt auf einer sehr dunklen oder stark texturierten Fläche verschwindet. Sehen Sie eine Kontur oder einen Schatten vor, um die Sichtbarkeit auf jedem Hintergrund zu garantieren.
## Das Koordinatenproblem
Die technische Hauptschwierigkeit, und sie wird unterschätzt.
Ein Punkt, der 340 Pixel vom linken Rand auf einem 1200-Pixel-Bild platziert wurde, landet an der falschen Stelle, sobald das Bild auf einem Telefon mit 380 Pixeln angezeigt wird.
Die Regel: **Speichern Sie die Koordinaten in Prozent** der Breite und Höhe, niemals in Pixeln. Der Punkt bleibt an seinem Platz, egal in welcher Anzeigegröße.
Zweite Falle: der Zuschnitt. Wird Ihr Bild je nach Bildschirmformat unterschiedlich zugeschnitten, ein breites Bild am Desktop und ein quadratisches am Handy, sind die auf dem einen berechneten Punkte auf dem anderen falsch.
Zwei mögliche Antworten. Überall **dasselbe Bild** verwenden, nur skaliert. Oder **getrennte Koordinatensätze** pro Format definieren, was die Platzierungsarbeit verdoppelt.
Die erste Lösung ist die einfachste und reicht in der großen Mehrheit der Fälle.
## Das Touch-Verhalten
Das entscheidet über die reale Nutzung, denn dieses Format wird stark auf dem Handy konsumiert.
Am Desktop zeigt das Hovern eine Vorschau und der Klick führt zum Produkt. Auf dem Touchscreen existiert Hovern nicht, und die direkte Übertragung dieses Verhaltens ergibt eine unbrauchbare Oberfläche.
Drei Optionen für Touch.
**Ein Tipp öffnet die Vorschau, ein zweiter führt zum Produkt.** Gängiges Verhalten, mit dem Nachteil zweier Gesten.
**Ein Tipp öffnet eine kompakte Karte** mit Bild, Name, Preis und Warenkorb-Button. Der Besucher kann kaufen, ohne das Bild zu verlassen, was kommerziell das beste Verhalten ist.
**Ein Tipp führt direkt zum Produkt.** Schnell, aber der Kontext des Bildes geht verloren, was bei einem kompletten Outfit schade ist.
Die zweite Option konvertiert am besten, weil sie mehrere Käufe aus demselben Bild heraus ermöglicht.
Zwei Umsetzungsdetails. Die **Touch-Fläche** muss größer sein als der sichtbare Punkt, mindestens vierundvierzig Pixel Kantenlänge. Und das Schließen der Vorschau muss durch einen Tipp außerhalb möglich sein, nicht nur über ein kleines Kreuz.
## Barrierefreiheit
Ein bei diesem Format systematisch vernachlässigter Punkt, der sich doch in wenigen Zeilen lösen lässt.
Ein Bild mit klickbaren Zonen wirft drei Fragen auf.
**Das Bild selbst** muss einen Alternativtext tragen, der die Szene beschreibt, nicht die Produktliste. „Wohnzimmer mit grauem Sofa, Couchtisch aus Eiche und Stehlampe" genügt.
**Jeder Punkt** muss ein benanntes interaktives Element sein, das den Namen des bezeichneten Produkts trägt. Ein unbeschrifteter Punkt ist für einen Screenreader ein stummer Button.
**Die Tastaturnavigation** muss jeden Punkt in logischer Reihenfolge erreichen und die Vorschau mit der Aktivierungstaste öffnen können.
Fügen Sie ein Element hinzu, das alles regelt: **eine Textliste der Produkte unter dem Bild**. Sie dient Screenreadern, Tastaturnutzern, Suchmaschinen und Besuchern, die eine Liste bevorzugen. Es ist die rentabelste Ergänzung dieses Systems.
## Was die Suchmaschinen sehen
Hotspots werden per Skript aufgebaut und ihr Inhalt ist nicht unbedingt lesbar.
Drei praktische Folgen.
Die **Links zu den Produkten** müssen echte Links im Code sein, keine nur per Skript verwalteten klickbaren Elemente. Sonst verlieren Sie eine natürliche Verlinkung zwischen Ihrer Ambienteseite und Ihren Produktseiten.
Der **Alternativtext** des Bildes trägt die Information über die Szene, was der Bildersuche hilft.
Die oben erwähnte **Liste unter dem Bild** macht den Inhalt vollständig lesbar, ohne vom Skript-Rendering abzuhängen.
## Die Performance
Ein Lookbook-Bild ist in der Regel groß und schwer. Drei Vorkehrungen.
**Die richtige Größe ausliefern**, je nach Bildschirm, mit responsiven Formaten. Ein 2400-Pixel-Bild auf einem Telefon ist reine Verschwendung.
**Die Abmessungen deklarieren**, um den Platz zu reservieren und zu verhindern, dass die Seite springt, wenn das Bild eintrifft.
**Die Punkte nach dem Bild laden**, aber ihre Position von Anfang an reservieren, damit sie nicht versetzt erscheinen.
Ergänzender Punkt: Bei mehreren Lookbook-Bildern auf derselben Seite laden Sie nur das erste sofort und verzögern die weiteren.
## Der Inhalt der Vorschau
Fünf Elemente, nicht mehr.
Das **Vorschaubild** des Produkts, das visuell bestätigt, worum es geht.
Der **Name**, vollständig, aber kurz.
Der **Preis**, gegebenenfalls mit Hinweis auf Nichtverfügbarkeit.
Der **Warenkorb-Button**, oder die Größenauswahl, wenn das Produkt Varianten hat.
Der **Link zur vollständigen Produktseite**, für alle, die mehr wissen wollen.
Bei Produkten mit Varianten stellt sich die Größenfrage. Zwei Ansätze: einen Selektor in der Vorschau öffnen oder auf die Produktseite verweisen. Der erste konvertiert besser bei leicht zu wählenden Produkten, der zweite vermeidet Fehler bei Produkten, deren Wahl Überlegung verlangt.
## Die Wartung
Ein Aspekt, der oft erst nach einigen Monaten entdeckt wird.
Ein Lookbook-Bild altert mit seinem Katalog. Drei Situationen sind zu behandeln.
**Das Produkt ist ausverkauft.** Der Punkt muss bleiben, mit dem Hinweis auf Nichtverfügbarkeit und eventuell einer Wiederverfügbarkeits-Benachrichtigung. Ihn zu entfernen hinterlässt ein unerklärtes Loch im Bild.
**Das Produkt wird endgültig entfernt.** Zwei Optionen: den Punkt entfernen oder ihn mit ausdrücklichem Hinweis auf ein gleichwertiges Produkt umleiten.
**Das ganze Bild wird obsolet.** Eine vergangene Kollektion. Sehen Sie ein Enddatum pro Bild vor, oder mindestens eine regelmäßige Überprüfung.
Eine nützliche, automatisierbare Kontrolle: die Punkte auflisten, die auf inaktive oder gelöschte Produkte zeigen. In einem Shop mit zwanzig angesammelten Lookbooks füllt sich diese Liste schnell.
## Messen
Drei Kennzahlen.
Die **Interaktionsrate** mit den Punkten, bezogen auf die Bildaufrufe. Sie sagt Ihnen, ob das System erkannt und verstanden wird.
Die **Zahl der verschiedenen geöffneten Produkte** pro Sitzung. Das ist der eigentliche Wert des Formats: Ein Besucher, der drei öffnet, stellt ein Outfit zusammen.
Der **durchschnittliche Warenkorb der Sitzungen**, die über ein Lookbook liefen, verglichen mit den übrigen. Dort rechtfertigt sich das Format oder eben nicht.
Das richtet dieses System auf PrestaShop 8 und 9 ein: Punktplatzierung in relativen Koordinaten, damit sie in jeder Größe stimmen, kompakte Karte mit Warenkorb-Button beim Antippen, Textliste der Produkte unter dem Bild für Barrierefreiheit und SEO sowie Erkennung von Punkten, die auf inaktive Produkte zeigen.