Image mapping is used to produce hot spots on the a photo or graphic that would be displayed for a product.  The hotspot produced for the image would be used to convey information on the product when the mouse pointer hovers the spot.  The following tutorial will show you how to use hotspots for products in your PrestaShop 1.5 installation.

Creating Hotspots for Products in PrestaShop 1.5

  1. Login as an Administrator then go to the Menu Bar and hover over CATALOG.
  2. Select IMAGE MAPPING when the drop-down menu appears and you will see the following:

    prestashop15-catalog-image-mapping-list


    If you have products with image mapping already set, then you will see a list here.  To edit a product, click on the EDIT button at the far right hand side of the screen.  Or, click on ADD NEW in order to add a new mapped image for a product.  Clicking on the ADD NEW button will bring up this screen:

    prestashop15-catalog-image-mapping-new


    Prestashop also provides you the directions on how to map products in the image.  However, we will break it down in to a short graphical segment.
  3. You first need to name the image you are using for the product.  This is a required part of the image map.  The option to use this image is given by the next selection item labeled as STATUS.  By default, the STATUS is set to enabled, but if you're waiting on the image or if you need to disable it, select the 'x' in order to disable it.
  4. Type in the name of the image, or select the BROWSE button to find the graphic/photo that you intend to use.  Note that there is a size limit on the photo.  PrestaShop is limited to the following:

    JPG, GIF or PNG file formats only
    131072 KB file size
    556 x 200 px (width x height)

    If the graphic or photo is smaller, then a white border (background) will be added that will bring the image to the correct size.   NOTE:  If you wish to change the image dimensions, you will need to find the 'large-scene' image type settings in PREFERENCES -> IMAGES

  5. When you add a picture, it will appear in a box as per the one below:

    prestashop15-catalog-image-mapping-2


    With your mouse pointer, click and hold and drag to create a square/rectangular area for the hotspot.  The area that you highlight (as shown above) will be the area where hovering over the image with the mouse will produce a text description of the product.
  6. To identify the product for with the image has been mapped, start typing the first few letters of the product in the box below the image.  Click OK when you see the product appear.

  7. The next section is for an alternative thumbnail.  If you don't want to use the generated image based on the image above, then select BROWSE in order to select an alternative thumbnail graphic. 

    prestashop15-catalog-image-thumbnail


    Note again that Prestashop gives you the file limits on file format and file size.  The file size limit for the thumbnail is 161 x 58 pixels.  These dimensions can be changed in the PREFERENCES under IMAGES.
  8. Once you have finished with both the main image and the thumbnail, select SAVE in the top right hand corner to preserver your entries

The image used in your shop can be very important to your customers.  Image mapping allows you to identify the graphic and control what is being used to represent your products in the store. Here's an example where the main graphic  is used in the front of store (for the IPOD) showing a small description that pops up when the mouse is held over the product.  A thumbnail graphic is used in the recently viewed products.



prestashop15-storefront-catalog-images

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve our Help Center:
Email Address
Optional, but our team may contact you for more information.
Did you find this article helpful?

Post a Comment

Name:
Email Address:
Comment:
Are you a bot?
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

News / Announcements

Update to SSL Certificates - Certificate Warnings
1969-12-31 11:00 am EST
Hits: 692

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!

Help Center Search

Current Customers

Email: support@WebHostingHub.com Ticket: Submit a Support Ticket
Call: 877-595-4HUB (4482)
757-416-6627 (Intl.)
Chat: Click To Chat Now

Ask the Community

Get help with your questions from our community of like-minded hosting users and Web Hosting Hub Staff.

Not a Customer?

Get web hosting from a company that is here to help.