Products hotspots settings

This section is divided into two main parts: a visual image and a product card slider. On the image, interactive hotspots are displayed — each one linked to a specific product. When a hotspot is selected, the corresponding product card updates accordingly.

This section allows you to visually showcase how a product is used or highlight it in a lifestyle context, while the product card gives customers the option to add the item to their cart or visit the product detail page for more information.

This engaging and intuitive feature helps guide customers through product discovery by making your catalog more interactive and visually driven.

How to access the Products hotspots 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 “Products hotspots”

To insert a new section between existing ones, follow the steps in the article "Sections and blocks" and locate the section titled “How to add a section”.

How to configure the Products hotspots section

Basic Components

The “Product hotspot” section consists of two primary components:

General settings – These control the overall settings of the section.
Product block – Each block has its own individual settings.

To insert a new block between existing ones or to add a block when none have been added yet, refer to the article "Sections and blocks" and locate the section titled “How to add a block”.

General settings

Settings	Description
Color scheme	You can apply different color schemes to your store: After creating color schemes in the theme settings under the 'Colors' tab, you can assign them to different sections of your store. In each template, section, or block, you'll find a 'Color Scheme' dropdown. Simply select the appropriate color scheme to maintain consistency and align with your brand's identity.
Container color scheme	This option allows you to customize the colors for the product card container. Simply choose a color scheme from the dropdown menu.
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 heading of the section.
Heading size	The heading size setting offers three options to control the size of your section heading: Small Medium Large

Image settings

Settings	Description
Image	Choose an image for your Product hotspot section. Click on “Select Image” 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 added, you can use the “Change” button to remove, replace, or delete it.
Container background	This option allows you to add an image as the background for the product card container. Simply upload your desired image or select one from the library. Also, you can connect a dynamic source by clicking the source button. Once an image is added, you can use the “Change” button to remove, replace, or delete it.

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.