PrestaShop Design e Navigazione

Galleria Prodotto PrestaShop — Zoom HD, Schermo Intero e Varianti

Galleria prodotto di nuova generazione: zoom HD, miniature verticali, schermo intero mobile con pinch e filtro immagini per combinazione.

La galleria prodotto che PrestaShop avrebbe dovuto includere: zoom ad alta risoluzione, schermo intero mobile e immagini filtrate per combinazione.

A colpo d'occhio
  • Zoom interno HD al passaggio del mouse: passaggio automatico all'immagine originale non ridimensionata
  • Visualizzatore a schermo intero mobile: pinch a due dita, doppio tocco, scorrimento, contatore delle immagini
  • Filtro immagini per combinazione selezionata, modalità rigorosa o intelligente, risincronizzato a ogni cambio di variante
  • Caricamento ottimizzato LCP: copertina precaricata con priorità alta, miniature e immagini adiacenti in differita
  • PrestaShop 8 & 9, nessun override né tabella SQL, vanilla JS senza jQuery
PrestaShop 8 & 9 Zoom HD Pinch mobile Filtro combinazioni LCP ottimizzato
  • Rimborso 30 giorni
  • 12 mesi di aggiornamenti
  • Supporto 24h
www.datafirefly.com/it/
Galleria prodotto PrestaShop con zoom HD e visualizzazione a schermo intero
v1.0.0 · aggiornato 2026-07-16
Cosa fa

L' versione breve.

01

Zoom ad alta risoluzione, davvero

Lo zoom al passaggio del mouse segue il cursore con un fattore configurabile da 1,5 a 4. Al primo passaggio, la galleria precarica silenziosamente l'immagine originale non ridimensionata e passa ad essa: lo zoom resta nitido anche su foto molto dettagliate, dove lo zoom nativo si ferma al formato large.

02

Schermo intero mobile con pinch

Visualizzatore immersivo costruito sui Pointer Events: pinch a due dita con limiti di spostamento ricalcolati in continuo, doppio tocco per ingrandire, scorrimento per navigare, contatore delle immagini e chiusura con il tasto Escape o toccando lo sfondo. Zoom con rotella su desktop.

03

Immagini filtrate per combinazione

La galleria legge le associazioni native immagine / combinazione della scheda prodotto e mostra solo le immagini pertinenti: modalità rigorosa (solo le immagini della combinazione) o intelligente (prima quelle della combinazione, poi le altre). Si risincronizza a ogni cambio di variante, anche dopo l'aggiornamento AJAX del core.

04

Pensato per il Largest Contentful Paint

L'immagine di copertina viene annunciata come precaricamento a priorità alta nell'intestazione, la prima immagine di scena si carica con priorità mentre miniature e immagini successive vengono differite, e le immagini adiacenti vengono precaricate a ogni navigazione. La tua scheda prodotto guadagna velocità percepita e misurata.

La versione lunga

Tutto quello che vorresti sapere prima di installare.

Uno sguardo dettagliato su come funziona Galleria Prodotto PrestaShop — Zoom HD, Schermo Intero e Varianti, perché l'abbiamo progettato così, e il ragionamento dietro le funzionalità qui sopra.

§ 01

Sostituire la galleria nativa senza toccare il tema

Il modulo non sovrascrive alcun template: inietta i dati della scheda prodotto al caricamento della pagina e monta la galleria con JavaScript al posto del blocco immagini nativo, che nasconde in modo pulito. Questo approccio lo rende compatibile con il tema classic e la grande maggioranza dei temi che ne derivano, senza conflitti di template né debiti di manutenzione a ogni aggiornamento del tema. L'anteprima rapida conserva deliberatamente la galleria nativa per evitare interferenze con il core.

§ 02

Uno zoom che sfrutta finalmente le tue foto a piena risoluzione

Lo zoom nativo di PrestaShop si limita al formato large generato dal negozio, spesso 800 pixel. Qui lo zoom interno segue il cursore con un fattore regolabile e, fin dal primo passaggio del mouse, la galleria precarica in background l'immagine originale che hai caricato, poi passa ad essa in modo invisibile. Cuciture, texture e dettagli restano nitidi anche a forte ingrandimento: un vero argomento per moda, gioielleria, arredamento o fotografia di prodotto curata.

§ 03

Lo schermo intero mobile che i tuoi visitatori si aspettano

Su mobile, il visualizzatore a schermo intero si apre con un tocco: sfondo scuro, pinch a due dita con limiti di spostamento ricalcolati in continuo, doppio tocco per ingrandire e ridurre, scorrimento orizzontale per passare da un'immagine all'altra e contatore di posizione. Su desktop, lo stesso visualizzatore risponde alla rotella del mouse, alle frecce della tastiera e al tasto Escape. Un'esperienza vicina a quella dei grandi marketplace, direttamente sul tuo negozio.

§ 04

Immagini coerenti con la combinazione scelta

Quando un cliente seleziona il colore cognac, mostrargli le foto del modello nero crea dubbi e resi. La galleria legge la tabella nativa delle associazioni immagine / combinazione e filtra la visualizzazione di conseguenza: in modalità rigorosa appaiono solo le immagini della combinazione; in modalità intelligente passano in testa e le altre seguono. Se una combinazione non ha immagini associate, viene mostrata la galleria completa come ripiego. La risincronizzazione avviene a ogni cambio di variante, anche dopo la sostituzione AJAX del blocco immagini da parte del core di PrestaShop.