Shoppable Lookbook — Shop the Look
Das shoppable Lookbook installieren und nutzen: einen Look erstellen, Hotspots platzieren, die Karussells und den Look-Kauf mit einem Klick konfigurieren.
Das Modul Shoppable Lookbook — Shop the Look verwandelt deine Ambiente-Fotos in interaktive Schaufenster: Du platzierst klickbare Punkte (Hotspots) auf den in einem Bild sichtbaren Produkten, und deine 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, Konfiguration der Anzeige und das Verhalten im Shop.
Kompatibilität
- PrestaShop 8.0 bis 8.2
- PrestaShop 9.0
- Einzelshop und Multishop
- Mehrsprachig (FR / EN / ES / DE / IT)
- Classic-basierte Themes
Installation
- Gehe zu Module > Modul-Manager in deinem Backoffice.
- Klicke auf Ein Modul hochladen und wähle 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
Öffne Katalog > Shop The Look und klicke dann auf Einen neuen Look hinzufügen.
1. Titel und Bild angeben
Gib einen Titel ein (pro Sprache übersetzbar) und optional eine kurze Beschreibung. Lade anschließend das Look-Bild hoch: Bevorzuge ein Visual mit mindestens 1200 px Breite im Format JPG, PNG oder WEBP. Sobald die Datei ausgewählt ist, erscheint sofort eine Vorschau im Editor, noch vor dem Speichern.
2. Hotspots platzieren
Klicke direkt auf das Bild an die Stelle, an der sich ein Produkt befindet: Ein Suchfenster öffnet sich. Gib den Namen oder die Referenz des Produkts ein und wähle es aus der Liste (Miniaturbilder erleichtern die Identifikation). Der Punkt wird gesetzt und nummeriert.
Du kannst 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 Punkteliste verwalten
Unter dem Bild erscheint jeder Hotspot in einer Liste mit seiner Nummer, dem verknüpften Produkt und seinen Koordinaten. Nutze das Papierkorb-Symbol, um einen Punkt zu entfernen. Du kannst beliebig viele Hotspots setzen und sogar mehrere Punkte mit demselben Produkt verknüpfen.
4. Speichern
Lege die Position (Anzeigereihenfolge des Looks) und den Status Aktiviert fest und klicke dann auf Speichern. Der Look ist fertig.
Anzeige konfigurieren
Auf der Konfigurationsseite des Moduls (Modul-Manager > Konfigurieren) steuerst du beide Platzierungen unabhängig:
- Karussell auf der Startseite: Aktivierung und maximale Anzahl der angezeigten Looks.
- Looks auf der Produktseite: Aktivierung und maximale Anzahl der angezeigten Looks. Im Block „Komplettiere den Look“ erscheinen nur Looks, die das aktuelle Produkt enthalten.
Im Shop
Das Karussell
Auf der Startseite präsentiert ein horizontales Karussell deine 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 Modal „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. Jedes Produkt zeigt seinen Preis im Format der aktiven Währung und Sprache; 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 Standardkombination jedes Produkts hinzu;
- 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 (nicht auf Lager), weist eine Meldung darauf hin.
Mehrsprachigkeit
Titel und Beschreibung jedes Looks sind Sprache für Sprache direkt im Look-Formular übersetzbar. Die Oberflächentexte im Shop (Schaltflächen, Benachrichtigungen) folgen der aktiven Sprache des Shops.
Fehlerbehebung
Das Karussell erscheint nicht auf der Startseite. Prüfe, dass mindestens ein Look aktiviert ist, die Anzeigeoption für die Startseite angehakt ist und dein Theme den Anzeige-Hook der Startseite korrekt auslöst.
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.
Ein Produkt wird von „Look kaufen“ nicht hinzugefügt. Das ist das erwartete Verhalten, wenn es ohne erlaubte Nachbestellung nicht auf Lager, deaktiviert oder nicht bestellbar ist.
Deinstallation
Die Deinstallation über den Modul-Manager entfernt die Tabellen des Moduls, die Looks, ihre Hotspots sowie die hochgeladenen Look-Bilder. Denke daran, deine Visuals vorher zu exportieren oder zu sichern, falls du sie behalten möchtest.