Dynamic Image Hotspot

Version: 1.0.0

Supported Odoo Versions: 17.0

Author: Legion Soft

Website: www.legionsoft.com

Introduction

Users who click on the hotspot are redirected to the linked page or content.

The Image Hotspots app empowers e-commerce merchants to enhance their product images with interactive hotspots, enabling customers to access additional information and highlighting key product features.

Benefits

The Dynamic Image Hotspot feature provides an engaging way to present product details, enhancing user interaction and improving customer experience. By offering clickable areas with additional information, it helps merchants effectively showcase their products and drive customer engagement.

Steps to Use the Dynamic Image Hotspot

Adding Hotspots to Images

• Step 1: Open the website where you want to add image hotspots.
• Step 2: Click on the edit button to enter editing mode.
• Step 3: Access the Hotspot tool on the left-hand side of the editor, as shown in the illustration below.
• Step 4: Drag and drop the hotspot element from the sidebar onto the page. The hotspot will appear on the image.

Adding Hotspots to Any Image

• Step 1: To add a hotspot to a background image, double-click the image.
• Step 2: Click on the image where you want to add the hotspot. Options will appear on the left-hand side of the editor.
• Step 3: Add a hotspot to the selected image and configure the position as desired.

Screenshots

Below are screenshots illustrating the module in action:

In this image you can see we can use this feature with all block structure which contains the image.

Here we have Seletced the block text - image and now we are going to add the hotspot to image section by Choose Variant and click on add hotspot button

Now you can see the chair is the variant when we hover the mouse on hotspot it will show that chair product and its price and you can enter MFQ

Here is the default behavior of hotspot when you select the hotspot and drop it on the page it default show like this. and double click on image you can upload your own image

In this picture we show from right pane you haev image block section inside there is a replace button you can also use that button to replace the image

Here you can see a pop up where you can add the images through "upload an image" button or "add url" to add our specific image

In this picture below we can select the specific variant which we want to show on a image hotspot

here you can see the hotspot if its not show then click on "Add hotspot" Button

When we hover the mouse button on that hotspot button it will pop up the that varaint picture and price and add to cart button and MFQ you can enter

here we can adjust the hotspot location by using horzentally and vertically according to our need.

Here we have explain we can adjust the hotspot location according to our requirements

Support & Contact

For support, please contact us at support@softlegion.com.