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.
1. Hotspots with drawer settings
Click the Hotspots with drawer section name to see its settings on the right-hand sidebar.
1.1 Appearance
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.
1.2 Image
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.
1.3 Heading
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.
1.4 Make header inside
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.
1.5 Description
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.
1.6 Button
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.
1.7 Hotspots
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.
1.8 Section padding
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.
2. Add hotspot blocks
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.
3. Product hotspot block configurations
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.
3.1 Hotspot position
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.
3.2 Product information
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.
3.3 Icon with texts
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.
3.4 Icon with text items
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.
4. Richtext hotspot block configurations
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.
4.1 Hotspot position
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.
4.2 Image
- Image: Select an image to display as part of the hotspot content.
4.3 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.
