Image hotspots banner

The image hotspot banner module is used to mark specific product hotspots on an image and provide quick links to guide users to view those products. This feature is particularly useful for displaying scene images with multiple products, allowing users to click on hotspots to directly navigate to the relevant product detail pages.

Configuration Options:

1. Enable Full Width

   • Purpose: When enabled, the banner will occupy the full width of the page, creating a more impactful visual effect.

2. Background Image

   • Purpose: Set the background image for the banner, which serves as the base for displaying hotspots.

3. Automatically Open the First Hotspot

   • Purpose: If this option is enabled, the first hotspot will automatically open when the page loads, displaying the associated product information.

   • Note: If not enabled, users need to manually click on the hotspots to view the related information.

4. Image Ratio

   • Purpose: Set the display ratio for the background image.

     • Options:

       • Square

       • Portrait

       • Panorama

Hotspot Unit Settings:

Each hotspot can be positioned on the image and linked to a product. Up to 5 hotspots can be added.

• Vertical Position:

  • Usage: Adjust the vertical position of the hotspot on the image.

  • Action: Adjust the position percentage using a slider.

• Horizontal Position:

  • Usage: Adjust the horizontal position of the hotspot on the image.

  • Action: Adjust the position percentage using a slider.

• Select Product:

  • Usage: Choose the product associated with the hotspot. When the user clicks the hotspot, they will be redirected to the product page.

  • Action: Click the "Select Product" button and choose the product from the product selector popup.

Usage Notes:

• Hotspot Positioning: The hotspot position should be adjusted according to the actual product's location in the background image to ensure users can accurately locate the relevant product when clicking the hotspot.

• Image Selection: The background image should be clear and visually guiding, making it easy for users to spot the hotspots.

• SEO Optimization: Ensure that detailed and relevant product descriptions are filled out on the product pages linked to the hotspots to improve search engine optimization (SEO).

Common Issues:

• Hotspot Misalignment: If the hotspot appears in the wrong location, adjust the vertical and horizontal position percentages to align the hotspot with the correct product position.

• Exceeding Hotspot Limit: The module supports a maximum of 5 hotspots. Ensure the number of hotspots stays within this limit. If more hotspots are needed, consider splitting the image or reorganizing the display content.