How to Use Electro Product Hotspot

Overview

What maximum number of hotspot items could be added to the Electro Product Hotspot Section?	5
Can I change the product hotspot icon?	No
Can I add a CTA button to the Electro Product Hotspot Section?	Yes

About Electro Product Hotspot Section

Electro Product Hotspot section lets you 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.

Configure Electro Product Hotspot

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

Edit General Tab

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.

Edit Layout Tab

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

Note: Pagination and navigation will only be displayed if there are two or more hotspot items.

• Show pagination

• Show navigation

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

Edit 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.

Edit Button Tab

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.

Configure Electro Product Hotspot Items

The hotspot items section allows you to customize the hotspot icons, including the linked product and the icon’s position 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:

Frequently Asked Questions

What is the Electro Product Hotspot Section?

The Electro Product Hotspot section lets you display a list of products by using one unique feature image, with clickable hotspots that link to the products, which is used in real-life experience. This is the best way to bring all your products to life!

What are image ratios available to display the main product image?

You have three image ratios, including square, 3:2 and 2:3 (landscape and portrait).