The image hotspot section allows you to upload an image and add interactive hotspots to it. These hotspots can be linked to different products or details, helping customers to explore and discover more information about specific areas of the image with a simple click.
How to add this section:
To add image hotspot banner section to your store;
Click on 'add section' which can be found in your left sidebar.
Scroll down, or search for 'Image hotspot', then click on the section.
Done, your Image hotspot section is added.
Section settings:
To view the section settings click on the image hotspot banner section:
Image: Select the image you want to use as a background.
Image overlay opacity: If you want to add opacity to your bg image adjust the range slider automatically.
Color scheme: Select a color scheme for the banner text area.
Background opacity: Control the background color opacity.
Hotspot Height: Set the height of the hotspot markers. the default height is 33px.
Hotspot Color Scheme: Choose the color scheme for the hotspot markers.
Hotspot Active Color Scheme: Select the color scheme for the active hotspot markers (when clicked or hovered).
Layout: Change the layout of image hotspot banner section from the available layout options.
Height: Change the section height.
Width: Changes the section width, i.e. fullwidth or box width.
Enable Custom Minimal Height: This option allows you to set a specific minimum height for the section, giving you more control over its appearance.
Controls the position of the banner text content and the width.
Heading:
Set the title of your section here.
Heading font:
Select font family for your primary and secondary heading.
Heading size:
Set the size of the heading, choose between Small, Medium, Large and Extra large.
Enable custom styling:
Enable this option to customize heading font and color scheme different than the default colors.
You can add your desired banner text here.
Button label:
This text will show on the button, for example: 'All categories'
Link:
Enter a link for the button, for example to the full collection page.
Button color scheme:
Select the color scheme for the button.
Show link instead of a button:
Check this box if you don't want a button to show, but only a clickable text.
You can read more about this feature here: https://intercom.help/xtra-for-shopify/en/articles/8825899-xpert-variant-bulk-order
Mobile Image: If you want to use a different image for mobile upload it here, or perhaps the desktop image is not fitting mobile you can use this option to upload mobile optimized image.
Height: Control section height for mobile only, by default it is set to Medium.
Image hotspot settings:
By default when you add image hotspot section it adds 2 hotspots, you can always add more or delete according to your need. The maximum hotspots you can add in a section is 5.
Now let's discuss image hotspot settings, to begin click on:
The very first option you see is Product which allows you to display product as hotspot content. But you're not only limited to show products if you want to display content other than products leave the product selection empty and scroll down:
You can see Content area, where you can write hotspot heading and text. You can see both heading and text fields are dynamic which means you can use metafields to propagate the data from your store.
It controls the position of markers, horizontal and vertical. You can see there are 4 sliders 2 of them controls the position on desktop and the other 2 on mobile.