A common problem with many of the themes on Shopify is that they free flow images height to 100%. The width of the image is limited to the container on the page. This method can create uneven image heights on your category landing pages, search results pages, and even a way too tall product image on the product detail page.
How To Fix Aspect Ratio
You have many options, some more desirable than others. But it is going to ultimately depend on your technical skills if you are trying to edit an extensive catalog of images in bulk. Here are some methods we commonly use at Pelican Commerce to fix the Shopify image aspect ratio in bulk.
1. We use a method to bulk download all images into a single folder from the Shopify store. We resize the aspect ratio in a local program in bulk to have square 1:1 ratio images (where the blank space on the longest side is filled in with white space). Then we add all the images to a temporary image server to create a hosted URL. We then use those URLs to map the images to the bulk export file from Shopify to replace the existing images with the new images. The first time we upload the file with the external server URL, Shopify uploads them to the Shopify CDN, and then that URL is never needed again.
This method is a more technical method to work with images in bulk and requires a fair amount of excel experience.
2. You can edit the theme code, which can proportionally resize the aspect ratio to display square images. You can have the code of your theme modified to force all images to 1:1 ratio on Search Pages, Collection Pages, and the Product Detail Page. Also, don't forget about items displayed in sections on the home page. All these areas need to be coded to force the aspect ratio. The key is a "Proportional Resize" of the aspect ratio to make the images square.
3. You can crop each image to be square in a local or online program. The most popular tool would be Photoshop, or if you have a lower volume of images, then you can even use your phone to edit pictures and crop them to a perfect square.
If you are looking for help bulk editing your images, then we can take care of it for you. We offer custom code options to auto-correct the aspect ratio or image asset modifications in bulk to adjust the original images. Contact us anytime for more information.
