WooCommerce Shoppable Lookbook: Shop-the-Look-Hotspots

Ein Styling-Foto ist das Überzeugendste in einem Shop und zugleich das, woraus man am schwersten kaufen kann. Ein Kunde sieht ein Outfit, einen eingerichteten Raum oder ein angerichtetes Gericht, das er haben möchte, kann aber nicht erkennen, welche Produkte auf der Aufnahme zu sehen sind oder wie er sie in den Warenkorb legt. Das Bild weckt den Wunsch und lässt ihn dann ins Leere laufen. Ein Shoppable Lookbook schließt diese Lücke: Es verwandelt ein einzelnes Bild in eine Shop-the-Look-Galerie, in der jedes Produkt ein Hotspot ist, den Sie öffnen und kaufen können. Dieser Leitfaden erklärt, was ein Shoppable Lookbook ist, warum ein schlichtes Styling-Foto Umsatz verliert, was ein gutes Shop-the-Look-Werkzeug können muss und wie das kostenlose Plugin Lookbook diesen gesamten Ablauf zu WooCommerce hinzufügt.

Was ein Shoppable Lookbook ist

Ein Shoppable Lookbook ist ein einzelnes Bild, auf dem Produkte als Hotspots angeheftet sind. Anstelle eines flachen Bildes mit einer Bildunterschrift voller Links wird jeder Artikel in der Szene zu einer interaktiven Markierung, die genau über dem Produkt sitzt, das sie repräsentiert. Aktiviert ein Kunde einen Hotspot, erscheint eine kleine Produktkarte mit Vorschaubild, Titel, aktuellem Preis und einem In-den-Warenkorb-Link.

Worauf es ankommt, ist der Weg von der Inspiration zum Warenkorb. Ein schönes Foto weckt den Wunsch; die Hotspots ermöglichen es dem Kunden, ohne das Bild zu verlassen darauf zu reagieren. Eine einzige Szene kann ein ganzes Outfit, einen eingerichteten Raum oder ein Geschenkset verkaufen, statt die Kunden zurück in den Katalog zu schicken, um jedes Teil einzeln nach Namen zu suchen. Das Bild ist dann kein Poster mehr, sondern wird selbst zum Verkaufsregal.

Es ist für Shops gemacht, die den Look verkaufen und nicht jeweils nur einen einzelnen Artikel: Mode-Outfits, Raumsets, Geschenkideen, Aufnahmen mit Rezeptzutaten, überall dort, wo mehrere Produkte in einem Bild leben und zusammengehören.

Warum ein schlichtes Foto nicht verkauft

Ein Styling-Foto für sich allein hat drei vorhersehbare Probleme, und jedes davon kostet Sie leise einen Verkauf, den das Bild eigentlich schon halb gemacht hatte.

• Kunden können nicht erkennen, welche Produkte auf dem Foto sind. Sie sehen den Look, nicht die Artikelnummern. Das Kissen, die Lampe und das Plaid sind alle begehrenswert und alle namenlos. Ohne eine Möglichkeit, jeden Artikel zu identifizieren, rät der Kunde, sucht oder gibt auf.
• Es gibt keinen Weg von der Inspiration zum Warenkorb. Selbst ein motivierter Kunde muss das Bild verlassen, den Katalog öffnen und jedes Teil von Hand aufspüren. Jeder zusätzliche Schritt kostet Besucher, und ein Look aus mehreren Artikeln vervielfacht die Schritte, sodass ausgerechnet die inspirierendsten Fotos am schlechtesten konvertieren.
• Manuelles Verlinken ist mühsam und veraltet schnell. Produkte von Hand unter einem Foto aufzulisten ist langsam, und die Links brechen oder zeigen alte Preise, sobald sich der Katalog ändert. Ein Foto, das zum Start noch korrekt war, ist sechs Monate später leise falsch und schickt Kunden zu einer eingestellten Variante oder zu einem Preis, den Sie gar nicht mehr verlangen.

Warnung: Ein Werkzeug, das Produktdetails in das Lookbook kopiert, ist eine Wartungsfalle. Manuelle Links brechen oder zeigen alte Preise, sobald sich der Katalog ändert, lesen Sie daher Titel, Preis und Lagerbestand stattdessen live aus jedem Produkt.

Ein Shoppable Lookbook löst alle drei Probleme, indem es die Produkte an das Bild selbst bindet und ihre Daten live ausliest, sodass der Look identifiziert, kaufbar und stets aktuell ist.

Worauf Sie achten sollten

Nicht jedes Shop-the-Look-Werkzeug ist gleich gebaut, und die Unterschiede zeigen sich am deutlichsten, wenn der Shop stark frequentiert ist oder sich der Katalog ändert. Vier Dinge sind entscheidend.

• Aktuelle Produktdaten. Hotspots sollten Titel, Preis, Vorschaubild und Warenkorb-Link über die ID aus dem echten WooCommerce-Produkt auslesen, damit nichts veraltet. Ein Werkzeug, das Produktdetails in das Lookbook kopiert, ist eine Wartungsfalle; eines, das sie live liest, läuft nie aus dem Takt.
• Barrierefreiheit. Markierungen sollten echte Buttons sein, die mit der Tastatur bedienbar sind und Beschriftungen für Screenreader tragen, nicht nur dekorative Punkte, die allein mit der Maus erreichbar sind. Die Bewegung sollte die Einstellung für reduzierte Bewegung respektieren. Shoppable-Inhalte, die nur für sehende Maus-Nutzer funktionieren, schließen echte Kunden aus.
• Performance. Die Galerie sollte ihre Assets nicht seitenweit laden und nicht das Layout verschieben, während sie sich aufbaut. Schwere Galerien verlangsamen jede Seite, die sie berühren, und schieben Inhalte herum, während die Bilder einrasten, was den Core Web Vitals schadet und den Kunden mitten im Antippen verärgert.
• Sauberes Verhalten bei Fehlern. Wird ein angeheftetes Produkt gelöscht, zurückgezogen oder ist es ausverkauft, sollte sein Hotspot unauffällig verschwinden, statt die Seite zu beschädigen oder eine Karte zu zeigen, die ins Leere zeigt. Der Look sollte mit den verbleibenden Produkten weiterhin zusammenhalten.

Wie Lookbook das umsetzt

Lookbook for WooCommerce ist ein kostenloses Open-Source-Plugin, das ein einzelnes Bild in eine kaufbare Szene verwandelt. Sie laden ein Foto hoch, heften beliebig viele Produkte als Hotspots an und binden das Ergebnis mit dem Shortcode [lookbook id="123"] an beliebiger Stelle auf der Website ein. Das Ganze baut auf zwei Oberflächen auf: dem Bildschirm Lookbook bearbeiten, auf dem Sie die Szene aufbauen, und dem Shop-Frontend, in dem die Kunden daraus kaufen.

Ein Styling-Foto, das zur Shop-the-Look-Galerie wird, mit einem Hotspot, der eine Produktkarte im Shop-Frontend öffnet.

Jedes Lookbook ist ein eigener Datensatz. Sie legen eines über das Menü Lookbooks an und bestimmen sein Bild über das übliche Feld Beitragsbild, sodass die Leinwand einfach ein gewöhnliches WordPress-Medienelement ist. Jeder Hotspot wird anschließend mit einem einfachen X/Y-Editor positioniert: einer Wiederholungsliste, in der jede Zeile aus einem X-Prozentwert, einem Y-Prozentwert und einer Produkt-ID besteht. Beide Koordinaten verlaufen von der oberen linken Bildecke aus im Bereich von 0 bis 100, sodass eine Markierung bei 50 / 50 exakt in der Mitte sitzt und Sie jede Anheftung am Artikel ausrichten können, auf den sie zeigt. Markierungen sind echte Buttons, mit der Tastatur bedienbar und für Screenreader beschriftet, nicht bloß dekorative Überlagerungen.

Öffnet ein Kunde einen Hotspot, zeigt das Produktkarten-Popover Vorschaubild, Titel, aktuellen Preis und einen In-den-Warenkorb-Link. All das wird live aus WooCommerce über die Produkt-ID gelesen, sodass Preise und Lagerbestand stets aktuell sind und Sie Produktdetails nie erneut in das Lookbook eingeben müssen. Die Karte zeigt immer Produktname und Bild; ob sie zusätzlich den Preis und den In-den-Warenkorb-Link anzeigt, sind globale Schalter, und Sie können die Beschriftung des In-den-Warenkorb-Buttons für alle Produkte zugleich überschreiben, etwa zu “Shop the Look” oder “In die Tasche”.

Hinweis: Alles auf der Karte wird live aus WooCommerce über die Produkt-ID gelesen, sodass Preise und Lagerbestand stets aktuell bleiben und Sie Produktdetails nie erneut in das Lookbook eingeben müssen.

Das Frontend ist so gebaut, dass es nicht im Weg steht. Stylesheet und Skript laden nur auf Seiten, die tatsächlich ein Lookbook darstellen, das Skript wird verzögert geladen, das Bild reserviert seinen Platz, sodass es keine Layoutverschiebung gibt, und das Plugin kommt ohne jQuery aus. Das CSS passt sich an helle und dunkle Farbschemata an und respektiert prefers-reduced-motion. Ein fehlendes Bild, ein Lookbook ohne Hotspots oder ein gelöschtes Produkt werden allesamt sauber dargestellt: Ein entferntes oder zurückgezogenes Produkt wird einfach übersprungen und nie als fehlerhafte Markierung gezeichnet, sodass der übrige Look intakt bleibt. Lookbook verbindet sich mit keinem externen Dienst, lädt keine fremden Schriften oder Analysen und entfernt bei der Deinstallation seine eigenen Daten.

Einrichtung

Ein Shoppable-Bild live zu bekommen, dauert nur ein paar Minuten:

1. Installieren Sie das Plugin über Plugins, Installieren, oder laden Sie es nach /wp-content/plugins/lookbook hoch. WooCommerce muss installiert und aktiv sein.
2. Aktivieren Sie es.
3. Erstellen Sie Ihr erstes Lookbook über Lookbooks, Erstellen. Setzen Sie das Beitragsbild auf das Styling-Foto, aus dem die Kunden kaufen sollen.
4. Fügen Sie im Bereich Shoppable Hotspots für jedes Produkt eine Zeile hinzu: Tippen Sie die Produkt-ID sowie einen X- und einen Y-Prozentwert ein, damit die Markierung über dem Artikel im Foto sitzt. Speichern Sie das Lookbook.
5. Passen Sie die globale Darstellung unter WooCommerce, Lookbook an: den Hauptschalter, ob die Karte Preis und In-den-Warenkorb-Link anzeigt, sowie die Beschriftung des In-den-Warenkorb-Buttons.
6. Binden Sie das Lookbook mit [lookbook id="123"] ein und ersetzen Sie 123 durch die ID, die beim Bearbeiten des Lookbooks angezeigt wird (es ist die Zahl hinter post= in der URL).

Der Bildschirm Lookbook bearbeiten, auf dem jeder Hotspot mit dem X/Y-Editor platziert und über die ID auf ein Produkt gerichtet wird.

Der Einstellungsbildschirm bietet unter jedem Feld eine eingebettete Hilfe und zeigt das Shortcode-Beispiel, sodass Sie während der Konfiguration nicht in der Dokumentation nachschlagen müssen. Da Lookbook HPOS-kompatibel ist und mit den Warenkorb- und Kassenblöcken funktioniert, fügt es sich sauber in eine moderne WooCommerce-Installation ein.

Praktische Tipps für ein Lookbook, das konvertiert

Das Plugin liefert den Mechanismus; ein paar Gewohnheiten lassen die Szene härter verkaufen.

• Heften Sie jeden kaufbaren Artikel an, aber nur kaufbare Artikel. Steht ein Produkt im Bild und im Katalog, geben Sie ihm einen Hotspot. Heften Sie keine Requisiten an, die Sie nicht verkaufen, denn das frustriert nur den Kunden, der sie antippt.
• Setzen Sie Markierungen auf das Produkt, nicht daneben. Ein Hotspot über der tatsächlichen Lampe ist sofort verständlich; einer, der daneben schwebt, lässt den Kunden raten. Verwenden Sie die Prozentkoordinaten, um jede Anheftung auf den Artikel selbst zu rücken.

Tipp: Ein Hotspot über dem tatsächlichen Artikel ist sofort verständlich; einer, der daneben schwebt, lässt den Kunden raten. Verwenden Sie die X/Y-Prozentkoordinaten, um jede Anheftung auf das Produkt selbst zu rücken.

• Halten Sie die Szene lesbar. Ein Dutzend überlappender Hotspots auf einem kleinen Bild werden zu einem Haufen Punkte, die niemand sauber antippen kann. Ist ein Look dicht, ziehen Sie weniger, gut verteilte Markierungen oder ein größeres Bild in Betracht.

Warnung: Ein Dutzend überlappender Hotspots auf einem kleinen Bild werden zu einem Haufen Punkte, die niemand sauber antippen kann. Verwenden Sie für einen dichten Look weniger, gut verteilte Markierungen oder ein größeres Bild.

• Setzen Sie die In-den-Warenkorb-Beschriftung bewusst ein. “Shop the Look” oder “In die Tasche” können besser zu Ihrer Markenstimme passen als ein generischer Button, und die Beschriftung wird einmal für alle Produkte gesetzt.
• Verlassen Sie sich auf die Live-Daten. Da Preise und Lagerbestand live gelesen werden, können Sie ein saisonales Lookbook einmal aufbauen und darauf vertrauen, dass es aktuell bleibt, während sich der Katalog ändert, statt es jedes Mal neu zu bauen, wenn sich ein Preis verschiebt.

Shoppable Lookbook im Vergleich zum Standard von WooCommerce

WooCommerce bietet keine integrierte Möglichkeit, ein Bild kaufbar zu machen. So sieht der Unterschied speziell für Shop-the-Look aus:

Funktion	Standard-WooCommerce	Lookbook
Produkte auf einem Bild anheften	Nicht integriert	Unbegrenzte Hotspots auf einem Bild
Markierungen positionieren	entfällt	X/Y-Editor in Prozent (0 bis 100)
Produktkarte auf dem Bild	Keine	Vorschaubild, Titel, aktueller Preis, In den Warenkorb
Aktueller Preis und Lagerbestand	entfällt	Live aus WooCommerce über die Produkt-ID gelesen
Barrierefreie Markierungen	entfällt	Echte Buttons, Tastatur, Screenreader-Beschriftungen
Überall einbinden	entfällt	[lookbook]-Shortcode
Performance	entfällt	Assets nur dort, wo verwendet, verzögert, ohne jQuery, ohne Layoutverschiebung
Gelöschtes Produkt	entfällt	Hotspot wird übersprungen, Seite bleibt intakt
Kosten	Kostenlos (kein solches Feature)	Kostenlos; PRO ergänzt Akzentfarbe, Galeriekarten, mehrere Bilder, Video-Hotspots, Analysen

Kostenlos im Vergleich zu PRO

Die kostenlose Edition ist das vollständige Shoppable-Bild, kein Lockangebot: unbegrenzte Hotspots, der X/Y-Editor, barrierefreie Markierungs-Buttons, das Produktkarten-Popover mit aktuellem Preis und In-den-Warenkorb, die globalen Darstellungseinstellungen und der [lookbook]-Shortcode sind alle enthalten, und das Frontend bleibt leichtgewichtig und unauffällig. Lookbook Pro baut darauf auf, für Shops, die reichhaltigere Szenen wünschen: eine Akzentfarbe für Markierungen, die Produktgalerie als Diashow innerhalb der Hotspot-Karten, mehrere Bilder pro Lookbook mit Tab-Navigation, Video-Hotspots und Klick-Analysen. Diese Funktionen sind bereits verfügbar; zusätzliche Animationsstile über die kostenlosen Markierungsstile hinaus sind geplant. Pro ist eine Erweiterung des kostenlosen Plugins, kein Ersatz, sodass alles oben Genannte exakt so weiterläuft wie zuvor.

Kurz gesagt

Ein Shoppable Lookbook verwandelt ein Styling-Foto in eine Shop-the-Look-Galerie, indem es Produkte als Hotspots auf dem Bild anheftet, die eine Karte mit aktuellem Preis und In-den-Warenkorb öffnen, sodass der Look identifiziert, kaufbar und stets aktuell ist. Ein schlichtes Foto verliert Umsatz, weil Kunden nicht erkennen, welche Produkte darauf sind, keinen Weg zum Warenkorb haben und jeder manuelle Link veraltet. Achten Sie auf aktuelle WooCommerce-Daten, barrierefreie Markierungen, ein leichtgewichtiges Frontend und sauberes Verhalten, wenn ein Produkt entfernt wird. Lookbook liefert all das kostenlos, und Lookbook Pro ergänzt zusätzlich Galeriekarten, mehrere Szenen, Video-Hotspots und Analysen.