Image hotspots turn a photo into an interactive guide or a shoppable lookbook. See 10 ways to use image hotspots. Here is what to compare.
1. A visual editor
Click on the image to add a hotspot, drag it to move it. Typing coordinates is not acceptable.
2. Content of the cards
Title, text, link and button, and for stores, WooCommerce products with photo, name and price filled in automatically.
3. Shop the look
An optional list of items under the image helps visitors who prefer text, and adds indexable content. See shoppable images and lookbooks.
4. Mobile behavior
Tap to open, readable cards (a bottom sheet works well), hotspots that stay in place when the image resizes.
5. Accessibility
Hotspots must be real buttons, usable with the keyboard, and close with Escape.
6. Block and shortcode
A Gutenberg block for the editor and a shortcode for page builders.
Checklist
- Visual click-and-drag editor
- Text, links and WooCommerce products
- Shop the look list
- Mobile friendly
- Accessible
- Block and shortcode
Our option
Spotly follows this checklist. Click the dots on the demo.
Frequently asked questions
Do I need WooCommerce?
No, hotspots can show text and links; WooCommerce adds product cards.
How many hotspots per image?
Five to eight keep the photo readable.
Are hotspots indexed by Google?
The image and surrounding text are; a list under the image adds more content.