The Image hotspots section allows you to create an interactive, shoppable image by placing product hotspots directly on an image. Customers can interact with each hotspot to quickly discover the featured product and access product information or Quick view.
This section is useful for lookbooks, lifestyle images, outfit inspiration, beauty products, or any visual where you want customers to shop products directly from the image.
1. Section settings
Click the section name to see the section settings on the right-hand sidebar.
1.1 Type
Choose the overall layout style of the section.
Standard: Displays the section header and hotspot image in a standard layout.
Layered: Uses an alternative layered layout for the section content.
1.2 Appearance
Customize the overall appearance and behavior of the section.
Reveal on scroll: Show an animation when the section becomes visible while scrolling.
Make section full width: Expand the section to use the full available width.
Make header inside: Place the section header inside the main image area. This option applies to desktop only.
Color scheme: Select the color scheme applied to the section.
Color scheme outside: Select the color scheme applied to the area outside the main hotspot content.
1.3 Image
Set the main image used for the interactive hotspot area.
Image: Select the main image displayed on desktop.
Mobile image: Select a separate image optimized for mobile devices. If no mobile image is selected, the desktop image will be used.
2. Container Block - Section header
The Section header container allows you to add introductory content to the Image hotspots section.
2.1 Block settings
Align center: Center-align the content inside the section header.
2.2 Child blocks
Click Add block under Section header to add content.
The section shown supports child blocks such as:
Heading: Add the main heading of the section, for example
Push limits. Break boundaries.Text: Add supporting text or a short description below the heading.
Child blocks can be reordered by dragging and dropping them in the Theme Editor.
Note: When Make header inside is enabled in the section settings, the section header is placed inside the image area on desktop.
3. Product hotspot block
Click Add block in the Image hotspots section to add a Product hotspot.
Each Product hotspot creates an interactive point on the main image and connects that point to a selected Shopify product.
3.1 Hotspot position
Use the position settings to place each hotspot at the correct location on the image.
Horizontal position: Adjust the hotspot position horizontally on desktop.
Vertical position: Adjust the hotspot position vertically on desktop.
Mobile horizontal position: Set a separate horizontal position for the hotspot on mobile.
Mobile vertical position: Set a separate vertical position for the hotspot on mobile.
Separate mobile position settings are useful when the mobile image has a different crop or composition from the desktop image.
3.2 Content
Product: Select the product associated with the hotspot. The hotspot will use information from the selected product.
Quick view: Enable this option to allow customers to quickly view the selected product from the hotspot without first navigating to its product page.
You can add multiple Product hotspot blocks to highlight different products within the same image. Each hotspot can be positioned independently and linked to a different product.
