Hotspot banner settings

This guide describes the Hotspot Banner section.

Use this section to display a large image with interactive hotspots that users can hover over to reveal more information. You can add either a hotspot product or a hotspot item:

Hotspot product: Requires a link to a product.
Hotspot item: Can include the following:
- An image
- A heading

This section is ideal for:

Displaying multiple shoppable items in a single image
Creating an interactive shopping experience.

Demo Example: A Hotspot Banner section displayed on a product detail page, showcasing interactive hotspots linked to products.

How to access the Hotspot banner section

Access this section through the theme customizer:

Navigate to Online Store > Themes
Select “Customize” on your active theme
On any theme template, click “Add section”
Search and select “Hotspot banner”

Note: Section cannot be added to the Password page.

To insert a new section between existing ones, follow the steps in the article "Add a section"

How to configure the Hotspot banner section

Basic Components

The “Hotspot banner” section consists of two primary components:

General settings
Block. Available block types include:

Hotspot product. To learn about all available block settings, see the related article "Hotspot product"
Hotspot item. To learn about all available block settings, see the related article "Hotspot item"

General settings

Select a setting described in the following table:

Setting	Description
Heading	This field is for adding a heading to the section. In the top menu of the field, you can find options to customize the heading. Furthermore, you can click the dynamic source button to insert a dynamic source as the title of the section.
Heading size	The heading size setting offers three options to control the size of your section heading: Small Medium Large
Description	This field is for adding a description to the section. In the top menu of the field, you can find options to customize the text. Additionally, you can use the style of headings from H1 to H6 to the body text. Furthermore, you can click the dynamic source button to insert a dynamic source for the description.
Heading alignment	Align the heading or heading with description according to your design preferences: Left Center Right

Media settings

Setting	Description
Image	You can add the main image as background, by clicking on the “Select image” button to access your media library, upload a new image, or explore free images. Also, you can connect a dynamic source by clicking the source button. Once an image is chosen, you can use the “Change” button to remove, replace, or delete it.
Image height	Use the slider to adjust image height.
Color scheme	Color Scheme allows you to customize every aspect of your theme's colors in the settings. When you apply a color scheme to a specific section like the hotspot banner, it automatically updates all associated colors for a cohesive and professional look across your website.
Make image full width	Enable this option to stretch the image across the entire width of the page.

Section padding

Setting	Description
Top padding	The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider.
Bottom padding	The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section.
Top padding mobile	The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile	The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for mobile devices.