Galleria Prodotto PrestaShop — Guida completa
Installare e configurare la galleria prodotto: zoom HD, schermo intero mobile, filtro per combinazione e ottimizzazioni LCP.
Panoramica
Galleria Prodotto PrestaShop (cartella modulo dfgallerypro) sostituisce la galleria immagini nativa della scheda prodotto con una galleria moderna: zoom interno ad alta risoluzione al passaggio del mouse, miniature verticali od orizzontali, visualizzatore a schermo intero con pinch su mobile, filtro immagini per combinazione selezionata e strategia di caricamento ottimizzata per il Largest Contentful Paint.
Il modulo non sovrascrive alcun template: la galleria viene montata con JavaScript al posto del blocco immagini nativo, che viene nascosto. Non usa tabelle SQL né override, e il suo JavaScript è scritto in vanilla JS, senza jQuery.
Installazione
Requisiti
- PrestaShop da 8.0 a 9.x
- PHP 7.4 o superiore
- Un tema basato sul tema classic (o che esponga i contenitori di immagini standard della scheda prodotto)
Installare il modulo
- Nel back office, apri Moduli → Gestore dei moduli.
- Clicca su Carica un modulo e seleziona l’archivio
dfgallerypro.zip. - A installazione completata, clicca su Configura.
L’installazione non aggiunge alcuna tabella al database: vengono create solo chiavi di configurazione standard. La disinstallazione le rimuove completamente.
Configurazione
Tutte le impostazioni si trovano nella schermata di configurazione del modulo. Le modifiche sono applicate immediatamente sul negozio, senza svuotare la cache.
Posizione delle miniature
- Sinistra (verticale) — colonna di miniature a sinistra dell’immagine principale. È l’impostazione predefinita.
- Destra (verticale) — colonna a destra dell’immagine principale.
- In basso (orizzontale) — striscia orizzontale sotto l’immagine principale.
Su mobile (sotto i 768 px), le miniature passano sempre a una striscia orizzontale scorrevole sotto l’immagine principale, qualunque sia l’impostazione scelta.
Modalità e livello di zoom
- Al passaggio del mouse (zoom interno) — lo zoom segue il cursore all’interno dell’immagine. Attivo solo su dispositivi con puntatore preciso (desktop), rilevati automaticamente.
- Clic (apre lo schermo intero) — nessuno zoom al passaggio del mouse; un clic apre il visualizzatore a schermo intero.
- Disattivato — nessuna interazione di zoom sulla scena.
Il livello di zoom definisce il fattore di ingrandimento dello zoom al passaggio del mouse, da 1,5 a 4. Il valore consigliato è tra 2 e 3.
Al primo passaggio del mouse, il modulo precarica in background l’immagine originale che hai caricato (senza ridimensionamento) e la usa per lo zoom. Più grandi sono le immagini originali, più nitido sarà lo zoom.
Visualizzatore a schermo intero e pinch
Con il visualizzatore a schermo intero attivo, un clic sull’immagine principale (o sul pulsante di ingrandimento in basso a destra) apre un visualizzatore immersivo su sfondo scuro: contatore delle immagini, frecce, chiusura con il tasto Escape o con un clic sullo sfondo.
L’opzione Zoom con pinch su mobile attiva in questo visualizzatore il pinch a due dita (fino a 4x), il doppio tocco per ingrandire e ridurre e il trascinamento dell’immagine ingrandita. Su desktop, la rotella del mouse ingrandisce.
Filtro immagini per combinazione
- Rigoroso — vengono mostrate solo le immagini associate alla combinazione selezionata.
- Intelligente (consigliato) — le immagini della combinazione appaiono per prime, seguite dalle altre immagini del prodotto.
- Disattivato — tutte le immagini sono sempre mostrate.
In tutte le modalità, se la combinazione selezionata non ha immagini associate, viene mostrata la galleria completa come ripiego. La galleria si risincronizza automaticamente a ogni cambio di variante, anche dopo l’aggiornamento AJAX del blocco immagini da parte del core di PrestaShop.
Caricamento differito e precaricamento LCP
- Caricamento differito (lazy loading) — solo la prima immagine viene caricata subito; le miniature oltre la quarta e le immagini successive sono caricate in differita. Le immagini adiacenti vengono precaricate a ogni navigazione per transizioni istantanee.
- Precarica l’immagine di copertina (LCP) — aggiunge nell’intestazione della pagina un suggerimento di precaricamento a priorità alta per l’immagine di copertina, migliorando il Largest Contentful Paint della scheda prodotto.
- Mostra le frecce di navigazione — mostra le frecce precedente / successiva sull’immagine principale (visibili al passaggio del mouse su desktop, sempre visibili su mobile).
Associare le immagini alle combinazioni
Il filtro per combinazione si basa sulle associazioni native di PrestaShop, senza configurazione aggiuntiva nel modulo:
- Apri la scheda prodotto nel back office, scheda Combinazioni.
- Apri ogni combinazione e spunta le immagini corrispondenti nella sezione Immagini.
- Salva: la galleria userà queste associazioni immediatamente sul negozio.
Buona pratica: associa a ogni combinazione le sue foto specifiche (colore, finitura) e lascia senza associazione le foto generiche (ambientazioni, guide alle taglie). In modalità intelligente resteranno visibili dopo le foto della combinazione.
Comportamento sul negozio
Su desktop
- Passaggio del mouse sull’immagine: zoom interno che segue il cursore (con la modalità corrispondente attiva).
- Clic sull’immagine o sul pulsante di ingrandimento: apre il visualizzatore a schermo intero.
- Frecce della tastiera per navigare, Escape per chiudere, rotella per ingrandire nel visualizzatore.
Su mobile
- Scorrimento orizzontale sull’immagine principale per cambiare immagine.
- Tocco sull’immagine: apre lo schermo intero.
- Nello schermo intero: pinch a due dita, doppio tocco, scorrimento per navigare, contatore di posizione.
Prestazioni e LCP
Il modulo è progettato per migliorare i Core Web Vitals della scheda prodotto, non per degradarli:
- L’immagine di copertina viene annunciata come precaricamento a priorità alta nell’intestazione della pagina (opzionale).
- La prima immagine di scena viene caricata con priorità alta e decodifica asincrona.
- Le miniature usano il lazy loading nativo del browser; l’immagine originale per lo zoom viene caricata solo al primo passaggio del mouse.
- Il JavaScript viene caricato a fondo pagina, senza dipendenze esterne.
Compatibilità dei temi e risoluzione dei problemi
Il modulo punta ai contenitori di immagini standard dei temi basati su classic. Se il tuo tema usa una struttura completamente diversa, la galleria nativa resta semplicemente visualizzata, senza errori.
- La galleria non appare — verifica che il tuo tema esponga un contenitore di immagini standard sulla scheda prodotto. Contatta il nostro supporto con l’URL di una scheda prodotto: l’adattamento a un tema specifico è generalmente rapido.
- Lo zoom sembra sfocato — la nitidezza dello zoom dipende dalla risoluzione delle immagini originali caricate. Carica immagini di almeno 1500 px di larghezza per un risultato ottimale.
- Il filtro non reagisce al cambio di combinazione — verifica che le immagini siano associate alle combinazioni nella scheda Combinazioni del prodotto e che la modalità di filtro non sia su Disattivato.
- Anteprima rapida — la finestra di anteprima rapida conserva deliberatamente la galleria nativa per evitare interferenze con il JavaScript del core.
Disinstallazione
La disinstallazione dal gestore dei moduli rimuove tutte le chiavi di configurazione del modulo. Non resta alcun dato residuo: il modulo non ha creato tabelle, né override, né file al di fuori della propria cartella.
Changelog
- 1.0.0 (16/07/2026) — Versione iniziale: zoom HD al passaggio del mouse basato sull’immagine originale, visualizzatore a schermo intero con pinch, filtro immagini per combinazione (rigoroso / intelligente), precaricamento LCP, lazy loading, miniature verticali od orizzontali, traduzioni FR, EN, ES, DE, IT.