# Image hotspot ### Section overview The Image hotspot section is a banner-style element that displays interactive hotspot links overlaid on an image. Users can hover or click on these hotspots to view product information or navigate to specific URLs. #### Common use cases * Showcase product features with interactive points highlighting specific details * Create interactive lookbooks where users can shop directly from an image * Build educational content with clickable points revealing more information * Display room or space setups with purchasable items marked by hotspots #### Usage tips * Use high-quality images with good contrast to ensure hotspots are visible * Position hotspots strategically to avoid overcrowding and ensure good mobile experience * Consider the placement of text content relative to hotspots to prevent overlap * For mobile, limit the number of hotspots as smaller screens make interaction more challenging * Test different color schemes to ensure hotspots stand out against your background image ### Section settings | Setting | Description | | ------------------------- | ---------------------------------------------------------------------------- | | Image background desktop | The background image displayed on desktop devices | | Image background mobile | The background image displayed on mobile devices | | Show entire image | If enabled, displays the entire image without cropping | | Y spacing | Controls the vertical height of the section | | Color scheme | Sets the background and text color theme for the section | | Text color | Controls the text color with options for default, force light, or force dark | | Border color | Determines the color of section borders | | Enable gradient | Adds a gradient overlay to enhance text visibility | | Enable background overlay | Adds a background behind the content for better readability | | Border position | Sets where borders appear around the section | | Y alignment | Controls vertical positioning of content within the section | | X alignment | Controls horizontal positioning and text alignment within the section | | Enable margin | Adds horizontal margin to the section content | | Enable max width | Limits the content width for better readability | | Visibility | Controls whether the section appears on mobile, desktop, or both | ### Block settings #### Heading A customizable text heading for the section content. * Block limit: 1 | Setting | Description | | ------- | ---------------------------------- | | Content | The text to display as the heading | #### Image Displays an image within the content area of the section. * Block limit: 3 | Setting | Description | | ------------ | ------------------------------------------ | | Image | The image to be displayed | | Image height | Controls the height of the image in pixels | #### Content Adds rich text content to the section. * Block limit: 3 | Setting | Description | | ------- | ------------------------------------------- | | Content | Rich text content to display in the section | #### Buttons Adds one or two clickable buttons to the section. * Block limit: 1 | Setting | Description | | ---------------------- | ---------------------------------------------- | | Button label | Text for the primary button | | Button URL | URL for the primary button | | Color button | Style and color theme for the primary button | | Secondary button label | Text for the secondary button | | Secondary button URL | URL for the secondary button | | Secondary color button | Style and color theme for the secondary button | #### Product Creates a hotspot that displays a product card when clicked or hovered. * Block limit: 20 | Setting | Description | | ----------- | ---------------------------------------------------- | | Product | The product to display when the hotspot is activated | | Y alignment | Vertical position of the hotspot as a percentage | | X alignment | Horizontal position of the hotspot as a percentage | #### Link Creates a hotspot that links to a URL when clicked. * Block limit: 20 | Setting | Description | | ----------- | ------------------------------------------------------------ | | Title | Text displayed in the tooltip when hovering over the hotspot | | URL | Destination URL when the hotspot is clicked | | Y alignment | Vertical position of the hotspot as a percentage | | X alignment | Horizontal position of the hotspot as a percentage | --- # 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/keystone/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.