PrestaShop 1.6.x. How to manage product images zoom feature

This tutorial will guide you through on how to manage product images zoom.

PrestaShop 1.6.x. How to manage product images zoom feature

Product image has a zoom feature when the cursor hovers over it. In order to change the zoomed image size, you need to follow the steps below:

1. Log into your PrestaShop admin panel.
2. Navigate to Preferences -> Images:
3. Change the size of thickbox_default and tm_thickbox_default image types:
4. Once you have added new width and height sizes, click Save button:
5. Also, you need to scroll down the same page and Regenerate Images:
   • Select Products images, they should be regenerated:
   • In Erase previous images field select – YES.
   • Click Regenerate thumbnails button:
6. Use FTP or Cpanel and navigate to themes/themeXXX/js/product.js file, where “XXX” means the number of the theme you have purchased.
7. Chose the Edit file option and look for the coding:

   if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
   {
   $('.jqzoom').jqzoom({
   zoomType: 'innerzoom', //innerzoom/standard/reverse/drag
   zoomWidth: 458, //zooming div default width(default width value is 200)
   zoomHeight: 458, //zooming div default width(default height value is 200)
   xOffset: 21, //zooming div default offset(default offset value is 10)
   yOffset: 0,
   title: false
   });
   }

   You need to edit zoomWidth and zoomHeight options values.

   Let’s change 458 to 558 and save changes.

8. Clear PrestaShop cache and refresh the products page to see the changes.

9. Note that you should keep the aspect ratio between the large_default and thickbox_default images sizes.

Feel free to check the detailed video tutorial below:

PrestaShop 1.6.x. How to manage product images zoom feature