Shoppable Lookbook — Shop the Look
Das shoppable Lookbook installieren und nutzen: Look erstellen, Hotspots platzieren, Varianten wählen, Karussell oder ausgeklappte Anzeige und Look-Kauf mit einem Klick.
Das Modul Shoppable Lookbook — Shop the Look verwandelt Ihre Ambiente-Fotos in interaktive Schaufenster: Sie platzieren klickbare Punkte (Hotspots) auf den in einem Bild sichtbaren Produkten, und Ihre Besucher können jeden Artikel entdecken und den kompletten Look mit einem einzigen Klick in den Warenkorb legen. Diese Dokumentation behandelt Installation, Erstellung eines Looks, Variantenauswahl, Anzeigemodi und das Verhalten im Shop.
Kompatibilität
- PrestaShop 8.0 bis 8.2
- PrestaShop 9.0
- Einzelshop und Multishop
- Oberfläche in 8 Sprachen übersetzt (EN, FR, DE, ES, IT, PL, PT, NL)
- Classic-basierte Themes
Installation
- Gehen Sie zu Module > Modul-Manager in Ihrem Backoffice.
- Klicken Sie auf Ein Modul hochladen und wählen Sie die Datei
dfshopthelook.zipaus. - Nach der Installation erscheint ein neuer Tab Shop The Look im Menü Katalog.
Bei der Installation registriert das Modul automatisch seine Anzeige-Hooks (Startseite und Produktseite) und erstellt die zum Speichern der Looks und ihrer Hotspots benötigten Tabellen.
Ersten Look erstellen
Öffnen Sie Katalog > Shop The Look und klicken Sie dann auf Einen neuen Look hinzufügen.
1. Titel und Bild angeben
Geben Sie einen Titel ein (pro Sprache übersetzbar) und optional eine kurze Beschreibung. Laden Sie anschließend das Look-Bild hoch: JPG, PNG, GIF oder WEBP, maximal 8 MB, vorzugsweise mindestens 1200 px breit. Sobald die Datei ausgewählt ist, erscheint sofort eine Vorschau im Editor, noch vor dem Speichern.
2. Hotspots platzieren
Klicken Sie direkt auf das Bild an die Stelle, an der sich ein Produkt befindet: Ein Suchfenster öffnet sich. Geben Sie den Namen oder die Referenz des Produkts ein und wählen Sie es aus der Liste (Miniaturbilder erleichtern die Identifikation).
Sie können einen Punkt jederzeit durch Ziehen mit der Maus neu positionieren. Die Koordinaten werden in Prozent gespeichert, was eine originalgetreue Platzierung unabhängig von der Anzeigegröße des Bildes im Shop garantiert.
3. Die auf dem Foto sichtbare Variante wählen
Hat das ausgewählte Produkt Varianten, erscheint ein zweiter Schritt: „Welche Variante ist auf dem Foto zu sehen?“. Wählen Sie genau die im Bild gezeigte Kombination (zum Beispiel „Farbe: Ecru, Größe: M“), oder belassen Sie es bei Standardvariante, wenn das Visual keine bestimmte Variante zeigt.
Diese Variante bleibt jederzeit änderbar: Jeder Punkt in der Liste unter dem Bild verfügt über ein eigenes Auswahlfeld. So korrigieren Sie eine Farbe oder Größe an einem längst gespeicherten Look, ohne den Hotspot zu löschen und neu zu setzen.
Wird eine festgelegte Variante später aus dem Katalog entfernt, fällt das Auswahlfeld automatisch auf „Standardvariante“ zurück.
4. Die Punkteliste verwalten
Unter dem Bild erscheint jeder Hotspot mit seiner Nummer, dem verknüpften Produkt, seiner Variante und seinen Koordinaten. Nutzen Sie das Papierkorb-Symbol, um einen Punkt zu entfernen. Sie können beliebig viele Hotspots setzen und sogar mehrere Punkte mit demselben Produkt verknüpfen.
5. Hervorheben und speichern
Aktivieren Sie Auf der Startseite hervorgehoben, wenn dieser Look das Startseiten-Karussell speisen soll. Legen Sie die Position (Anzeigereihenfolge) und den Status Aktiviert fest und klicken Sie dann auf Speichern.
In der Look-Liste lässt sich dieser Status über die Spalte Hervorgehoben mit einem einzigen Klick umschalten, ohne das Formular zu öffnen.
Anzeige konfigurieren
Auf der Konfigurationsseite des Moduls (Modul-Manager > Konfigurieren) steuern Sie Startseite und Produktseite unabhängig voneinander.
Zwei Modi zur Auswahl
- Karussell: mehrere Looks nebeneinander als Karten. Ein Klick öffnet ein immersives Fenster.
- Einzelner ausgeklappter Look: ein Look direkt in die Seite eingebettet, Bild links und Produktliste rechts, ganz ohne Popup-Fenster.
Beide Platzierungen werden getrennt eingestellt: So ist etwa ein großer ausgeklappter Look auf der Startseite und ein Karussell auf der Produktseite möglich.
Startseite
Im Karussell-Modus werden nur hervorgehobene Looks angezeigt, bis zu der von Ihnen gesetzten Grenze. Im Einzelmodus wählen Sie den gewünschten Look im Auswahlfeld Auf der Startseite anzuzeigender Look, oder belassen es bei „Erster hervorgehobener Look“.
Wird der gewählte Look später gelöscht oder deaktiviert, greift das Modul automatisch auf den ersten hervorgehobenen Look zurück, um einen leeren Block auf Ihrer Startseite zu vermeiden.
Produktseite
Im Karussell-Modus werden die Looks angezeigt, die den aktuellen Artikel enthalten, bis zur gesetzten Grenze. Im Einzelmodus wird der passendste Look mit diesem Artikel ausgeklappt dargestellt. Eine manuelle Auswahl ist nicht nötig.
Variantenwahl durch den Kunden
Die Option Kunden die Variante ändern lassen zeigt im Shop neben jedem Produkt ein Auswahlfeld. Deaktiviert gelten die im Backoffice gewählten Varianten. Aktivieren Sie sie für Mode (der Kunde wählt seine Größe), deaktivieren Sie sie für Wohndeko, wenn der Look unverändert bleiben soll.
Im Shop
Das Karussell
Ein horizontales Karussell präsentiert Ihre Looks als Karten. Jede Karte zeigt das Bild, ein Abzeichen mit der Produktanzahl und beim Überfahren zwei Schaltflächen: Look ansehen und Look kaufen.
Das Fenster „Look ansehen“
Ein Klick auf Look ansehen (oder auf die Karte) öffnet ein immersives Fenster: das vergrößerte Bild mit seinen pulsierenden Punkten auf der einen Seite, die Produktliste auf der anderen. Das Überfahren einer Produktzeile hebt den passenden Punkt im Bild hervor und umgekehrt.
Die ausgeklappte Anzeige
Im Einzelmodus wird derselbe Inhalt direkt in die Seite eingebettet, ohne Popup. Ein Klick auf einen Punkt hebt die passende Produktzeile hervor. Auf dem Smartphone werden die beiden Spalten untereinander angeordnet.
Preis und Verfügbarkeit pro Variante
Jedes Produkt zeigt Preis und Bild seiner Variante, formatiert nach der aktiven Währung und Sprache. Ist das Auswahlfeld aktiviert, aktualisiert ein Variantenwechsel Preis und Bestandsstatus in Echtzeit. Nicht verfügbare Artikel werden gekennzeichnet.
„Look kaufen“ mit einem Klick
Die Schaltfläche Look kaufen legt in einer einzigen Aktion alle mit dem Visual verknüpften Produkte in den Warenkorb. Das Modul:
- fügt die vom Kunden gewählte Variante hinzu, sonst die im Backoffice festgelegte, sonst die Standardvariante;
- berücksichtigt die am Produkt definierte Mindestmenge;
- überspringt automatisch Artikel, die ohne erlaubte Nachbestellung nicht verfügbar sind;
- dedupliziert Produkte, die auf mehreren Punkten platziert sind.
Der PrestaShop-Warenkorb wird anschließend nativ aktualisiert und ein Hinweis bestätigt das Hinzufügen. Falls einige Produkte nicht hinzugefügt werden konnten, weist eine Meldung darauf hin.
Mehrsprachigkeit
Die Oberfläche des Moduls ist in acht Sprachen übersetzt (EN, FR, DE, ES, IT, PL, PT, NL) und folgt der aktiven Sprache des Shops. Titel und Beschreibung jedes Looks werden Sprache für Sprache direkt im Look-Formular übersetzt.
Aktualisierung von einer früheren Version
Aktualisierungen laufen automatisch: Laden Sie die neue Version im Modul-Manager hoch, und PrestaShop führt die Migrationsskripte aus. Ihre Looks, Hotspots und Bilder bleiben erhalten.
Nach der Aktualisierung auf 1.2.0 sind alle vorhandenen Looks als hervorgehoben markiert und beide Platzierungen bleiben im Karussell-Modus: Ihr Shop verhält sich genau wie zuvor, und Sie aktivieren die Neuerungen, wann Sie möchten.
Fehlerbehebung
Das Karussell erscheint nicht auf der Startseite. Prüfen Sie, dass mindestens ein Look aktiv und hervorgehoben ist: Seit 1.2.0 zeigt das Startseiten-Karussell nur hervorgehobene Looks. In den Einstellungen erscheint zudem ein Hinweis, wenn keiner es ist.
Der Block erscheint nicht auf der Produktseite. Der Block wird nur angezeigt, wenn mindestens ein aktiver Look das aktuelle Produkt enthält und die entsprechende Option aktiviert ist.
Das Variantenauswahlfeld erscheint nicht. Es wird nur angezeigt, wenn die Option „Kunden die Variante ändern lassen“ aktiviert ist und das Produkt mindestens zwei Varianten hat.
Ein Produkt wird von „Look kaufen“ nicht hinzugefügt. Das ist das erwartete Verhalten, wenn es ohne erlaubte Nachbestellung nicht auf Lager, deaktiviert, nicht bestellbar oder nicht dem aktuellen Shop zugeordnet ist.
Der Bild-Upload schlägt fehl. Der Ordner modules/dfshopthelook/views/img/looks/ muss beschreibbar sein. Andernfalls erscheint ein Hinweis in den Moduleinstellungen.
Deinstallation
Die Deinstallation über den Modul-Manager entfernt die Tabellen des Moduls, die Looks, ihre Hotspots sowie die hochgeladenen Look-Bilder. Denken Sie daran, Ihre Visuals vorher zu sichern, falls Sie sie behalten möchten.