Image Hotspots

The Image Hotspots section allows you to add clickable hotspots over an image. Each hotspot, when clicked, reveals a text, making it an interactive experience for your visitors. This documentation will guide you through setting up and customizing the Image Hotspots section in your Shopify store.

Adding the Image Hotspots Section

Instructions
  1. In the theme editor, click on “Add section”.
  2. From the list of available sections, choose "Image Hotspots". This will add the Image Hotspots section to your page.

Uploading Your Image

To make the hotspots functional and visually appealing, you need to upload a suitable image where the hotspots will be placed.

There are two settings for uploading images:

  • Image: This is the main image where you will place your hotspots. It is recommended to use a square or landscape-oriented image.
  • Image (Mobile): This is an optional mobile-optimized version of the image. It is recommended to upload a separate, portrait-oriented image for optimal viewing on mobile devices.

Adding and Configuring Hotspots

After adding the Image Hotspots section, you can start adding hotspots to your image.

Instructions
  1. Within the Image Hotspots section, click on "Add Hotspot". This can be found in the sidebar underneath the Image Hotspots section.
  2. After adding a hotspot, you will see various settings to control its appearance and behavior. These settings include:
    • Horizontal Position, Vertical Position: Adjusts the placement of the hotspot on the image.
    • Horizontal Position (Mobile), Vertical Position (Mobile): Sets the position specifically for mobile devices. This only has effect if a mobile image has been uploaded.
    • Heading, Content: The heading and the text that will appear when the hotspot is clicked.
Table of Contents