(...)-Loading article
The Herro Product Hotspots section displays a static image, but with interactive hotspots. When customers click on these hotspots, a quick view of the product appears. You can use this to showcase a set of products you want to highlight, maximizing conversion rates by allowing customers to visualize how a complete product set looks together.

Once you've added the Hero Product Hotspots section, you can customize its appearance and choose the image and hotspots to display.

Because hotspots will display differently on desktop and mobile, you need to prepare two (optional) images: one for desktop and one for mobile. For desktop, we recommend using a 16:9 image. For mobile, we recommend a 3:4 (portrait) or 9:16 image.
To create a new hotspot, in the Theme Editor - Section panel, select the Hero Product Hotspots section, then click the + Add Product hotspot button.
To link a product to this hotspot, select the product in the Product setting within the Product hotspot panel.

👉 With Override Label, leave it blank to use the product's name, or enter a new name.
To move the hotspot position, you can use the slider to drag it, or the best way is to drag and move the hotspot with your mouse by: clicking the hotspot's + icon to select the hotspot, then clicking again and holding the left mouse button to drag and move it.
Once you've moved to the desired position, look at the bottom right corner where X and Y are displayed, as shown in the image below.

Continue to enter these X / Y coordinates into the panel as shown in the image below, and click save to save the hotspot position.

To customize for mobile, you can follow the same steps, but switch to the mobile view in the Theme Editor. This helps you easily visualize how it will look on mobile. To do this, click the mobile device icon in the top right corner.
