PrestaShop Blog

This week, discover how to create interactive scenes to highlight your products.

1 - Go to the "Catalog" tab, then in the "Image mapping" sub-tab. Click "New" to create a new scene.

2 – Write the name of the scene, then load the image from your computer which will be the basis of your mapped image.

3 – Using your mouse, select the area you want to tag, then link a product to this area. Repeat this operation for each area to map. A pop-up will appear when the user's mouse will be approached of one of the areas, presenting the product to which it is linked.
If you want the pop-up to show a specific image of the product, then load from your computer an alternative thumbnail, via the purposed field.

4 – To finish, link your scene with one or more categories, sub-categories... and save it.

An image map on the front-office:

<< Previous | Next >>