Mostra di più del prodotto con un semplice movimento del cursore.
Kowal Catalog Hover Image
Sostituisci l’immagine nell’elenco prodotti quando il cursore passa sopra la foto. Mostra una seconda vista, un dettaglio o un altro lato del prodotto senza aprire la scheda prodotto.
Seconda immagine · Anteprima dei dettagli · Impostazioni per prodotto
COME FUNZIONA IN PRATICA
01 · Scegli la seconda immagine Nella galleria del prodotto assegni un’immagine al ruolo hover.
02 · Il cliente passa il cursore sull’immagine L’elenco mostra l’immagine alternativa assegnata.
03 · Il cursore lascia il prodotto Viene nuovamente visualizzata l’immagine originale.
Cosa ottiene il tuo negozio?
Scopri le funzioni, gli utilizzi e le impostazioni del modulo.
Scopri il modulo
Catalogo Hover Image è un modulo per Magento 2 (versioni 2.3.* e 2.4.*) che arricchisce l’elenco prodotti con una funzionalità interattiva. Quando il cursore passa sopra qualsiasi prodotto nell’elenco, viene visualizzata una seconda immagine, la cosiddetta hover image, che può essere impostata individualmente per ogni prodotto nel pannello di amministrazione.
Funzioni principali del modulo
Navigazione interattiva dei prodotti: consente ai clienti di visualizzare rapidamente un’immagine alternativa del prodotto senza dover accedere alla pagina dei dettagli.
Configurazione semplice: nel pannello di amministrazione Magento è possibile assegnare una hover image a ogni prodotto, ottenendo pieno controllo sulla presentazione dell’assortimento.
Maggiore attrattiva visiva del negozio: l’effetto dinamico di cambio immagine al passaggio del mouse attira l’attenzione dei clienti e può aumentare il coinvolgimento e i tassi di conversione.
Vantaggi dell’utilizzo del modulo
Miglioramento dell’esperienza utente: aiuta i clienti a conoscere meglio il prodotto, favorendo decisioni di acquisto più rapide.
Personalizzazione della presentazione dei prodotti: offre la possibilità di mostrare diversi aspetti del prodotto, come altri colori, modelli o dettagli.
Compatibilità e affidabilità: il modulo è stato testato ed è pienamente compatibile con le versioni Magento 2.3.* e 2.4.*.
Come funziona
Installazione del modulo: il processo di installazione è semplice e non richiede competenze tecniche avanzate.
Impostazione della hover image: nel pannello di amministrazione vai alla modifica del prodotto e aggiungi un’immagine supplementare come hover image.
Effetto sulla pagina del negozio: quando il cursore passa sopra un prodotto nell’elenco, viene visualizzata automaticamente la seconda immagine impostata.
Supporto e documentazione
Istruzioni di installazione: i passaggi dettagliati per l’installazione sono disponibili nella documentazione inclusa.
Supporto tecnico: in caso di domande o problemi con il modulo, offriamo supporto tecnico professionale.
L’utilizzo del modulo Catalogo Hover Image è un modo semplice per migliorare la funzionalità del negozio e aumentare la soddisfazione dei clienti grazie a una presentazione dei prodotti più interattiva e coinvolgente.
Ruolo dell’immagine e comportamento dell’elenco
Attivi il modulo in Stores → Configuration → Kowal → Hover Catalog Image. L’immagine assegnata viene salvata nell’attributo hover_catalog. In sua assenza, il codice controlla la miniatura del prodotto come immagine sostitutiva.
Dopo l’uscita del cursore dall’immagine, viene ripristinata la foto originale. Lo script gestisce anche l’aggiornamento del contenuto dell’elenco. L’implementazione utilizza jQuery e RequireJS; l’integrazione con un diverso metodo di rendering degli elenchi prodotto deve essere adattata al tema.
Installazione tramite Composer
Pacchetto: kowal/hover-image; modulo: Kowal_CatalogHoverImage. Dopo aver configurato l’accesso al repository Kowal, installa il pacchetto, abilita il modulo, esegui l’aggiornamento di Magento e svuota la cache. Per la modalità produzione, includi la compilazione e il deploy dei contenuti statici adeguati all’ambiente.
Dalla configurazione al risultato
1. Scegli la seconda immagine Nella galleria del prodotto assegni un’immagine al ruolo hover.
2. Il cliente passa il cursore sull’immagine L’elenco mostra l’immagine alternativa assegnata.
3. Il cursore lascia il prodotto Viene nuovamente visualizzata l’immagine originale.
Il dettaglio visibile già nel catalogo
Esempio: l’immagine principale mostra il prodotto frontalmente, mentre l’immagine hover mostra il retro o un dettaglio ravvicinato del materiale. Il cliente scopre più dettagli durante la navigazione dell’elenco.
L’effetto viene attivato dal cursore. Sui dispositivi touch, la modalità di presentazione deve essere verificata nel tema utilizzato.
Arricchisci la presentazione dei prodotti nel catalogo
Aggiungi il repository composer alla configurazione:
I dati di accesso al repository Composer (indirizzo e-mail del cliente e token di licenza) ti verranno inviati via e-mail dopo l’acquisto. Sono disponibili anche nell’area cliente dopo l’accesso a kowal.store. Sostituisci TWOJ_EMAIL_KLIENTA con l’indirizzo e-mail del tuo account e TWOJ_TOKEN con il token ricevuto. Esegui i comandi nella directory principale di Magento.
Il modulo consente di visualizzare la seconda immagine del prodotto passando il cursore sulla miniatura nell’elenco dei prodotti (catalogo)?
Risposta
Sì — il modulo consente di assegnare a ogni prodotto in Magento 2 una cosiddetta “hover image” (seconda immagine), che viene mostrata quando si passa il cursore sul prodotto nell’elenco.
Domanda
Con quali versioni di Magento 2 funziona questo modulo?
Risposta
Il modulo è compatibile con le versioni Magento 2.3.* e Magento 2.4.*.
Domanda
L'installazione del modulo richiede modifiche ai file core di Magento o del tema?
Risposta
No — l'installazione del modulo non richiede la modifica dei file core di Magento 2; funziona come estensione secondo l'architettura di Magento.
Domanda
Com'è la configurazione — devo assegnare manualmente la seconda immagine per ogni prodotto?
Risposta
Sì — l’amministratore nel pannello Magento può assegnare a ciascun prodotto un’immagine “hover image”, che verrà visualizzata al passaggio del cursore.
Domanda
Il modulo influisce sulle prestazioni del negozio?
Risposta
L’impatto è minimo — sebbene aggiunga l’effetto visivo “hover”, non richiede un carico elevato e non causa un rallentamento significativo del negozio, se le immagini sono ottimizzate. (Conoscenza generale su questo tipo di estensioni)
Domanda
L’effetto hover funziona anche sui dispositivi mobili?
Risposta
Di solito l’effetto hover può essere meno intuitivo sugli schermi touch (telefoni, tablet) — vale la pena verificare se il modulo dispone di un comportamento adeguato “al tocco” oppure mantenere un comportamento alternativo sui dispositivi mobili.
Domanda
Posso impostare l’effetto hover in modo che funzioni solo in determinate categorie o per specifici gruppi di prodotti?
Risposta
Sebbene la descrizione principale del modulo parli dell’assegnazione di un’immagine hover al prodotto, se hai bisogno di un funzionamento condizionale (ad es. solo per categorie specifiche), conviene consultare la documentazione o chiedere al produttore la disponibilità di filtri.
Domanda
Questo effetto visivo può aiutare la conversione e il coinvolgimento degli utenti?
Risposta
Sì — un’immagine aggiuntiva al passaggio del mouse consente al cliente di vedere più rapidamente una prospettiva alternativa del prodotto (ad es. un altro colore, motivo o dettaglio), il che può migliorare l’esperienza utente e aumentare le possibilità di acquisto.
Domanda
La foto hover deve essere un nuovo file o può essere una delle foto del prodotto già caricate?
Risposta
Di solito puoi usare le foto esistenti come immagine hover — quindi non è necessariamente necessario caricare un nuovo file, se hai già la foto nella galleria del prodotto. (Funzionalità tipica per questo tipo di moduli)
Domanda
Dopo l'acquisto del modulo ricevo supporto tecnico e aggiornamenti?
Risposta
Sì — il produttore del modulo dichiara di offrire aggiornamenti gratuiti e supporto tecnico per le proprie estensioni.
