Image hotspot section

The "Image hotspot" section in Shopify allows you to add interactive hotspots to your images, providing additional information or highlighting specific areas of interest. When you add an "Image hotspot" section to your store, you can upload an image and then place hotspots on it.

Image settings

Settings	Description
Image	You can add the main image as background, by clicking on the “Select image” button.
Image height	You can change the height of the image using the slider.
Bullet border color	Click on the circle and change the bullet border color.
Bullet color	Click on the circle and change the color inside hotspot.

Section settings

Setting	Description
Button color style	This feature allows you to customize the color style of buttons. You have two options to choose from: Primary Secondary This setting can be applied to buttons, links, and underlined links within the section. To choose or change the colors for these button styles, go to the “Colors” tab in the theme settings and locate the* “Primary button” and “Secondary button” blocks. By changing the colors in the theme settings, the new color style will be applied throughout the entire theme.
Section top space	The "Section top space" setting allows you to adjust the amount of space at the top of the section using a slider.
Section bottom space	The "Section bottom space" setting functions similarly to the "Section top space" setting but controls the space at the bottom of the section.
Background color	To change the background color of the section, simply click on the circle labeled "Background color" and select an appropriate color from the color picker. This will apply the chosen color as the background for the section, enhancing its visual appearance.
Enable full width section	Tick the checkbox if you want to make image on full width.

Within the "Image hotspot" feature, there are three pre-configured hotspot items available. You can customize each hotspot item according to your preferences, and if needed, you can add more hotspot items by clicking on the "Add Hotspot Item" button.

To choose the product which will be displayed as a pop-up on the hotspot item, click on the "Hotspot item" block under the “Image hotspot” section (left sidebar settings) and then click on "Select Product". Also you can set the position of each hotspot item on the page.

By utilizing the "Image hotspot" feature, you can create an engaging and interactive experience for your customers, allowing them to explore specific products or details within your images by interacting with the hotspots.

Hotspot item

Settings	Description
Product	Select Product for hotspot.
Horizontal position and vertical position	Set up the position of hotspot on the image.
Bubble position	Change the position of the product on hover: top, bottom, left, right.
Open bubble on desktop	Enabling this option will display a persistent bubble containing product information on the desktop interface, without requiring any hover or click interactions.
Hide item mobile	When this option is marked, the hotspot items will only be visible on desktop and tablet devices, and they will be hidden on mobile devices.