Understanding Hero product hotspots section

General

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.

Add section to theme

Log in to your Theme editor and navigate to the page you would like to display this section.
You'll see a list of available sections on the left-hand side. Locate the Add section button and click on it.
From the list of available sections, find and select Hero Product Hotspots.

Avaiable Setup Options

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.

GENERAL OPTION

01Content PositionText content display location
02Desktop HeightCustomize the desktop height of the section
03Mobile HeightCustomize the section height on mobile
04Overlay OpacityThe overlay effect layer on the image background uses a dark black color to make text easier to read. The higher the opacity slider, the darker the image background will be and the easier the text will be to read.

Add new Product hotspot

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.