The Hotspots with drawer section allows you to create an interactive image with clickable hotspots that display additional product information or custom content in a drawer.
You can use Product hotspots to showcase products directly from an image or Richtext hotspots to provide descriptions, promotional messages, and other useful information.
This section is ideal for creating interactive lookbooks, highlighting product features, or helping customers explore products and information without leaving the page.
Click the Hotspots with drawer section name to see its settings on the right-hand sidebar.
Use these settings to customize the overall appearance of the section.
Color scheme: Select the color scheme applied to the section.
Drawer color scheme: Select the color scheme used for the drawer that displays hotspot content.
Use the Image settings to configure the main image containing the interactive hotspots.
Image: Select the main image displayed in the section.
Mobile image: Select a separate image optimized for mobile devices. If no mobile image is selected, the desktop image will be used.
Overlay opacity: Adjust the opacity of the overlay applied to the image.
Customize the main heading displayed in the section.
Desktop max width: Set the maximum width of the heading content on desktop.
Heading: Enter the main heading, such as Move freely.
Heading size: Select the size of the heading.
Heading tag: Choose the HTML heading tag, such as H1, H2, or H3. This setting affects the page's heading structure and SEO.
Uppercase: Display the heading in uppercase letters.
Use these settings to display the heading and description inside the image instead of above it.
Heading bottom fade: Apply a fading effect behind the heading when it is displayed inside the image. This option only applies when Make header inside is enabled.
Color scheme inside: Select the color scheme used for the content displayed inside the image.
Header alignment: Align the header content to the Left or Center.
Add supporting content below the heading.
Text: Enter a description or promotional message.
Size: Select the text size.
Hide on mobile: Hide the description on mobile devices.
Configure an optional call-to-action button for the section.
Button label: Enter the text displayed on the button.
Button link: Select the destination customers will visit when clicking the button.
Size: Select the button size.
Style: Choose between Outline, Solid, or Link.
Show icon button: Enable or disable the icon displayed inside the button.
Icon button: Select the icon used for the button.
Uppercase: Display the button label in uppercase.
Customize the appearance of the interactive hotspot markers displayed on the image.
Primary color: Select the main color used for the hotspot markers.
Secondary color: Select the secondary color used for the hotspot markers.
Hotspot icon: Choose between Circle and Plus.
Glassy hotspot content: Enable a glass-style visual effect for the hotspot content.
Adjust the spacing around the section separately for desktop and mobile.
Top padding: Adjust the space above the section on desktop.
Bottom padding: Adjust the space below the section on desktop.
Mobile top padding: Adjust the space above the section on mobile.
Mobile bottom padding: Adjust the space below the section on mobile.
Click Add block under Hotspots with drawer to add interactive hotspots to the image.
There are two available hotspot types:
Product hotspot: Connect a hotspot to a Shopify product and display its information.
Richtext hotspot: Display custom content such as headings, descriptions, images, or promotional information.
You can add multiple hotspots to the same image and configure each hotspot independently.
The Product hotspot block allows you to connect a specific position on the image to a product in your Shopify store.
When customers select the hotspot, they can view the associated product information in the drawer.
Use these settings to position the hotspot on the main image.
Horizontal position: Adjust the hotspot's horizontal position on desktop.
Vertical position: Adjust the hotspot's vertical position on desktop.
Mobile horizontal position: Set the hotspot's horizontal position on mobile.
Mobile vertical position: Set the hotspot's vertical position on mobile.
These settings help you place the hotspot directly over the relevant product or feature in the image.
Configure the product displayed when customers interact with the hotspot.
Product: Select the Shopify product associated with the hotspot.
Vendor: Show or hide the product vendor.
Show rating: Display the product rating.
Rating color: Select the color used for the product rating.
Link text: Customize the text of the product link, such as View details.
Use these settings to display additional icon-and-text information associated with the product.
Layout: Choose between Scrolling and Vertical layouts.
Speed: Adjust the scrolling speed when using the Scrolling layout.
Direction: Select the direction in which the content scrolls, such as Right to left.
The block provides individual Icon with text settings.
- Show: Enable or disable each icon-with-text item.
Use these items to display additional product-related information when needed.
The Richtext hotspot block allows you to add informational hotspots without connecting them to a Shopify product.
This is useful for highlighting product benefits, explaining specific features, sharing promotional information, or providing additional details about the image.
Use these settings to control where the hotspot appears on the image.
Horizontal position: Set the horizontal position on desktop.
Vertical position: Set the vertical position on desktop.
Mobile horizontal position: Set the horizontal position on mobile.
Mobile vertical position: Set the vertical position on mobile.
- Image: Select an image to display as part of the hotspot content.
Customize the information displayed when customers select the Richtext hotspot.
Heading: Enter the main title of the hotspot content, such as Hotspot heading.
Description: Add supporting text to explain the feature, benefit, or promotional information.
For example, you can use a Richtext hotspot to highlight the flexibility, breathability, or durability of an activewear product.
