Shoppable Lookbook — Shop the Look
De shoppable lookbook installeren en gebruiken: een look maken, hotspots plaatsen, varianten kiezen, carrousel of uitgeklapte weergave instellen en de look met één klik kopen.
De module Shoppable Lookbook — Shop the Look maakt van uw sfeerfoto’s interactieve etalages: u plaatst klikbare punten (hotspots) op de producten die op een afbeelding te zien zijn, en uw bezoekers kunnen elk artikel ontdekken en de hele look met één klik in de winkelwagen leggen. Deze documentatie behandelt de installatie, het maken van een look, de variantkeuze, de weergavemodi en het gedrag in de winkel.
Compatibiliteit
- PrestaShop 8.0 tot 8.2
- PrestaShop 9.0
- Enkele shop en multishop
- Interface vertaald in 8 talen (EN, FR, DE, ES, IT, PL, PT, NL)
- Thema’s op basis van Classic
Installatie
- Ga naar Modules > Modulebeheer in uw back office.
- Klik op Een module uploaden en selecteer het bestand
dfshopthelook.zip. - Na de installatie verschijnt een nieuw tabblad Shop The Look onder het menu Catalogus.
Bij de installatie registreert de module automatisch zijn weergave-hooks (homepage en productpagina) en maakt hij de tabellen aan die nodig zijn om de looks en hun hotspots op te slaan.
Uw eerste look maken
Open Catalogus > Shop The Look en klik daarna op Een nieuwe look toevoegen.
1. Titel en afbeelding invullen
Voer een titel in (vertaalbaar per taal) en desgewenst een korte beschrijving. Upload vervolgens de lookafbeelding: JPG, PNG, GIF of WEBP, maximaal 8 MB, bij voorkeur minstens 1200 px breed. Zodra het bestand is gekozen, verschijnt er meteen een voorvertoning in de editor, nog voor het opslaan.
2. De hotspots plaatsen
Klik rechtstreeks op de afbeelding op de plek waar een product zich bevindt: er opent een zoekvenster. Typ de naam of de referentie van het product en selecteer het in de lijst (miniaturen maken het herkennen makkelijker).
U kunt een punt op elk moment verplaatsen door het met de muis te slepen. De coördinaten worden in procenten opgeslagen, wat een getrouwe plaatsing garandeert ongeacht de weergavegrootte van de afbeelding in de winkel.
3. De op de foto zichtbare variant kiezen
Heeft het gekozen product varianten, dan verschijnt een tweede stap: „Welke variant is te zien op de foto?”. Kies precies de combinatie die op de afbeelding staat (bijvoorbeeld „Kleur: Ecru, Maat: M”), of laat Standaardvariant staan als het beeld geen specifieke variant toont.
Die variant blijft op elk moment aanpasbaar: elk punt in de lijst onder de afbeelding heeft een eigen keuzelijst. U kunt dus een kleur of maat corrigeren in een look die al lang is opgeslagen, zonder de hotspot te verwijderen en opnieuw te plaatsen.
Wordt een vastgezette variant later uit de catalogus verwijderd, dan valt de keuzelijst automatisch terug op „Standaardvariant”.
4. De puntenlijst beheren
Onder de afbeelding verschijnt elke hotspot met zijn nummer, het gekoppelde product, de variant en de coördinaten. Gebruik het prullenbakpictogram om een punt te verwijderen. U kunt zoveel hotspots plaatsen als nodig, en zelfs meerdere punten aan hetzelfde product koppelen.
5. Uitlichten en opslaan
Schakel Uitgelicht op de homepage in als deze look de carrousel op de homepage moet voeden. Stel de positie (weergavevolgorde) en de status Ingeschakeld in, en klik daarna op Opslaan.
In de lookslijst kunt u die status met de kolom Uitgelicht met één klik omschakelen, zonder het formulier te openen.
De weergave configureren
Op de configuratiepagina van de module (Modulebeheer > Configureren) stuurt u de homepage en de productpagina onafhankelijk van elkaar aan.
Twee modi naar keuze
- Carrousel: meerdere looks naast elkaar als kaarten. Een klik opent een groot venster.
- Eén uitgeklapte look: één look rechtstreeks in de pagina, afbeelding links en productlijst rechts, zonder enig popupvenster.
Beide plekken worden apart ingesteld: u kunt bijvoorbeeld een grote uitgeklapte look op de homepage tonen en een carrousel op de productpagina.
Homepage
In carrouselmodus worden alleen uitgelichte looks getoond, tot de limiet die u instelt. In de modus met één look kiest u de gewenste look in de keuzelijst Look om op de homepage te tonen, of laat u „Eerste uitgelichte look” staan.
Wordt de gekozen look later verwijderd of uitgeschakeld, dan schakelt de module automatisch over op de eerste uitgelichte look, om een leeg blok op uw homepage te voorkomen.
Productpagina
In carrouselmodus worden de looks getoond die het bekeken artikel bevatten, tot de ingestelde limiet. In de modus met één look wordt de best passende look met dat artikel uitgeklapt getoond. Handmatig selecteren is niet nodig.
Variantkeuze door de klant
De optie Klant de variant laten wijzigen toont een keuzelijst naast elk product in de winkel. Uitgeschakeld gelden de in de back office gekozen varianten. Zet de optie aan voor mode (de klant kiest zijn maat) en uit voor interieur als de look vast moet blijven.
In de winkel
De carrousel
Een horizontale carrousel toont uw looks als kaarten. Elke kaart toont de afbeelding, een label met het aantal producten en twee knoppen bij het zweven: Bekijk de look en Koop de look.
Het venster „Bekijk de look”
Een klik op Bekijk de look (of op de kaart) opent een groot venster: de vergrote afbeelding met de pulserende punten aan de ene kant, de productlijst aan de andere. Zweven over een productregel markeert het bijbehorende punt op de afbeelding, en omgekeerd.
De uitgeklapte weergave
In de modus met één look wordt dezelfde inhoud rechtstreeks in de pagina geplaatst, zonder popup. Op een punt klikken markeert de bijbehorende productregel. Op mobiel komen de twee kolommen onder elkaar.
Prijs en beschikbaarheid per variant
Elk product toont de prijs en de afbeelding van zijn variant, opgemaakt volgens de actieve valuta en taal. Staat de keuzelijst aan, dan werkt het wisselen van variant de prijs en de voorraadstatus live bij. Niet-leverbare artikelen worden gemarkeerd.
„Koop de look” met één klik
De knop Koop de look voegt in één handeling alle aan het beeld gekoppelde producten toe aan de winkelwagen. De module:
- voegt de door de klant gekozen variant toe, anders die welke in de back office is vastgezet, en anders de standaardvariant;
- respecteert de op het product ingestelde minimumhoeveelheid;
- slaat automatisch artikelen over die niet op voorraad zijn en niet nabesteld mogen worden;
- ontdubbelt producten die op meerdere punten staan.
De PrestaShop-winkelwagen wordt daarna native ververst en een melding bevestigt de toevoeging. Konden sommige producten niet worden toegevoegd, dan meldt een bericht dat.
Meertaligheid
De interface van de module is vertaald in acht talen (EN, FR, DE, ES, IT, PL, PT, NL) en volgt de actieve taal van de winkel. De titel en de beschrijving van elke look vertaalt u taal per taal rechtstreeks in het lookformulier.
Bijwerken vanaf een eerdere versie
Updates verlopen automatisch: upload de nieuwe versie via het modulebeheer en PrestaShop voert de migratiescripts uit. Uw looks, hotspots en afbeeldingen blijven behouden.
Na de update naar 1.2.0 zijn alle bestaande looks gemarkeerd als uitgelicht en blijven beide plekken in carrouselmodus: uw winkel gedraagt zich precies als voorheen en u schakelt de nieuwigheden in wanneer u wilt.
Problemen oplossen
De carrousel verschijnt niet op de homepage. Controleer of minstens één look actief en uitgelicht is: sinds 1.2.0 toont de carrousel op de homepage alleen uitgelichte looks. In de instellingen verschijnt trouwens een waarschuwing wanneer er geen enkele is.
Het blok verschijnt niet op de productpagina. Het blok wordt alleen getoond als minstens één actieve look het bekeken product bevat en de bijbehorende optie is ingeschakeld.
De variantkeuzelijst verschijnt niet. Die wordt alleen getoond als de optie „Klant de variant laten wijzigen” is ingeschakeld en het product minstens twee varianten heeft.
Een product wordt niet toegevoegd door „Koop de look”. Dat is het verwachte gedrag wanneer het niet op voorraad is zonder toegestane nabestelling, uitgeschakeld is, niet bestelbaar is of niet aan de huidige shop is gekoppeld.
Het uploaden van de afbeelding mislukt. De map modules/dfshopthelook/views/img/looks/ moet beschrijfbaar zijn. Is dat niet zo, dan verschijnt er een waarschuwing in de module-instellingen.
Verwijderen
Verwijderen via het modulebeheer wist de tabellen van de module, de looks, hun hotspots en de geüploade lookafbeeldingen. Denk eraan uw beelden vooraf veilig te stellen als u ze wilt behouden.