How to Use Electro Product Hotspot
About Product Hotspot Section![Copy Click to copy 2222](https://docs.saleshunterthemes.com/wp-content/themes/manual/images/icons/link.svg)
The Product Hotspot section enables you to create visually compelling product displays. By incorporating clickable hotspots into captivating images, you can effectively highlight featured products and drive customer engagement.
In this knowledge base article, you will know how to set up the Product Hotspot section in Electro theme.
How To Access Product Hotspot Section![Copy Click to copy 2222](https://docs.saleshunterthemes.com/wp-content/themes/manual/images/icons/link.svg)
To access the Product Hotspot section, go to Online Store > Theme > Electro theme > Customize.
On the Customize page, choose the page where you want to add the Product Hotspot. Then, click the Add section button and select the Product Hotspot to use on the page.
How To Configure Product Hotspot Section![Copy Click to copy 2222](https://docs.saleshunterthemes.com/wp-content/themes/manual/images/icons/link.svg)
The Electro theme allows you to customize the Product Hotspot section with the following settings:
General![Copy Click to copy 2222](https://docs.saleshunterthemes.com/wp-content/themes/manual/images/icons/link.svg)
Under the Color Scheme, you can choose a specific scheme for the Product Hotspot section. To modify or add a new color scheme, go to Theme Settings > Colors.
You can also add content for the Section subheading, Section heading, and Section description. If you want to hide any text, leave the placeholder empty.
To adjust the heading size, there are four options:
- H2
- H3
- H4
- H5
These heading sizes will be calculated based on Base text size. For more information, please check Theme settings > Typography.
Layout![Copy Click to copy 2222](https://docs.saleshunterthemes.com/wp-content/themes/manual/images/icons/link.svg)
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.
- Left
- Center
Image![Copy Click to copy 2222](https://docs.saleshunterthemes.com/wp-content/themes/manual/images/icons/link.svg)
The hotspot image is the image that will be used for the hotspot 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![Copy Click to copy 2222](https://docs.saleshunterthemes.com/wp-content/themes/manual/images/icons/link.svg)
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.
Theme Settings![Copy Click to copy 2222](https://docs.saleshunterthemes.com/wp-content/themes/manual/images/icons/link.svg)
Updates to Theme Settings in this section will be also reflected in other sections in your store.
The theme settings of the Product Hotspot include:
Page Background![Copy Click to copy 2222](https://docs.saleshunterthemes.com/wp-content/themes/manual/images/icons/link.svg)
Enter a Hex color code, select a color, or choose a brand color from your brand assets.
Product Detail Options![Copy Click to copy 2222](https://docs.saleshunterthemes.com/wp-content/themes/manual/images/icons/link.svg)
You can you can enable or disable the following features:
- Show vendor
- Show variant swatches
- Enable quick view
- Enable quick buy
- Show product attributes
- Show Sale badge
- Show Sold out badge
- Show product description
- Show the second image on hover
Product Image![Copy Click to copy 2222](https://docs.saleshunterthemes.com/wp-content/themes/manual/images/icons/link.svg)
You can choose the Image ratio for your products in the hotspot. There are 3 options: Square, Portrait (2:3), Landscape (3:2)
You can also choose the image fit type: Contain or Cover.
Product Style![Copy Click to copy 2222](https://docs.saleshunterthemes.com/wp-content/themes/manual/images/icons/link.svg)
There are 2 styles to choose from Standard and Card:
If you choose Card style, you can change the color scheme for the Product card and the Media background:
Please note that the media background is only visible when the product image has a transparent background.
Currency Code![Copy Click to copy 2222](https://docs.saleshunterthemes.com/wp-content/themes/manual/images/icons/link.svg)
You can choose to show a currency symbol or code (for example: show $ or USD):
Variant![Copy Click to copy 2222](https://docs.saleshunterthemes.com/wp-content/themes/manual/images/icons/link.svg)
Firstly, you will need to enter the variant option like Color, Size, etc. The, you can choose Display type as Custom value or Variant image:
Product Attributes![Copy Click to copy 2222](https://docs.saleshunterthemes.com/wp-content/themes/manual/images/icons/link.svg)
From Electro 2.0.0, you can display product attributes in the product details. Enter the metafield namespaces and key into the designated area:
To learn more about Product attributes, please check this guide.
You can also change the color scheme for the product attributes:
Sold Out Badge![Copy Click to copy 2222](https://docs.saleshunterthemes.com/wp-content/themes/manual/images/icons/link.svg)
You can choose the color scheme for sold out badge in the Product Hotspot with the color scheme you created:
How To Configure Hotspot Items![Copy Click to copy 2222](https://docs.saleshunterthemes.com/wp-content/themes/manual/images/icons/link.svg)
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:
Frequently Asked Questions![Copy Click to copy 2222](https://docs.saleshunterthemes.com/wp-content/themes/manual/images/icons/link.svg)
1. Why can’t I see the pagination or navigation for my product list?
Pagination and navigation will only be displayed if there are two or more hotspot items.
2. The button below the text content is not working. Why?
Make sure you have entered a valid link in the Link placeholder for the button. If the field is left blank, the button will be disabled.
3. I’m having trouble with the hotspot item positioning. Any tips?
Experiment with different top and left offset values in the Hotspot items to achieve the desired position. You can also use the image as a guide to help you place the hotspots accurately.