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.
Click the section name to see the section settings on the right-hand sidebar.
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.
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.
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.
The Section header container allows you to add introductory content to the Image hotspots section.
Align center: Center-align the content inside the section header.
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.
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.
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.
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.