> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/theme-sections-by-category/media/image-hotspots.md). # Image hotspots The Image Hotspots section displays an image with interactive clickable markers (hotspots) positioned anywhere on the image. When visitors hover over or click a hotspot, a popup appears showing additional information, such as product details, collection information, blog posts, or custom text. This section is perfect for creating interactive product showcases, room tours, or any image where you want to highlight specific areas with additional details.
{% hint style="info" %} ### How to set it up 1. Go to **Online Store** > **Themes** > **Customize**. 2. Open **Sections** > **Image hotspots**. 3. Make your changes, preview live, then click **Save**. {% endhint %} ### Settings #### Heading * **Heading**: The main title that appears above the image hotspots section. This helps visitors understand what the section is about. * **Underline**: Adds a decorative underline beneath the heading when enabled. * **Heading size**: Controls how large the heading appears, from extra small (XS) to extra extra large (2XL). #### Content * **Description**: Optional text that appears below the heading to provide additional context or information about the image and hotspots. * **Content alignment**: Controls how the heading and description are aligned on the page (left, center, or right). This setting only appears when you have a heading or description. #### Media * **Image**: Upload the main image where you'll place your hotspots. This image serves as the background for all interactive markers. #### Layout * **Image width**: Choose how wide the image appears on the page. Options include Small, Medium, Large, Page width (matches your page's standard width), or Full width (spans the entire browser window). * **Color scheme**: Choose a color scheme that matches your store's design. This affects the background and text colors of the section. #### Hotspot * **Color scheme**: Choose a color scheme for the hotspot markers and popups. This can be different from the section's main color scheme. * **Show icon**: When enabled, a plus icon appears inside each hotspot marker, making it more obvious that they're interactive. * **Corner radius**: Controls how rounded the hotspot markers are. Higher values create more rounded markers. #### Custom border settings * **Enable custom border settings**: When enabled, you can customize the border width and border radius specifically for the image and popups in this section, overriding the global theme settings. * **Image border width**: Controls the thickness of the border around the main image. Set to 0 to remove borders completely. This setting only appears when custom border settings are enabled. * **Image border radius**: Controls how rounded the corners of the main image are. Higher values create more rounded corners. This setting only appears when custom border settings are enabled. * **Popup border width**: Controls the thickness of the border around hotspot popup content. Set to 0 to remove borders completely. This setting only appears when custom border settings are enabled. * **Popup border radius**: Controls how rounded the corners of hotspot popups are. Higher values create more rounded corners. This setting only appears when custom border settings are enabled. #### Padding * **Top**: Adds space above the image hotspots section to create visual separation from other content. * **Bottom**: Adds space below the image hotspots section to create visual separation from other content. *** #### Block: Hotspot Each hotspot block represents one interactive marker on your image. You can add up to 7 hotspots per section. **Position** * **Horizontal position**: Sets where the hotspot appears horizontally on the image, measured as a percentage from the left edge (10% to 90%). * **Vertical position**: Sets where the hotspot appears vertically on the image, measured as a percentage from the top edge (10% to 90%). **Layout** * **Hotspot size**: Controls how large the popup content appears. Options include Small (S), Medium (M), or Large (L). * **Heading size**: Controls the size of headings within the hotspot popup, from small (S) to extra small (XS). * **Text size**: Adjusts the font size of text content within the hotspot popup, from extra small (XS) to large (L). **Content type** * **Content type**: Choose what type of content appears in the hotspot popup. Options include Text (custom content), Product (displays product information), Collection (displays collection information), Blog (displays blog information), or Article (displays article information). * **Show image**: When enabled, an image appears in the hotspot popup. For products, collections, blogs, and articles, this shows the featured image. This setting only appears when the content type is not "Text". **Text** When content type is set to "Text", you can add custom content: * **Icon**: Select an icon to display in the hotspot popup header. Choose from a wide variety of icons, or select "None" to hide the icon. * **Heading**: The title that appears in the hotspot popup. * **Description**: The main text content for the hotspot popup. You can use rich text formatting. **Product** When content type is set to "Product": * **Featured product**: Select the product to display in the hotspot popup. * **Show vendor**: When enabled, the product vendor name appears in the popup. * **Show price**: When enabled, the product price appears in the popup. * **Description**: Optional custom text that appears below the product information. You can use this to add additional details or call-to-action text. **Collection** When content type is set to "Collection": * **Featured collection**: Select the collection to display in the hotspot popup. * **Show collection description**: When enabled, the collection description appears in the popup (truncated to 100 characters). * **Description**: Optional custom text that appears below the collection information. **Blog** When content type is set to "Blog": * **Featured blog**: Select the blog to display in the hotspot popup. * **Show latest article title**: When enabled, the title of the most recent article from the blog appears in the popup. * **Description**: Optional custom text that appears below the blog information. **Article** When content type is set to "Article": * **Featured article**: Select the article to display in the hotspot popup. * **Show article excerpt**: When enabled, a preview of the article content appears in the popup (truncated to 100 characters). * **Description**: Optional custom text that appears below the article information. **Accessibility** * **Button label**: The text that screen readers announce when focusing on the hotspot button. This helps users with visual impairments understand what the hotspot contains. You can use dynamic values like the product title. *** ### Tips * Position hotspots carefully to avoid overlapping, especially on mobile devices where screen space is limited. Test your hotspots on different screen sizes to ensure they're easy to tap. * You can combine different content types with custom description text. For example, select a product and add a description that highlights a specific feature or benefit. * Keep hotspot popup content concise. Too much text can make the popups overwhelming and hard to read, especially on mobile devices. * Test the hotspot positions on both desktop and mobile to ensure they're accessible and don't overlap with important parts of your image. * The custom border settings are useful for creating a unique look, but remember they override your global theme settings.