Ein Kunde, der ein Sofafoto auf weißem Hintergrund betrachtet, sieht ein Sofa. Dasselbe Sofa im Wohnzimmer, mit Teppich, Lampe und Kissen, zeigt ihm ein Ergebnis. Shop the Look verwandelt diese Inszenierung in eine Kaufstrecke: Jedes sichtbare Objekt wird klickbar.
Die Mechanik ist einfach. Ihr Erfolg hängt an Ausführungsdetails, die sich erst im Produktivbetrieb zeigen.
Wo es funktioniert
Drei Warenfamilien eignen sich wirklich dafür.
Mode und Accessoires, der ursprüngliche Anwendungsfall. Das komplette Outfit beantwortet eine Frage, die die Produktseite nicht behandelt: womit dieses Teil kombinieren.
Deko und Möbel. Gekauft wird nach Ambiente, fast nie nach Einzelprodukt. Es ist die Branche, in der sich der Warenkorbwert am stärksten bewegt.
Heimwerken und Garten in der Anwendung. Eine eingerichtete Terrasse, eine ausgestattete Werkstatt, eine Büroecke. Der Besucher entdeckt Ergänzungsprodukte, nach denen er nicht gesucht hätte.
Nutzlos ist das System dagegen bei einem technischen Katalog, in dem der Kauf einzeln und vorab spezifiziert erfolgt: Ersatzteile, Verbrauchsmaterial, Profiprodukte nach Referenz.
Das Foto, erste Anforderung
Das Ergebnis hängt stärker vom Bild ab als vom Modul.
Jedes Produkt muss identifizierbar sein. Ein halb hinter einem anderen verstecktes Objekt erzeugt einen unverständlichen Hotspot. Komponieren Sie die Szene mit Blick auf die klickbaren Zonen, nicht nur auf die Ästhetik.
Die Auflösung muss Zoomen erlauben, besonders auf dem Smartphone, wo der Besucher vergrößert, um ein Detail zu erkennen, bevor er tippt.
Der Bildausschnitt muss Raum lassen. Ein Produkt am Bildrand kann keinen Hotspot erhalten, ohne dass das Infofenster aus dem Rahmen läuft.
Planen Sie auch das Format: Ein sehr breites Bild funktioniert auf dem Smartphone schlecht, ein quadratisches verschenkt Platz auf dem Desktop. Zwei Versionen derselben Szene sind die sauberste Lösung.
Shoppable Lookbook — Shop the Look & Klickbare HotspotsDas shoppable Lookbook, das deine Fotos in Verkäufe verwandelt79,00€
Die Hotspots platzieren
Vier Regeln aus der realen Nutzung.
- Fünf bis sieben maximal pro Bild. Darüber hinaus wird die Szene zu einer Punktwolke, und der Besucher öffnet keinen einzigen.
- Eine ausreichende Touch-Größe. Der Punkt muss mit dem Finger erreichbar bleiben, was auf dem Smartphone eine Zone von rund vierzig Pixeln Kantenlänge voraussetzt, unabhängig von der sichtbaren Größe des Punkts.
- Ein Punkt pro Produkt, auf dem wiedererkennbarsten Teil. Bei einem Stuhl die Sitzfläche statt eines Beins.
- Ein visueller Hinweis auf die Klickbarkeit. Ein statischer Punkt bleibt unbemerkt. Eine leichte Animation beim Erscheinen des Bildes, danach ein dezenter Ruhezustand, löst diesen Punkt.
Der Inhalt des Hotspots
Was sich beim Klick öffnet, entscheidet über die Konversion. Vier Elemente, nicht mehr.
Der Produktname, der Preis, die Verfügbarkeit und eine Aktion. Diese Aktion muss das direkte In-den-Warenkorb sein, wenn das Produkt keine Varianten hat, und ein Link zur Produktseite, wenn noch eine Größen- oder Farbwahl nötig ist.
Ein erzwungener Umweg über die Produktseite bei einem Produkt ohne Optionen fügt einen unnötigen Schritt hinzu. Ein Direktkauf bei einem Produkt, das eine Größe verlangt, erzeugt Fehlbestellungen und Retouren.
Das mobile Verhalten
Hier scheitern die meisten Umsetzungen. Auf dem Smartphone verdeckt das neben dem Hotspot öffnende Infofenster das Bild und läuft oft aus dem Bildschirm.
Das Verhalten, das funktioniert: Beim Tippen auf einen Hotspot erscheint eine Produktkarte am unteren Bildschirmrand, in voller Breite, ohne die berührte Zone zu verdecken. Der Besucher behält den visuellen Kontext und kann zum nächsten Punkt weitergehen, ohne etwas zu schließen.
Planen Sie auch eine Ausweichdarstellung. Unter dem Bild eine klassische Liste der in der Szene enthaltenen Produkte, immer sichtbar. Sie dient Besuchern, die die Mechanik nicht verstehen, und löst zwei weitere Probleme.
Barrierefreiheit und SEO
Beides wird über dieselbe Liste gelöst.
Ein Bild mit überlagerten Hotspots ist für einen Screenreader nicht nutzbar, und die Produkte sind keine indexierbaren Links, wenn das Modul sie erst beim Klick per JavaScript lädt. Die HTML-Liste unter dem Bild, mit einem Link zu jeder Produktseite, macht die Szene zugänglich und lässt die interne Verlinkung entstehen.
Ergänzen Sie einen beschreibenden Alternativtext am Bild, der die Szene beschreibt und nicht den Dateinamen.
Wo die Looks platzieren
Drei Platzierungen, die sich ergänzen.
Eine eigene Seite, die alle Szenen versammelt, strukturiert nach Themenwelt oder Saison. Sie lässt sich gut teilen und rankt auf Inspirationssuchen.
Am Kopf einer Kategorie ein oder zwei Szenen der jeweiligen Themenwelt. Es ist die Platzierung mit der besten Konversion, weil der Besucher dort bereits in der Suchphase ankommt.
Auf der Produktseite ein Block „in diesen Ambienten gesehen“, der auf die Szenen mit diesem Produkt verweist. Diese umgekehrte Verlinkung ist es, die den Warenkorbwert steigen lässt.
Messen
Drei Kennzahlen. Die Interaktionsrate, der Anteil der Besucher, die mindestens einen Hotspot öffnen, die Ihnen sagt, ob die Mechanik verstanden wird. Die Rate der Warenkorb-Hinzufügungen aus den Hotspots. Und der Warenkorbwert der Sitzungen, die eine Szene gesehen haben, verglichen mit den übrigen: Dort rechtfertigt sich das System oder eben nicht, denn es kostet Zeit für die Fotoproduktion.
Das Modul Shoppable Lookbook und Shop the Look setzt diese Mechanik auf PrestaShop 8 und 9 um: Hotspot-Platzierung auf dem Bild, Produktkarte mit direktem In-den-Warenkorb, angepasstes mobiles Verhalten, HTML-Produktliste für die Barrierefreiheit und der umgekehrte Block auf den betroffenen Produktseiten.
