Product grid: Make mixed ratio product images more compatible

Generally speaking Shopify stores look much more professional when you use the same ratio images for your products - image size is often much less problematic than image ratio (see the bottom of this article for more on this). Here's two examples of how beautifully your product grid will line up using the same ratio images.

A. All square product images

same_ratio_square.png

B. All portrait product images

same_ratio_port.png

The problem

When creating a product in your Shopify store it's possible to upload any ratio product image you wish.

You can mix square, landscape, portrait or anywhere inbetween for the same product. You can also have one product set up with square images and another with landscape images.

While this is very flexible it's not so good for your product grid (unless you are using a theme with an asymmetric design) and can make your store look a little broken. Because of the way websites are built you get some strange gaps appearing as the taller images affect those on the next row:

C. Mixed ratio product images

mixed_ratio.png

The solution

The best solution is to always create your product images using the same ratio.

If that's not possible then Masonry, a clever piece of software comes to the rescue. You can switch this option on in your Shopify theme editor under General settings > Product grid.

 masonry.png

This will then make your images shuffle neatly together in a brick (i.e masonry) style layout as per the image below. it's important to note that this style means your product headings will no longer line up:

mixed_ratio_masonry.png

Top tip: As stated above using a mix of ratios is much more problematic than using a mix of image sizes. If you upload two images, one 750px x 750px and one 850px x 850px most themes will resize them in the web page and they will look the same as they are both perfectly square.