Knowledgebase
How to add and manage image maps in PrestaShop 1.5-1.6
Image maps are category images that contain links to products. Image maps are shown at the top of category pages on the frontend. You can add and manage image maps from the back office of your PrestaShop. Just go to Catalog menu>Image Mapping sub-menu. On the page that opens there's a table with the existing image maps. In the last a few columns of the table there are some buttons for performing various actions. You can disable/enable the image maps with the buttons in the Activated column. There are also buttons for editing the image maps and for deleting them.
To add a new image map, click on the Add New button in the top right corner. On the page that opens type a name for the image map in the field for Image map name. Then find the option Image to be mapped, click on the Browse button and use the window that pops out to locate on your local computer the picture that you want to upload and turn into an image map. After that click on the Save and stay button that's in the upper right corner of the page. The image will be uploaded and a few other options will appear. At this point the picture is still not an image map. Use the checkboxes for the Categories option to associate the picture with one or more categories.
The image itself will be shown on the edit form under the Image to be mapped option. To turn an area of the image into a link to a product, hover the mouse pointer over the image, click and hold the left mouse button, drag the mouse to select an area of the image and release the left mouse button. When you do this a text field will appear under the image. Start typing the name of the product in the text field; this will display a drop-down menu from which you can select the product. After you select it the area of the image will turn into a link to that product. In that area you'll see a couple of buttons: one for changing the product to which the area of the picture is a link, and the other for removing the link. After you're done with the options don't forget to click on the Save or on the Save and stay button in the top right corner.
On the frontend the picture will have a plus sign to indicate that the area of the picture is a link. When a customer hovers the mouse pointer over this area a pop-out window will appear. It displays the name, price, short description and thumbnail image of the product. Clicking on that part of the image will redirect the customer to the page of the particular product.
For screenshots and some more details check out the tutorial on how to manage image mapping in PrestaShop 1.5-1.6.