How to change image dimensions for collections and single products

This tutorial provides an explanation on how to change image dimensions for collections and single products in Shopify themes.

Let’s start with changing the image’s dimensions on the collection page.
  1. In order to change them, go to the Admin area and click on the Online storeCustomize.

  2. Then navigate to the collections page via your website frontend navigation and click on the admin sidebar Collection listing section.
  3. There you will be able to change the image’s dimensions.
  4. To change the product listing image’s dimensions go to the Admin area, click on the Online storeCustomize and then navigate to your products listing.
    You may open any collection which has products.

Сlick on the Collection page section in the admin sidebar and scroll to the bottom, to the Product listing area.
You are able to choose one of three already defined product image sizes:

  • Small (270x151px)
  • Medium (270x270px)
  • Large (270x360px)

change image dimensions
In order to change the image size on the product single page, go to the Admin area, click on the Online storeCustomize and open the product single page.

Click on the Product template in the Admin sidebar and check the image size area, it has 3 predefined image sizes:

  • Small (370x370px)
  • Medium (570x570px)
  • Full-width (1170x570px)

change image dimensions
We suggest that you use images with dimensions close to those that you choose in your store. It will let you avoid cropping/zooming the image and make it fit its container.

The images themselves are not responsive. It is the layout that adapts them to the device you use for viewing the website so there is always a chance image can be cropped/zoomed on a certain device.