# Lookbook Shoppable — Shop the Look > 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… - Pagina: - Lingua: it - Aggiornato il: 2026-09-09 - Altre lingue: [fr](https://www.datafirefly.com/documentation/dfshopthelook/index.md), [en](https://www.datafirefly.com/en/documentation/dfshopthelook/index.md), [es](https://www.datafirefly.com/es/documentation/dfshopthelook/index.md), [de](https://www.datafirefly.com/de/documentation/dfshopthelook/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfshopthelook/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfshopthelook/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfshopthelook/index.md) - Indice: 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 1. Vai su **Moduli > Gestore dei moduli** nel tuo back-office. 2. Clicca su **Carica un modulo** e seleziona il file `dfshopthelook.zip`. 3. 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.