Overview

This feature needs to be implemented by Commerce Vision.

A hotspot banner provides a visual display of products clustered on a page for a particular purpose. For example, the products that make up a kit, compulsory uniform or work clothing items or a spare parts list for a machine. It can also be used as an attractive way to display new or promoted products on your site.

Each product in the banner has a clickable hotspot over it - usually a small circle. When that area is clicked, the viewer is taken to the product on the same page, where it can be added to cart.

Example:

Here, we have a banner with a spot on each product. A clickable hotspot is mapped onto each spot. A viewer clicks a spot to jump to the product (listed below the banner).

On this page:

Step-by-step guide


Before you begin...

Ensure these have been created:

  • A cluster category with products for the cluster added. Hotspot banners can only be added to cluster categories.  
  • A suitable banner image. (Ideal size range: 250-500px) 

Create a hotspot banner

To create a hotspot banner:   

  1. Go to Products & Categories → Category Maintenance.

  2. Find the cluster category for this hotspot banner and click Edit. NOTE - If the category has not been flagged as a cluster, you can do that next.
     
  3. If this category has not been flagged as a cluster, in Enable Cluster, select Yes.


  4. Scroll down to the Category Hotspot Banner panel.
  5. Click the Select or Upload Image button.

  6. Select the banner image. After insertion, the banner pathway, dimensions and file size are displayed.



  7. To add hotspots, click the Hotspots button.



  8. Position the cross where you want a hotspot and click. The hotspot area is displayed as a revolving circle.


  9. Use the lookup tool to select the product for the hotspot. 


  10. To add another hotspot, repeat steps 6-7.

  11. When you have finished adding hotspots, click Confirm.

    The number of added hotspots is shown.
  12. To save the hotspot work you have just done, click Save or Save & Exit.

  13. Refresh the cache. 

  14. If this cluster category's page is accessed from the main navigation menu, a link will be displayed there just like other categories. Ensure the Hotspot Image Widget is in the Product List template.


Add/Edit Hotspot Image Widget

The Hotspot Image Widget renders the banner on the page. It should have been added to the Product List template during implementation. If not, you can always add it. 

There, you can also change the width of the hotspot area and how far from the top of the screen a product details section is when the hotspot is clicked. 



To add/locate the Hotspot Image Widget:

  1. Go to Content → Pages & Templates.

  2. Use the Search tool to find the Product List template.


  3. Click Edit.

  4. Find the Hotspot Image Widget. If it is not there, use Add Widget to add it in the zone to display.
  5. To open the widget, click Edit.

  6. To change the width of the clickable area, in Hotspot Width, edit the pixel size. The default size is 40px. Here, it has been changed to 70px.

    At the default 40px

    (same size as the hotspot circle)

    At 70px

    (larger than the hotspot circle)

  7. To change the landing position of the selected product from the top of the screen, in Hotspot Scroll Offset From Top, edit the number of pixels from the top. Default: 200px. 

    At the default 200px from the top of the screen. The hotspot for the highlighted product was selected. 

    Changed to 500px from the top of the screen.

  8. To save changes, click Save.


Additional Information

Minimum Version Requirements

4.31

Prerequisites

--

Self Configurable

No

Business Function

Products & Categories

BPD Only?

Yes 

B2B/B2C/Both

Both

Third Party Costs

n/a


Related help


© Copyright 2001-2023 Commerce Vision Pty Ltd. Use of this site signifies your acceptance of Commerce Vision’s Terms & Conditions. CV Connect, the Commerce Vision logos, and other Commerce Vision marks are assets of Commerce Vision Pty Ltd.