Lookbook Shoppable — Shop the Look
Installare e usare il lookbook shoppable: creare un look, posizionare gli hotspot, scegliere le combinazioni, impostare carosello o vista estesa e l'acquisto del look con un clic.
Il modulo Lookbook Shoppable — Shop the Look trasforma le tue foto d’ambiente in vetrine interattive: posizioni punti cliccabili (hotspot) sui prodotti visibili in un’immagine e i tuoi visitatori possono scoprire ogni articolo e aggiungere l’intero look al carrello con un solo clic. Questa documentazione copre l’installazione, la creazione di un look, la scelta delle combinazioni, le modalità di visualizzazione e il comportamento nel negozio.
Compatibilità
- PrestaShop 8.0 a 8.2
- PrestaShop 9.0
- Negozio singolo e multi-negozio
- Interfaccia tradotta in 8 lingue (EN, FR, DE, ES, IT, PL, PT, NL)
- Temi basati su Classic
Installazione
- Vai su Moduli > Gestore dei moduli nel tuo back-office.
- Clicca su Carica un modulo e seleziona il file
dfshopthelook.zip. - Una volta installato, appare una nuova scheda Shop The Look nel menu Catalogo.
All’installazione, il modulo registra automaticamente i suoi hook di visualizzazione (home page e scheda prodotto) e crea le tabelle necessarie per memorizzare i look e i loro hotspot.
Creare il primo look
Apri Catalogo > Shop The Look quindi clicca su Aggiungi un nuovo look.
1. Indicare il titolo e l’immagine
Inserisci un titolo (traducibile per lingua) e, se lo desideri, una breve descrizione. Carica poi l’immagine del look: JPG, PNG, GIF o WEBP, massimo 8 MB, preferibilmente di almeno 1200 px di larghezza. Non appena selezioni il file, un’anteprima appare immediatamente nell’editor, ancor prima del salvataggio.
2. Posizionare gli hotspot
Clicca direttamente sull’immagine nel punto in cui si trova un prodotto: si apre una finestra di ricerca. Digita il nome o il riferimento del prodotto e selezionalo dall’elenco (le miniature facilitano l’identificazione).
Puoi riposizionare un punto in qualsiasi momento trascinandolo con il mouse. Le coordinate vengono salvate in percentuale, il che garantisce un posizionamento fedele indipendentemente dalla dimensione di visualizzazione dell’immagine nel negozio.
3. Scegliere la combinazione visibile nella foto
Se il prodotto selezionato ha combinazioni, compare un secondo passaggio: «Quale combinazione è visibile nella foto?». Scegli la combinazione esatta mostrata nell’immagine (per esempio «Colore: Ecru, Taglia: M»), oppure lascia Combinazione predefinita se il visual non mostra una variante particolare.
Questa combinazione resta modificabile in qualsiasi momento: ogni punto dell’elenco sotto l’immagine dispone di un proprio menu a tendina. Puoi quindi correggere un colore o una taglia su un look salvato da tempo, senza eliminare e riposizionare l’hotspot.
Se una combinazione fissata viene poi rimossa dal catalogo, il menu torna automaticamente su «Combinazione predefinita».
4. Gestire l’elenco dei punti
Sotto l’immagine, ogni hotspot appare con il suo numero, il prodotto associato, la sua combinazione e le sue coordinate. Usa l’icona del cestino per rimuovere un punto. Puoi posizionare tutti gli hotspot necessari e persino associare più punti allo stesso prodotto.
5. Messa in evidenza e salvataggio
Attiva In evidenza sulla home page se questo look deve alimentare il carosello della home page. Imposta la posizione (ordine di visualizzazione) e lo stato Attivato, quindi clicca su Salva.
Nell’elenco dei look, una colonna In evidenza permette di cambiare questo stato con un solo clic, senza aprire la scheda.
Configurare la visualizzazione
Dalla pagina di configurazione del modulo (Gestore dei moduli > Configura), controlli la home page e la scheda prodotto in modo indipendente.
Due modalità a scelta
- Carosello: più look presentati affiancati sotto forma di schede. Un clic apre una finestra immersiva.
- Look singolo esteso: un solo look integrato direttamente nella pagina, immagine a sinistra ed elenco dei prodotti a destra, senza alcuna finestra popup.
Le due posizioni si configurano separatamente: puoi ad esempio mostrare un grande look esteso sulla home page e un carosello sulla scheda prodotto.
Home page
In modalità carosello vengono mostrati solo i look in evidenza, entro il limite che imposti. In modalità look singolo, scegli il look desiderato nel menu a tendina Look da mostrare sulla home page, oppure lascia «Primo look in evidenza».
Se il look selezionato viene poi eliminato o disattivato, il modulo passa automaticamente al primo look in evidenza, per evitare un blocco vuoto sulla home page.
Scheda prodotto
In modalità carosello vengono mostrati i look che contengono l’articolo consultato, entro il limite impostato. In modalità look singolo viene mostrato esteso il look più pertinente che contiene quell’articolo. Non è necessaria alcuna selezione manuale.
Scelta della combinazione da parte del cliente
L’opzione Consenti al cliente di cambiare la combinazione mostra un selettore accanto a ogni prodotto lato negozio. Se disattivata, si applicano le combinazioni scelte nel back office. Attivala nella moda (il cliente sceglie la taglia), disattivala nell’arredamento se il look deve restare fisso.
Nel negozio
Il carosello
Un carosello orizzontale presenta i tuoi look sotto forma di schede. Ogni scheda mostra l’immagine, un badge con il numero di prodotti e due pulsanti al passaggio del mouse: Vedi il look e Acquista il look.
La finestra «Vedi il look»
Un clic su Vedi il look (o sulla scheda) apre una finestra immersiva: l’immagine ingrandita con i suoi punti pulsanti da un lato, l’elenco dei prodotti dall’altro. Passare il mouse su una riga prodotto evidenzia il punto corrispondente sull’immagine, e viceversa.
La visualizzazione estesa
In modalità look singolo, lo stesso contenuto è integrato direttamente nella pagina, senza popup. Cliccare un punto evidenzia la riga prodotto corrispondente. Su mobile, le due colonne si impilano.
Prezzo e disponibilità per combinazione
Ogni prodotto mostra il prezzo e l’immagine della sua combinazione, formattati secondo la valuta e la lingua attive. Se il selettore è attivo, cambiare combinazione aggiorna prezzo e stato di disponibilità in tempo reale. Gli articoli non disponibili sono segnalati.
«Acquista il look» con un clic
Il pulsante Acquista il look aggiunge al carrello, in un’unica azione, tutti i prodotti associati al visual. Il modulo:
- aggiunge la combinazione scelta dal cliente, altrimenti quella fissata nel back office, altrimenti la combinazione predefinita;
- rispetta la quantità minima definita sul prodotto;
- ignora automaticamente gli articoli esauriti senza riordino consentito;
- deduplica i prodotti posizionati su più punti.
Il carrello di PrestaShop viene poi aggiornato in modo nativo e una notifica conferma l’aggiunta. Se alcuni prodotti non hanno potuto essere aggiunti, un messaggio lo segnala.
Multilingua
L’interfaccia del modulo è tradotta in otto lingue (EN, FR, DE, ES, IT, PL, PT, NL) e segue la lingua attiva del negozio. Il titolo e la descrizione di ogni look si traducono lingua per lingua direttamente dalla scheda del look.
Aggiornamento da una versione precedente
Gli aggiornamenti sono automatici: carica la nuova versione dal gestore dei moduli e PrestaShop esegue gli script di migrazione. I tuoi look, hotspot e immagini vengono conservati.
Dopo l’aggiornamento alla 1.2.0, tutti i look esistenti risultano in evidenza e le due posizioni restano in modalità carosello: il tuo negozio si comporta esattamente come prima e attivi le novità quando vuoi.
Risoluzione dei problemi
Il carosello non appare sulla home page. Verifica che almeno un look sia attivo e in evidenza: dalla 1.2.0 il carosello della home page mostra solo i look in evidenza. Nelle impostazioni compare del resto un avviso se non ce n’è nessuno.
Il blocco non appare sulla scheda prodotto. Il blocco viene mostrato solo se almeno un look attivo contiene il prodotto consultato e la relativa opzione è attivata.
Il selettore di combinazione non appare. Viene mostrato solo se l’opzione «Consenti al cliente di cambiare la combinazione» è attiva e il prodotto ha almeno due combinazioni.
Un prodotto non viene aggiunto da «Acquista il look». È il comportamento previsto quando è esaurito senza riordino consentito, disattivato, non disponibile per l’acquisto o non associato al negozio corrente.
Il caricamento dell’immagine non riesce. La cartella modules/dfshopthelook/views/img/looks/ deve essere scrivibile. In caso contrario, un avviso compare nelle impostazioni del modulo.
Disinstallazione
La disinstallazione dal gestore dei moduli elimina le tabelle del modulo, i look, i loro hotspot e le immagini dei look caricate. Ricorda di salvare i tuoi visual in anticipo se desideri conservarli.