Image hotspots section

This section was introduced in version 1.1

The “Image hotspots” section allows you to create an interactive image experience on your Shopify store. By adding hotspots to an image, you can highlight different products or features and provide customers with additional information through clickable areas.

Section settings

Heading: The title for the entire section.

Subheading: The subtitle of the section

Link Label: The text for the call-to-action link that accompanies the section, enticing users to learn more or view a collection.

Link: The URL where the link label will direct users, which could be a specific product page, collection, or external site.

Image: The primary image where hotspots will be placed. It serves as the visual focus for the hotspots.

Colors

Hotspot Color: Customize the color of the hotspot markers to make them stand out or blend with the image.

Color scheme: Select one of the predefined color schemes as defined in Theme settings > Colors. For more information regarding the color schemes please refer to our article about creating your own color scheme.

Section spacing

The section spacing settings gives you the option to adjust the top & bottom section spacing values.

Hotspot block

The section consists of “Hotspot” blocks with the following settings:

Horizontal/Vertical position: Adjust these sliders to position the hotspot on the image. Percentages determine the spot’s location relative to the image dimensions.

Image: An optional image to display within the hotspot popup or information card.

Heading: The title of the hotspot, which will appear on the information card associated with the hotspot.

Description: Detailed text that appears within the hotspot’s information card, offering more in-depth information about the feature or product highlighted.

Button label: The text for the call-to-action button within the hotspot’s information card.

Link: The URL to which the call-to-action button will direct users.

Product: If a product is selected, this option will replace the custom text, description, and image settings with a product card that includes the selected product details.

Show Vendor: Toggle to display the product’s vendor name.

Show product rating: If a product rating app is installed, this will show the product’s rating.

Show stock status: Indicates whether the product is in stock.

Show “Add to Cart” button: Displays the ‘Add to Cart’ button for immediate purchase.