Product Hotspot

About Product Hotspot Section

The Product Hotspot section allows you to prominently display a list of products by captivating images with clickable hotspots that link to the products. This can help you showcase your products in real life in a striking way, which can boost sales.

In this knowledge base article, you will know how to set up the Product Hotspot section in Electro theme.

Product Hotspot Configuration

The Electro theme allows you to customize the Product Hotspot section with the following settings:

General

In the General tab, you can independently add three types of details to the collection list section: subheading, heading, and description. To remove the content in the section, simply leave the placeholder blank.

Layout

In the Layout tab, you can choose whether to show pagination and navigation for the product list.

• Show pagination

• Show navigation

You can also choose the alignment of the section text content. The options are left or center.

Hotspot Image

The hotspot image is the image that will be used for the hotspots icons. It will be displayed on the left side of the section.

To add the image, click the “Select image” button. This will open the media manager. You can then upload a new image or select an existing image. The recommended image size is 800 x 500px in PNG format.

Button

To add a button label and link, click on the placeholder and enter the text. The button will appear below the text content and above the hotspot image and product list. To remove the button, leave the placeholder blank.

In the Link placeholder, you can select the page or link that the button will redirect to when clicked. If this field is left blank, the button will show disabled status.

Hotspot Items Configuration

The hotspot items section allows you to customize the hotspot icons, including the linked product and the position of the icon on the image.

To access the hotspot item settings, click on the hotspot item.

There is a maximum of 5 hotspot items that you can use in this section. You can freely show or hide them by clicking on the eye icon.

To select a product for the hotspot icon, click on the Select product button.

Once you have selected a product, you can set the top offset and left offset for the icon.

• The top offset is the distance from the top of the image to the top of the icon.
• The left offset is the distance from the left side of the image to the left side of the icon.

Here is an example of how to set the top offset and left offset: