Lookbook Shoppable — Shop the Look
Installare e usare il lookbook shoppable: creare un look, posizionare gli hotspot, configurare i caroselli 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 configurazione della visualizzazione e il comportamento nel negozio.
Compatibilità
- PrestaShop 8.0 a 8.2
- PrestaShop 9.0
- Negozio singolo e multi-negozio
- Multilingua (FR / EN / ES / DE / IT)
- 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: prediligi un visual di almeno 1200 px di larghezza, in formato JPG, PNG o WEBP. 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). Il punto viene quindi posizionato e numerato.
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. Gestire l’elenco dei punti
Sotto l’immagine, ogni hotspot appare in un elenco con il suo numero, il prodotto associato 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.
4. Salvare
Imposta la posizione (ordine di visualizzazione del look) e lo stato Attivato, quindi clicca su Salva. Il look è pronto.
Configurare la visualizzazione
Dalla pagina di configurazione del modulo (Gestore dei moduli > Configura), controlli le due posizioni in modo indipendente:
- Carosello sulla home page: attivazione e numero massimo di look mostrati.
- Look sulla scheda prodotto: attivazione e numero massimo di look mostrati. Nel blocco «Completa il look» compaiono solo i look che contengono il prodotto consultato.
Nel negozio
Il carosello
Sulla home page, 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 modale «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. Ogni prodotto mostra il suo prezzo formattato secondo la valuta e la lingua attive; 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 predefinita di ogni prodotto;
- 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 (esauriti), un messaggio lo segnala.
Multilingua
Il titolo e la descrizione di ogni look sono traducibili lingua per lingua direttamente dalla scheda del look. Le etichette dell’interfaccia nel negozio (pulsanti, notifiche) seguono la lingua attiva del negozio.
Risoluzione dei problemi
Il carosello non appare sulla home page. Verifica che almeno un look sia attivato, che l’opzione di visualizzazione sulla home page sia selezionata e che il tuo tema attivi correttamente l’hook di visualizzazione della home page.
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.
Un prodotto non viene aggiunto da «Acquista il look». È il comportamento previsto quando è esaurito senza riordino consentito, disattivato o non disponibile per l’acquisto.
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 esportare o salvare i tuoi visual in anticipo se desideri conservarli.