ZenCart. How to manage product images dimensions

In this tutorial you will learn how to manage product images dimensions in ZenCart template(s).

Small – Thumbnail images displayed on the home page and product listing pages.

Medium – Displayed on the individual Product Info pages.

Large – The image which is accessed by clicking the ‘larger image’ link on the Product Info pages.

1. You can change the sizes in your admin panel in Admin > Configuration > Images.

2. Options available to change the thumbnail size are the following:

   1. Small Image Width

   2. Small Image Height

   3. Product Listing Width

   4. Product Listing Height

   5. Product New Listing Width

   6. Product New Listing Height

   7. New Products Width

   8. New Products Height

   9. Featured Products Width

   10. Featured Products Height

   11. Product All Listing Width

   12. Product All Listing Height

   IMPORTANT: All width values and all the height values must be same. Specifically, options 1,3,5,7,9 and 11 must be the same. And, 2,4,6,8,10 and 12 must be the same.

3. Change your images size and save changes using update button:

   

4. Open the product info page from the front end of your site in the Firefox browser with Firebug installed. Using Firebug you need to determine what height the new image should be and what line in .css should be edited for that.

5. Open the Firebug window by clicking on its icon at the top right corner of your Firefox browser.

6. Select Click an element in the page to inspect.

7. Click the image frame and manually change its height in Firebug.

8. Right click on the name of the .css file in Firebug and select Copy location:

   

9. It should be a stylesheet_main.css located in the /includes/templates/themeXXX/css/ folder on your FTP, but sometimes a different file/location depending on your particular template design.

10. Change image width/height to fit your needs.

11. Save the changes made to the .css file and re-upload it to the server.

12. Refresh the product page again. Your images should have the desired size.

Thank you. Now you know how to manage product images dimensions in ZenCart template(s).

Feel free to check the detailed video tutorial below: