...
Image mapping is the fact of assigning multiple clickable zones to an image so that different product pages can be opened by clicking on one single image. This feature makes your site very attractive by easing your customers' navigation.
Before creating an image map, you must have an image that feature variations of a product, or different products altogether.
Clicking on the "Image Mapping" tab takes you to a new page.
...
Creating an Image Map
To create a new onemap, click on the "Add New" button. You will arrive at are taken to the creation screen.
- Image map name. Enter a name for the image map in the "Name" field.Next, select .
- Status. Whether the image map is available or not. You can choose to delay its availability until you are done settings all the links.
- Image to be mapped. Select the image that you want to represent the image map. Click on "Upload Image" to save it, then click "Save and stay". The page will then reload, with the photo that you uploaded and many more options.
Setting up an Image Map
Now we are going to learn how to set up an image map.
Click anywhere on a corner of your image and drag your mouse over the image one of the products presented, in order to highlight/cut out the part of the image you want to be clickable to the user.
Your selection will be clear and illuminated while the rest of the image will darken. Take good care Pay attention to carefully align the frame of your image selection with the zone onto which your customer can will be able to click.
Once this is done:
...
- In the field just underneath the image, type the first few letters of the product associated with
...
- your selected zone.
In our example, we would type "iPod" and several choices would appear. We would then choose "iPod Touch". - Confirm your choice by clicking "OK". Your image map is now created.
Repeat this process for all of the products on this image that you wish to make accessible
...
with a click.
| Tip |
|---|
The clickable zones are visible thanks to the "+" icon. Hovering over the image with your mouse cursor, you can see a little window that presents the image's name, default image, short description, and price. If you have made a mistake on your clickable area, you can resize by grabbing its sides or corners. If you wish to delete a clickable area, just select the area, and click the "Delete" button within the image. |
Now Finally, you must assign your Image Map to a category. This is done by checking the boxes on the "Categories" table.
...
Once all of the modifications have been done, click on "Save Image Map(s)" in order to save all of your settings.
Done! Your image map is now available on your store, in the selected chosen categories.
The clickable zones are visible thanks to the "+" icon. Hovering over the image with your mouse cursor, you can see a little window that presents the image's name, default image, short description, and price.
Tags
The PrestaShop Tags feature enables you to associate your products with keywords. Your customers can use the keywords to easily and quickly find the products they are looking for.
...