Step-by-step guide

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

Related articles appear here based on the labels you select. Click to edit the macro and add or change labels.

Macro Instructions for carrying Article Information through to Feature List Minimum Version Requirements BPD ONLY Business Function B2B B2C BOTH Feature Feature Description (Written for our customers and can be pasted into comms sent to them) Additional info Pre-Reqs/ Gotchas Self Configurable Third Party Costs Instructions for carrying Excerpts through from this page to the Feature List Article Page: Add macro  / Multiexcerpt (or copy and existing excerpt and edit) or (Copy existing page and place content into existing excerpt macros) On Features List page: Click in the Cell to be populated  / add macro /  Multiexcerpt Include / Select the Article page and the excerpt (or copy another feature line and edit the 'Article page' source.