The Hotspots with drawer section is an interactive feature that allows you to tag specific parts of an image (like products in a lifestyle shot). When a customer clicks a "hotspot," a drawer slides out to reveal more details.
You can configure the layout, background, and animation of the section using the following settings:
Setting | Description |
Reveal sections on scroll | Enables a smooth animation when the section becomes visible in the browser. |
Make section full width | Expands the section to occupy the entire width of the screen. |
Color scheme | Allows you to select a predefined theme color scheme for the section. |
Image | The primary background image used for desktop displays. |
Mobile image | A separate image file optimized specifically for mobile devices. |
Overlay opacity | Adjusts the level of the dark overlay applied to the image to improve text readability. |
Make header inside | Places the heading and description content directly inside the image area. |
Header alignment | Aligns the header content to either the Left or Center. |
You can edit the text displayed on the section.
This section allows for precise control over your text for both aesthetics and SEO:
Setting | Description |
Heading | Enter the section title, choose a Heading size, and select a Heading tag to optimize the section for search engine rankings. |
Desktop max width | Set the maximum width of the heading on desktop screens to prevent the text from stretching too far. |
Description | Add detailed descriptive text below the heading and choose its font Size. |
Hide on mobile | Toggle this option to hide the description on mobile devices, keeping the mobile layout clean and compact. |
Direct users to a specific collection or product page with a customizable button:
Button label & link | Enter the text for your Button label and paste the destination URL in the Button link field. |
Style & Size | Choose between Outline, Solid, or Link styles, and adjust the button Size to Small, Medium, or Large. |
Icons | Enable the Show icon button toggle and select a specific Icon button style to create a more visual call-to-action. |
Hotspots highlight specific areas on the image.
Primary color | Sets the main background color for the hotspot indicators. |
Secondary color | Sets the secondary color, which is typically used for the icon inside the hotspot. |
Hotspot icon | Choose the visual style for the indicator, such as a Circle or a Plus sign. |
You can add two types of hotspots in this section:
Product hotspot is designed to drive sales by linking directly to an item in your catalog.
Product Selection | Click the Select product button to choose the specific item from your catalog that you want to highlight. |
Product Details | Toggle the Show vendor and Show rating switches to control which additional information appears on the hotspot card. |
Star Ratings | If ratings are enabled, use the Rating color picker to customize the color of the stars (e.g., #FC9B2C). |
Call to Action | Customize the Link text (e.g., "View details") to create a clear button that encourages customers to visit the product page. |
Richtext hotspot is used for storytelling, promotions, or sharing useful information that isn't necessarily tied to a single product.
Visual Content | You can Select image to add a small thumbnail or icon specifically for that hotspot's content. |
Text Content | Use the Heading field for a title and the Description rich-text editor to provide detailed information or highlights. |