How to Build Image Map in the Prestashop?

Learn how to build an image map in the PrestaShop platform with few steps on your product page.

Image maps were an aspect that was introduced with version 1.1 of Wcomm, which included version 1.5.

Highly Scalable and Lightweight – PrestaShop is your way to go!

The new installations of Wcomm 1.6 do not have this feature, but can still be used in upgraded stores for version 1.6.

If you have a new installation of WM 1.6, you would like to use more image drawings, here’s how:

1. Open the Admin> Menus page.
2. Tap on “Add a menu”
3. In the form, type a name (a priori, “image maps”) and “AdminScenes” in the “Class” field. Leave the “Module” field blank and select “Catalog” for the parent page.
4. Save the form. The Image maps page will now appear on the selected page.

Remember that this feature is denounced and will no longer be supported.

How to Build Image Map in PrestaShop?

Image Mapping sets a number of clickable zones in a picture so that you can open various product pages by clicking on a separate image. This feature makes your site more attractive by relaxing your customers’ navigation.

Before creating an image map, you must have an image with a product or variance of different objects.

Selecting the option in the “Image Mapping” menu will take you to a new page listing the newly registered image drawings.

To build a new map, click the “Add New Photo Map” button. The screen you created is taken.

• Image map name: Enter the name of the image map.
• Status: Whether the image map is available or not. You can select to delay all available connections until the settings are completed.
• Image to be mapped: Select the image you want to mark the image map and click “Save and Stay”. This page will reload your uploaded photo and many more options.

Setting up an image map

Now we’re going to learn how to set up an image map. Tap anywhere on your image and drag your mouse over one of your products offered and cut the portion of the image you want to click on the user.

Your choice is clear and luminous when the remaining image is dark. Carefully consider your selection legislation with the clickable area of ​​your customer.

Once this is completed:

1. In the field below the image, type the first few letters of products associated with your selected region.

In our example, we will type “dress”, and many options will appear. Then we can choose “printed dress”.

2. Confirm your choice by clicking “OK”. Your map is now created.

Repeat this process for all the products in this picture that allow you to access them with one click.

Clicked regions will be visible to the “+” icon. View a small window showing your mouse cursor over the image name, default image, thumbnail description, and price

If you made a mistake in your clicked area, you can resize by clutching from its pages or corners.

If you want to delete a click area, select the area and click the “Delete” button in the image.

Finally, you have to assign your image map to a picture. This is done by checking the boxes in the “Categories” table.

Once all changes are made, save all your settings.

In your selected category, your image map is now available in your store.

Having things to get done in PrestaShop? Click here for a free consultation.