Image hotspots are an interactive feature that includes hotspot icons directly on the image itself. These hotspot icons can provide product links or additional text descriptions when clicked. By creating interactive images with clickable areas, you can offer your customers direct access to products or more information in a user-friendly way.
Adding the section
- Open the Theme editor and navigate to the page where you want to add this section.
- In the left sidebar, click Add section.
- Choose Image hotspots from the list of available sections.
Section settings
- Heading: Add the main heading of the Image hotspot section here.
- Heading size: This option allows you to adjust the heading size from Small, Medium, to Large.
- Heading position: This option allows you to change the heading text position. The available options are Left, Center, or Right.
- Image: This is where you upload the main image of the section. A square image works best, especially on mobile devices.
- Full-page width: This option allows you to stretch the image to full width.
- Image position: This option allows you to change the main image position to either left or right.
- Hotspot icon style: You can change the hotspot icon style here. The options are: Dot, Plus, Tag, and Bag.
- Hotspot color: You can change the color of your hotspot icons here.
- Enable lazy loading images: Enable or disable lazy loading for images within the section. Lazy loading defers the loading of images until they are in the viewport, which can improve page load times. More details here.
Hotspot blocks
The Image hotspots section includes two types of blocks you can add: a Product block to display a product, and a Paragraph block to display text. The section can have up to 8 hotspot blocks.
Product hotspot
- Product: Select a product that will be displayed when the hotspot icon is clicked.
- Vertical position: This is where you adjust the vertical position of your hotspot icons.
- Horizontal position: This is where you adjust the horizontal position of your hotspot icons.
Paragraph hotspot
- Subheading: This will serve as the subheading on your text box. We recommend using a short and clear subheading to give further insight or support for the headline.
- Heading: This will serve as the main heading on the Paragraph hotspot block. We suggest using a short and concise title that helps customers understand the video.
- Text: This is where you add the main description of the Paragraph hotspot block. This section is also a great way to describe and showcase an important detail of your products.
- Button text: This is where you place the name of the button.
- Button link: This is where you place the button links. Note that links to YouTube videos will be opened in a video player.
- Vertical position: This is where you adjust the vertical position of your hotspot icons.
- Horizontal position: This is where you adjust the horizontal position of your hotspot icons.