# Image hotspot ### Section overview The Hotspot section displays an image with interactive overlay points that customers can click to reveal products or navigate to specific URLs. #### Common use cases * Showcase product features by highlighting specific areas of a product image * Create an interactive lookbook where customers can shop directly from model images * Display floor plans or maps with clickable navigation points * Build guided tours highlighting important elements within an image #### Usage tips * Use high-resolution images that provide clear visibility of the hotspot areas * Ensure sufficient contrast between the image and hotspot indicators * Limit the number of hotspots to avoid overwhelming customers * Position hotspots strategically to avoid overlap on mobile screens * Test thoroughly on mobile to ensure hotspots remain accessible when the image scales down * Consider using a gradient overlay to improve text visibility when placing content over images ### Section settings | Setting | Description | | ------------------------- | --------------------------------------------------------------------------------- | | Image background desktop | The main background image displayed on desktop devices | | Image background mobile | A separate image optimized for mobile devices | | Show entire image | When enabled, displays the entire image without cropping | | Vertical spacing | Controls the height of the section from extra small to extra large | | Color scheme | Sets the background and text color theme for the section | | Text color | Determines the text color, with options for default, force light, or force dark | | Border color | Sets the color for section borders | | Enable gradient | Adds a gradient overlay to improve visibility of content over images | | Enable background overlay | Adds a background color behind text content for improved readability | | Border position | Controls where borders appear (none, top, bottom, or both) | | Vertical alignment | Positions content at the top, middle, or bottom of the section | | Horizontal alignment | Aligns content to the left, center, or right of the section | | Enable margin | When enabled, adds horizontal margin to the section content | | Enable max width | Limits the content width for improved readability | | Visibility | Controls whether the section appears on all devices, only mobile, or only desktop | ### Block settings #### Heading Adds a primary heading to the section. * Block limit: 1 | Setting | Description | | ------- | ---------------------------------- | | Content | The text to display as the heading | #### Image Adds an image to the section content area. * Block limit: 3 | Setting | Description | | ------------ | -------------------------------------------- | | Image | The image to display within the content area | | Image height | Controls the height of the image in pixels | #### Content Adds formatted text content to the section. * Block limit: 3 | Setting | Description | | ------- | -------------------------------------------------------------------- | | Content | Rich text content that can include formatting, lists, and basic HTML | #### Buttons Adds primary and secondary buttons to the section. * Block limit: 1 | Setting | Description | | ---------------------- | -------------------------------------------- | | Button label | The text displayed on the primary button | | Button URL | The destination URL for the primary button | | Button color | The style and color of the primary button | | Secondary button label | The text displayed on the secondary button | | Secondary button URL | The destination URL for the secondary button | | Secondary button color | The style and color of the secondary button | #### Product Creates a hotspot that reveals a product card when clicked or hovered. * Block limit: 20 | Setting | Description | | ------------------- | -------------------------------------------------------------------- | | Product | The Shopify product to display when the hotspot is activated | | Vertical position | The vertical position of the hotspot as a percentage from the top | | Horizontal position | The horizontal position of the hotspot as a percentage from the left | #### Link Creates a hotspot that navigates to a URL when clicked. * Block limit: 20 | Setting | Description | | ------------------- | -------------------------------------------------------------------- | | Title | The text shown in the tooltip when hovering over the hotspot | | URL | The destination URL when the hotspot is clicked | | Vertical position | The vertical position of the hotspot as a percentage from the top | | Horizontal position | The horizontal position of the hotspot as a percentage from the left | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.brickspacelab.com/paper/sections/content-and-media/image-hotspot.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.