# Adding Product Hotspots to a PrestaShop Image to Sell a Complete Outfit > A dot placed in pixels ends up in the wrong spot as soon as the image changes size. Where to place the dots, how to handle touch screens where hover does not exist, and the one element that settles accessibility and SEO at once. - Page: - Language: en - Published: 2026-10-06 - Last updated: 2026-10-06 - Other languages: [fr](https://www.datafirefly.com/2026/10/06/hotspots-produits-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), [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) - Index: A lifestyle photo shows a complete outfit, a furnished room, a fully equipped workbench. The visitor sees the whole and does not know which products make it up or where to find them. Hotspots solve this problem, provided they are placed and implemented correctly. The commercial case for this format has been covered separately. This article deals with implementation. ## Where to place the dots Four rules, in order of importance. **On the product, not next to it.** A dot placed at the centre of the object is understood immediately. A dot floating a few centimetres away forces the visitor to guess what it points to. **Spaced at least a finger's width apart.** Two dots too close together are impossible to tell apart by touch. Allow a distance equivalent to the minimum touch area between two centres. **Five to eight per image at most.** Beyond that, the image becomes a scatter of badges and the visitor opens none of them. If your visual contains twelve products, show eight and offer the full list below. **On readable areas.** A dot on a very dark or heavily textured area disappears. Add an outline or shadow to guarantee visibility whatever the background. ## The coordinates problem The main technical difficulty, and it is underestimated. A dot placed 340 pixels from the left edge on a 1200-pixel image ends up in the wrong spot as soon as the image is displayed at 380 pixels on a phone. The rule: **store coordinates as percentages** of width and height, never in pixels. The dot stays in place whatever the display size. Second trap: cropping. If your image is cropped differently depending on the screen format, a wide image on desktop and a square one on mobile, the dots computed on one are wrong on the other. Two possible answers. Use the **same image** everywhere, simply resized. Or define **separate coordinate sets** per format, which doubles the placement work. The first solution is the simplest and is enough in the vast majority of cases. ## Touch behaviour This is what decides real usage, since this format is heavily browsed on mobile. On desktop, hovering shows a preview and clicking leads to the product. On a touch screen, hover does not exist, and transposing that behaviour directly produces an unusable interface. Three options for touch. **One tap opens the preview, a second leads to the product.** Common behaviour, with the drawback of requiring two gestures. **One tap opens a compact card** with image, name, price and an add-to-cart button. The visitor can buy without leaving the image, which is the best behaviour commercially. **One tap leads straight to the product.** Fast, but it loses the context of the image, which is a shame on a complete outfit. The second option converts best, because it lets the visitor compose several purchases from the same image. Two implementation details. The **touch area** must be larger than the visible dot, at least forty-four pixels per side. And closing the preview must be possible with a tap outside it, not only on a small cross. ## Accessibility A point systematically neglected on this format, yet fixable in a few lines. An image with clickable zones raises three questions. **The image itself** must carry an alternative text describing the scene, not the list of products. "Living room with grey sofa, oak coffee table and floor lamp" is enough. **Each dot** must be a named interactive element, carrying the name of the product it points to. An unlabelled dot is a mute button for a screen reader. **Keyboard navigation** must reach each dot in a logical order, and open the preview with the activation key. Add one element that settles everything: **a text list of the products below the image**. It serves screen readers, keyboard users, search engines and visitors who prefer a list. It is the most cost-effective complement to this setup. ## What search engines see Hotspots are built by script and their content is not necessarily readable. Three practical consequences. The **links to the products** must be real links in the code, not clickable elements handled by script alone. Otherwise you lose natural linking between your lifestyle page and your product pages. The image's **alternative text** carries the information about the scene, which helps image search. The **list below the image**, mentioned above, makes the content fully readable without depending on script rendering. ## Performance A lookbook image is usually large and heavy. Three precautions. **Serve the right size** for the screen, with responsive formats. A 2400-pixel image on a phone is pure waste. **Declare the dimensions** to reserve the space and prevent the page from jumping when the image arrives. **Load the dots after the image**, but reserve their position from the start so they do not appear offset. One further point: if you have several lookbook images on the same page, load only the first immediately and defer the rest. ## The preview content Five elements, no more. The product's **thumbnail**, which visually confirms what it is. The **name**, complete but short. The **price**, with an out-of-stock notice where relevant. The **add-to-cart button**, or a size selector if the product has variants. The **link to the full product page**, for those who want to know more. On products with variants, the size question arises. Two approaches: open a selector in the preview, or send the visitor to the product page. The first converts better on easy-to-choose products, the second avoids mistakes on products where the choice requires thought. ## Maintenance An aspect often discovered after a few months. A lookbook image ages with its catalogue. Three situations to handle. **The product is sold out.** The dot must remain, with an out-of-stock notice and possibly a back-in-stock alert. Removing it leaves an unexplained hole in the image. **The product is permanently withdrawn.** Two options: remove the dot, or redirect it to an equivalent product with an explicit mention. **The whole image becomes obsolete.** A past collection. Plan an end date per image, or at minimum a periodic review. A useful check, worth automating: list the dots pointing to inactive or deleted products. On a store that has accumulated twenty lookbooks, that list fills up fast. ## Measuring Three indicators. The **interaction rate** with the dots, against views of the image. It tells you whether the setup is noticed and understood. The **number of distinct products opened** per session. That is the format's own value: a visitor who opens three is composing an outfit. The **average order value of sessions** that went through a lookbook, compared with the rest. That is where the format proves itself or not. The sets this up on PrestaShop 8 and 9: dot placement in relative coordinates so they stay accurate at every size, a compact card with add-to-cart on tap, a text list of the products below the image for accessibility and SEO, and detection of dots pointing to inactive products.