To change the image dimensions on the collection page follow the steps mentioned below :
1. Open your Shopify admin panel and go to the Online store ➜ Customize section :
2, Then go to the Collections page through your website’s frontend navigation and click on the admin panel Collection listing section.
3. Here, you will be able to change the image’s dimensions.
4. To change the product listing image’s dimension go to the admin panel and click on the Online store ➜ Customize and navigate to your product listing.
You can open any collection that has products.
Click on the Collection page section in the admin sidebar and scroll to the bottom to the Product listing area.
You are now able to choose one of the three defined image sizes:
- Small (270x151px)
- Medium (270x270px)
- Large (270x360px)
In order to change the image size on a single product page, open the admin the panel, and go to the Online store ➜ Customize and open the single product page.
Click on the Product template from the admin panel and check the image size area, it has 3 defined image sizes:
- Small (370x370px)
- Medium (570x570px)
- Full width (1170x570px)
We suggest you use images with dimensions close to those you choose in your store. It will let you skip cropping/zooming the image and make it fit.
NOTE: the images themselves are not responsive it is the layout that adapts them to the device you use for viewing your website so there will be always a chance image can be cropped/zoomed on a specific device.
Hope this tutorial will be helpful to you!
Related Tutorials For Shopify :
Administration And Configuration
Categories & Products Tutorials
Shopify Installation Tutorials
Layout And Content Editing Tutorials
Shopify Links & Menus Tutorials