Shoppable Lookbook in WooCommerce: Aus einem Bild eine Shop-the-Look-Galerie mit Hotspots machen

Ein Styling-Foto ist das Überzeugendste in einem Shop und zugleich das, woraus man am schwersten kaufen kann. Ein Kunde sieht ein Outfit oder einen Raum, den er haben möchte, kann aber nicht erkennen, welche Produkte auf der Aufnahme zu sehen sind oder wie er sie in den Warenkorb legt. 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, worauf Sie achten sollten und wie Lookbook das umsetzt.

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. 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 zu suchen.

Warum ein schlichtes Foto nicht verkauft

Ein Styling-Foto für sich allein hat drei Probleme:

• Kunden können nicht erkennen, welche Produkte auf dem Foto sind. Sie sehen den Look, nicht die Artikelnummern.
• Es gibt keinen Weg von der Inspiration zum Warenkorb. Jeder Artikel muss im Katalog mühsam gesucht werden, und die meisten geben auf.
• 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 Shoppable Lookbook löst alle drei Probleme, indem es die Produkte an das Bild selbst bindet und ihre Daten live ausliest.

Worauf Sie achten sollten

Nicht jedes Shop-the-Look-Werkzeug ist gleich gebaut. Vier Dinge sind entscheidend:

• Aktuelle Produktdaten. Hotspots sollten Titel, Preis, Vorschaubild und Warenkorb-Link aus dem echten WooCommerce-Produkt auslesen, damit nichts veraltet.
• Barrierefreiheit. Markierungen sollten echte Buttons sein, die mit der Tastatur bedienbar sind und Beschriftungen für Screenreader tragen, nicht nur dekorative Punkte.
• Performance. Die Galerie sollte keine Assets seitenweit laden und nicht das Layout verschieben. Schwere Galerien verlangsamen den Shop und schieben Inhalte beim Laden herum.
• Sauberes Verhalten bei Fehlern. Wird ein angeheftetes Produkt gelöscht, sollte sein Hotspot unauffällig verschwinden, statt die Seite zu beschädigen.

Wie Lookbook das umsetzt

Lookbook for WooCommerce verwandelt ein einzelnes Bild in eine kaufbare Szene. 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.

Jeder Hotspot wird mit einem einfachen X/Y-Editor positioniert: Sie geben jedem Produkt eine Position als Prozentwert von der oberen linken Bildecke aus im Bereich von 0 bis 100, sodass sich die Markierung am Artikel im Foto ausrichtet. Markierungen sind echte Buttons, mit der Tastatur bedienbar und für Screenreader beschriftet.

Ö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. Die Beschriftung des In-den-Warenkorb-Buttons und die Frage, ob der Preis angezeigt wird, sind Schalter unter WooCommerce → Lookbook, die für alle Lookbooks zugleich gelten.

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. Ein fehlendes Bild, ein Lookbook ohne Hotspots oder ein gelöschtes Produkt werden allesamt sauber dargestellt, ohne fehlerhaftes Markup. Bei der Deinstallation entfernt das Plugin seine eigenen Daten.

Die kostenlose Edition ist das vollständige Shoppable-Bild. Lookbook Pro erweitert es um 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 drei kostenlosen Markierungsstile hinaus sind geplant.

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

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