# Aggiungere hotspot di prodotti su un'immagine PrestaShop per vendere un outfit completo > Un punto posizionato in pixel finisce nel posto sbagliato non appena l'immagine cambia dimensione. Dove posizionare i punti, come trattare il tattile dove l'hover non esiste, e l'elemento che da solo risolve accessibilità e SEO. - Pagina: - Lingua: it - Pubblicato il: 2026-10-06 - Aggiornato il: 2026-10-06 - Altre lingue: [fr](https://www.datafirefly.com/2026/10/06/hotspots-produits-image-prestashop/index.md), [en](https://www.datafirefly.com/en/2026/10/06/product-hotspots-image-prestashop/index.md), [es](https://www.datafirefly.com/es/2026/10/06/hotspots-productos-imagen-prestashop/index.md), [de](https://www.datafirefly.com/de/2026/10/06/produkt-hotspots-bild-prestashop/index.md), [pl](https://www.datafirefly.com/pl/2026/10/06/hotspoty-produktowe-obraz-prestashop/index.md), [nl](https://www.datafirefly.com/nl/2026/10/06/producthotspots-afbeelding-prestashop/index.md), [pt](https://www.datafirefly.com/pt/2026/10/06/hotspots-produtos-imagem-prestashop/index.md) - Indice: Una foto d'ambiente mostra un outfit completo, un interno arredato, un banco da lavoro attrezzato. Il visitatore vede l'insieme e non sa quali prodotti lo compongono né dove trovarli. Gli hotspot risolvono questo problema, a condizione di essere posizionati e implementati correttamente. L'interesse commerciale di questo formato è stato trattato separatamente. Questo articolo riguarda la messa in opera. ## Dove posizionare i punti Quattro regole, in ordine di importanza. **Sul prodotto, non accanto.** Un punto posizionato al centro dell'oggetto è compreso immediatamente. Un punto che fluttua a qualche centimetro obbliga a indovinare cosa designa. **Distanziati almeno della larghezza di un dito.** Due punti troppo vicini sono impossibili da distinguere al tocco. Conta una distanza equivalente all'area tattile minima tra due centri. **Da cinque a otto al massimo per immagine.** Oltre, l'immagine diventa una semina di pallini e il visitatore non ne apre nessuno. Se il tuo visual contiene dodici prodotti, mostrane otto e proponi la lista completa sotto. **Su zone leggibili.** Un punto su una zona molto scura o molto testurizzata scompare. Prevedi un contorno o un'ombra per garantire la visibilità qualunque sia lo sfondo. ## Il problema delle coordinate Difficoltà tecnica principale, ed è sottovalutata. Un punto posizionato a 340 pixel dal bordo sinistro su un'immagine di 1200 pixel finisce nel posto sbagliato non appena l'immagine viene mostrata a 380 pixel su un telefono. La regola: **memorizza le coordinate in percentuale** della larghezza e dell'altezza, mai in pixel. Il punto resta al suo posto qualunque sia la dimensione di visualizzazione. Seconda trappola: il ritaglio. Se la tua immagine è ritagliata diversamente secondo il formato di schermo, un'immagine larga su computer e quadrata su mobile, i punti calcolati sull'una sono sbagliati sull'altra. Due risposte possibili. Usare la **stessa immagine** ovunque, semplicemente ridimensionata. O definire **set di coordinate distinti** per formato, il che raddoppia il lavoro di posizionamento. La prima soluzione è la più semplice e basta nella grande maggioranza dei casi. ## Il comportamento tattile È ciò che decide l'uso reale, dato che questo formato è molto consultato su mobile. Su computer, il passaggio del mouse mostra un'anteprima e il clic porta al prodotto. Su schermo tattile l'hover non esiste, e trasporre direttamente quel comportamento produce un'interfaccia inutilizzabile. Tre opzioni per il tattile. **Un tocco apre l'anteprima, un secondo porta al prodotto.** Comportamento corrente, con l'inconveniente di richiedere due gesti. **Un tocco apre una scheda compatta** con immagine, nome, prezzo e pulsante di aggiunta al carrello. Il visitatore può acquistare senza lasciare l'immagine, che è il miglior comportamento commercialmente. **Un tocco porta direttamente al prodotto.** Rapido, ma fa perdere il contesto dell'immagine, il che è un peccato su un outfit completo. La seconda opzione è quella che converte meglio, perché permette di comporre più acquisti dalla stessa immagine. Due precisazioni di implementazione. L'**area tattile** deve essere più ampia del punto visibile, almeno quarantaquattro pixel di lato. E la chiusura dell'anteprima deve essere possibile con un tocco all'esterno, non solo su una piccola croce. ## L'accessibilità Punto sistematicamente trascurato su questo formato, eppure risolvibile in poche righe. Un'immagine con zone cliccabili pone tre questioni. **L'immagine stessa** deve portare un testo alternativo che descriva la scena, non la lista dei prodotti. «Soggiorno con divano grigio, tavolino in rovere e lampada da terra» basta. **Ogni punto** deve essere un elemento interattivo con nome, che porta il nome del prodotto che designa. Un punto senza etichetta è un pulsante muto per un lettore di schermo. **La navigazione da tastiera** deve permettere di raggiungere ogni punto in un ordine logico, e di aprire l'anteprima con il tasto di attivazione. Aggiungi un elemento che risolve tutto: **una lista testuale dei prodotti sotto l'immagine**. Serve i lettori di schermo, gli utenti da tastiera, i motori e i visitatori che preferiscono una lista. È il complemento più redditizio di questo dispositivo. ## Cosa vedono i motori Gli hotspot sono costruiti da script e il loro contenuto non è necessariamente leggibile. Tre conseguenze pratiche. I **link verso i prodotti** devono essere veri link nel codice, non elementi cliccabili gestiti solo da script. Altrimenti perdi un collegamento naturale tra la tua pagina d'ambiente e le tue schede. Il **testo alternativo** dell'immagine porta l'informazione sulla scena, il che aiuta la ricerca di immagini. La **lista sotto l'immagine**, citata sopra, rende il contenuto interamente leggibile senza dipendere dal rendering di script. ## Le prestazioni Un'immagine di lookbook è generalmente grande e pesante. Tre precauzioni. **Servire la dimensione giusta** secondo lo schermo, con formati adattivi. Un'immagine di 2400 pixel su un telefono è puro spreco. **Dichiarare le dimensioni** per riservare lo spazio ed evitare che la pagina salti quando arriva l'immagine. **Caricare i punti dopo l'immagine**, ma riservare la loro posizione fin dall'inizio perché non appaiano sfalsati. Punto complementare: se hai più immagini di lookbook sulla stessa pagina, carica solo la prima immediatamente e differisci le successive. ## Il contenuto dell'anteprima Cinque elementi, non di più. La **miniatura** del prodotto, che conferma visivamente di cosa si tratta. Il **nome**, completo ma corto. Il **prezzo**, con la menzione di indisponibilità se del caso. Il **pulsante di aggiunta al carrello**, o di selezione della taglia se il prodotto ha varianti. Il **link verso la scheda completa**, per chi vuole saperne di più. Sui prodotti con varianti si pone la questione della taglia. Due approcci: aprire un selettore nell'anteprima, o rimandare alla scheda. Il primo converte meglio sui prodotti semplici da scegliere, il secondo evita errori sui prodotti dove la scelta richiede riflessione. ## La manutenzione Aspetto spesso scoperto dopo qualche mese. Un'immagine di lookbook invecchia con il suo catalogo. Tre situazioni da trattare. **Il prodotto è esaurito.** Il punto deve restare, con la menzione di indisponibilità ed eventualmente un avviso di ritorno in stock. Eliminarlo lascia un buco nell'immagine senza spiegazione. **Il prodotto è ritirato definitivamente.** Due opzioni: togliere il punto, o reindirizzarlo verso un prodotto equivalente con una menzione esplicita. **L'intera immagine diventa obsoleta.** Una collezione passata. Prevedi una data di fine per immagine, o come minimo una revisione periodica. Un controllo utile, da automatizzare: elencare i punti che puntano a prodotti inattivi o eliminati. Su un negozio che ha accumulato venti lookbook, questa lista si riempie in fretta. ## Misurare Tre indicatori. Il **tasso di interazione** con i punti, rapportato alle visualizzazioni dell'immagine. Ti dice se il dispositivo è compreso e individuato. Il **numero di prodotti diversi aperti** per sessione. È l'interesse proprio del formato: un visitatore che ne apre tre compone un outfit. Lo **scontrino medio delle sessioni** passate da un lookbook, confrontato con le altre. È lì che il formato si giustifica o meno. Il mette in piedi questo dispositivo su PrestaShop 8 e 9: posizionamento dei punti in coordinate relative per restare esatti a tutte le dimensioni, scheda compatta con aggiunta al carrello al tocco, lista testuale dei prodotti sotto l'immagine per l'accessibilità e la SEO, e rilevamento dei punti che puntano a prodotti inattivi.