Image Hotspots

With Image Hotspots, you can place points on an image that opens a pop-up when the user clicks on them. In the pop-up, you can either add a link button (such as View Product) that leads to a product page, or you can have the product added directly to the shopping basket (Add to Basket). This allows you to highlight products in the image and guide customers directly to the right page, which can be one of the following:

• Product Detail Page (PDP)
• Product Listing Page (PLP) - displays a product category
• Brand page - shows all products from a specific brand
• Tag page - displays all products with a certain tag

To manage image hotspots, go to DAM / Media > Image Hotspots. An overview is shown of image hotspots that already exist.

If you work with seasonal or promotional products, the hotspots always lead to the latest collection or show the products that you would like to promote.

Image Hotspots Details

• Enter a Name for the hotspots.
• Click SELECT to select the Picture on which you want to define the hotspots. A pop-up opens, showing the DAM.
• In the preview that is shown in the Image Hotspots Details, double-click to place a marker.
• Double-click the marker to open a pop-up in which you can select a brand, product, tag, or tree. Click SAVE to close the pop-up.

You can define more than one hotspot on the same image, by placing multiple markers. Each marker can link to a different page. The hotspots on the selected image are treated as a set: you cannot activate one but not the others.

After saving the Image Hotspots, you can implement them in two ways: either via the Embedded Code shown below, or via the dedicated Image Hotspot Widget. The latter is the preferred option.

In the Hotpots Details page, a code is now shown:

When you add a Hotspot widget to a CloudSuite Admin page, you can enter the ID of your hotspot to display it on the page.

Design Preview