# Producthotspots toevoegen op een PrestaShop-afbeelding om een complete outfit te verkopen
> Een punt geplaatst in pixels komt op de verkeerde plek zodra de afbeelding van formaat verandert. Waar u de punten plaatst, hoe u touch behandelt waar hover niet bestaat, en het element dat in zijn eentje de toegankelijkheid en de vindbaarheid regelt.
- Pagina:
- Taal: nl
- Gepubliceerd op: 2026-10-06
- Bijgewerkt op: 2026-10-06
- Andere talen: [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), [it](https://www.datafirefly.com/it/2026/10/06/hotspot-prodotti-immagine-prestashop/index.md), [pl](https://www.datafirefly.com/pl/2026/10/06/hotspoty-produktowe-obraz-prestashop/index.md), [pt](https://www.datafirefly.com/pt/2026/10/06/hotspots-produtos-imagem-prestashop/index.md)
- Index:
Een sfeerfoto toont een complete outfit, een ingericht interieur, een uitgeruste werkbank. De bezoeker ziet het geheel en weet niet welke producten het samenstellen, noch waar ze te vinden. Hotspots lossen dat probleem op, op voorwaarde dat ze correct geplaatst en geïmplementeerd zijn.
Het commerciële belang van dit formaat is apart behandeld. Dit artikel gaat over de uitvoering.
## Waar de punten plaatsen
Vier regels, in volgorde van belang.
**Op het product, niet ernaast.** Een punt in het midden van het object wordt onmiddellijk begrepen. Een punt dat enkele centimeters verder zweeft, dwingt tot raden wat het aanduidt.
**Minstens een vingerbreedte uit elkaar.** Twee punten die te dicht bij elkaar staan, zijn met aanraking onmogelijk te onderscheiden. Reken op een afstand gelijk aan de minimale aanraakzone tussen twee middelpunten.
**Maximaal vijf tot acht per afbeelding.** Daarboven wordt de afbeelding een zaaisel van stippen en opent de bezoeker er geen enkele. Bevat uw visual twaalf producten, toon er dan acht en bied de volledige lijst eronder aan.
**Op leesbare zones.** Een punt op een zeer donkere of zeer getextureerde zone verdwijnt. Voorzie een rand of een schaduw om de zichtbaarheid te garanderen ongeacht de achtergrond.
## Het probleem van de coördinaten
Belangrijkste technische moeilijkheid, en ze wordt onderschat.
Een punt geplaatst op 340 pixels van de linkerrand op een afbeelding van 1200 pixels komt op de verkeerde plek zodra de afbeelding op 380 pixels wordt weergegeven op een telefoon.
De regel: **sla de coördinaten op in percentages** van de breedte en de hoogte, nooit in pixels. Het punt blijft op zijn plaats ongeacht de weergavegrootte.
Tweede valkuil: de bijsnijding. Als uw afbeelding verschillend wordt bijgesneden per schermformaat, een brede afbeelding op computer en vierkant op mobiel, zijn de punten berekend op de ene fout op de andere.
Twee mogelijke antwoorden. Overal **dezelfde afbeelding** gebruiken, gewoon geschaald. Of **aparte coördinatensets** per formaat definiëren, wat het plaatsingswerk verdubbelt.
De eerste oplossing is de eenvoudigste en volstaat in de grote meerderheid van de gevallen.
## Het touchgedrag
Dit beslist over het daadwerkelijke gebruik, aangezien dit formaat veel op mobiel wordt bekeken.
Op computer toont hover een voorvertoning en leidt de klik naar het product. Op een aanraakscherm bestaat hover niet, en dat gedrag rechtstreeks overzetten levert een onbruikbare interface op.
Drie opties voor touch.
**Een tik opent de voorvertoning, een tweede leidt naar het product.** Gangbaar gedrag, met het nadeel dat het twee gebaren vraagt.
**Een tik opent een compacte fiche** met afbeelding, naam, prijs en knop toevoegen aan winkelwagen. De bezoeker kan kopen zonder de afbeelding te verlaten, wat commercieel het beste gedrag is.
**Een tik leidt rechtstreeks naar het product.** Snel, en het doet de context van de afbeelding verliezen, wat jammer is bij een complete outfit.
De tweede optie converteert het best, omdat ze toelaat meerdere aankopen samen te stellen vanaf dezelfde afbeelding.
Twee implementatiedetails. De **aanraakzone** moet breder zijn dan het zichtbare punt, minstens vierenveertig pixels per zijde. En het sluiten van de voorvertoning moet mogelijk zijn met een tik erbuiten, niet alleen op een klein kruisje.
## De toegankelijkheid
Punt dat systematisch wordt verwaarloosd bij dit formaat, en nochtans in enkele regels te behandelen.
Een afbeelding met klikbare zones stelt drie vragen.
**De afbeelding zelf** moet een alternatieve tekst dragen die de scène beschrijft, niet de productlijst. "Woonkamer met grijze bank, salontafel in eik en staande lamp" volstaat.
**Elk punt** moet een benoemd interactief element zijn, met de naam van het product dat het aanduidt. Een punt zonder label is een stomme knop voor een schermlezer.
**De toetsenbordnavigatie** moet toelaten elk punt in een logische volgorde te bereiken, en de voorvertoning te openen met de activeringstoets.
Voeg een element toe dat alles regelt: **een tekstlijst van de producten onder de afbeelding**. Ze dient de schermlezers, de toetsenbordgebruikers, de zoekmachines, en de bezoekers die een lijst verkiezen. Het is de meest rendabele aanvulling van dit systeem.
## Wat de zoekmachines zien
De hotspots worden opgebouwd met script en hun inhoud is niet noodzakelijk leesbaar.
Drie praktische gevolgen.
De **links naar de producten** moeten echte links in de code zijn, geen klikbare elementen die alleen door script worden beheerd. Anders verliest u een natuurlijke koppeling tussen uw sfeerpagina en uw productfiches.
De **alternatieve tekst** van de afbeelding draagt de informatie over de scène, wat het zoeken op afbeeldingen helpt.
De **lijst onder de afbeelding**, hierboven vermeld, maakt de inhoud volledig leesbaar zonder afhankelijk te zijn van de scriptweergave.
## De prestaties
Een lookbookafbeelding is doorgaans groot en zwaar. Drie voorzorgen.
**De juiste afmeting serveren** volgens het scherm, met adaptieve formaten. Een afbeelding van 2400 pixels op een telefoon is pure verspilling.
**De afmetingen declareren** om de ruimte te reserveren en te vermijden dat de pagina springt wanneer de afbeelding aankomt.
**De punten na de afbeelding laden**, maar hun positie vanaf het begin reserveren zodat ze niet verschoven verschijnen.
Aanvullend punt: hebt u meerdere lookbookafbeeldingen op dezelfde pagina, laad dan alleen de eerste onmiddellijk en stel de volgende uit.
## De inhoud van de voorvertoning
Vijf elementen, niet meer.
De **miniatuur** van het product, die visueel bevestigt waarover het gaat.
De **naam**, volledig maar kort.
De **prijs**, met de vermelding van onbeschikbaarheid indien van toepassing.
De **knop toevoegen aan winkelwagen**, of maatselectie als het product varianten heeft.
De **link naar de volledige productpagina**, voor wie meer wil weten.
Bij producten met varianten stelt de maatvraag zich. Twee benaderingen: een selector openen in de voorvertoning, of doorverwijzen naar de productpagina. De eerste converteert beter bij eenvoudig te kiezen producten, de tweede vermijdt fouten bij producten waar de keuze nadenken vraagt.
## Het onderhoud
Aspect dat vaak pas na enkele maanden wordt ontdekt.
Een lookbookafbeelding veroudert met haar catalogus. Drie situaties te behandelen.
**Het product is uitverkocht.** Het punt moet blijven, met de vermelding van onbeschikbaarheid en eventueel een voorraadmelding. Het verwijderen laat een gat in de afbeelding zonder uitleg.
**Het product is definitief uit het assortiment.** Twee opties: het punt verwijderen, of het doorverwijzen naar een gelijkwaardig product met een expliciete vermelding.
**De hele afbeelding wordt verouderd.** Een voorbije collectie. Voorzie een einddatum per afbeelding, of minstens een periodieke herziening.
Een nuttige controle, te automatiseren: de punten oplijsten die naar inactieve of verwijderde producten wijzen. Op een winkel die twintig lookbooks heeft verzameld, vult die lijst zich snel.
## Meten
Drie indicatoren.
De **interactieratio** met de punten, afgezet tegen de weergaven van de afbeelding. Ze vertelt u of het systeem wordt begrepen en opgemerkt.
Het **aantal verschillende geopende producten** per sessie. Dat is het eigen belang van het formaat: een bezoeker die er drie opent, stelt een outfit samen.
Het **gemiddelde winkelmandje van de sessies** die via een lookbook zijn gegaan, vergeleken met de andere. Daar rechtvaardigt het formaat zich al dan niet.
De zet dit systeem op op PrestaShop 8 en 9: plaatsing van de punten in relatieve coördinaten om juist te blijven op alle formaten, compacte fiche met toevoegen aan winkelwagen bij aanraking, tekstlijst van de producten onder de afbeelding voor toegankelijkheid en vindbaarheid, en detectie van punten die naar inactieve producten wijzen.