Venue - Collections - Make mixed ratio product images more compatible

This article covers the layout and alignment of product grid sections within your theme.

Why are the images in my product grid different sizes?

The symmetry of the images within your product grid is decided by the aspect ratio (width to height ratio) of the product images that were uploaded when creating the products in your Shopify admin. 

When creating a product it's possible to upload any aspect ratio product image you wish. You can mix square, landscape, portrait or anywhere in between for the same product. You can also have one product set up with square images and another with landscape images.

While this offers flexibility, it can lead to unexpected results when it comes to the layout and alignment of the product grid sections of your website, such as collection pages. 

Here is an example of how the page may look : 

How to make each image the same size and aligned with each other

To create a symmetrical product grid, the images must have a consistent aspect ratio, otherwise, the image layout and alignment will be mixed.

The overall size of the image is not the deciding factor here, images can be different sizes while still having the same aspect ratio.

For example, an image sized 200px by 400px would have an aspect ratio of 1:2, as would an image sized 400px by 800px.

The aspect ratio is the image's ratio of width to height, you can find this by dividing the width by the height, this will allow you to compare your images to check that their aspect ratio is the same.

Manipulating the aspect ratio allows you to choose the image shape on the product grid, for instance, you may want the images to display as squares.

Here are two examples :

A. Square aspect ratio product images

B. Portrait aspect ratio product images

Using mixed ratio image on the product grid

If your product images must be of a mixed ratio, due to the nature of the products or for design purposes, we have built-in a feature that will help them fit neatly together.

This feature is called Masonry and it will arrange your images in a brick style format.

Enabling Masonry effect

1

Log in to your Shopify store admin

2

Click on Online Store then Themes in the side menu to get to the themes area of your admin.

3

Click the Customize button next to your active theme to go to the theme editor.

4

Click on the Theme Settings option in the left side menu followed by Product grid.

5

From here, scroll down to Layout and click the Use masonry layout checkbox.

6

Click Save and check your work.

Expected results 

When using mixed ratios images, it is difficult to determine the exact results of enabling the masonry feature, the reason for this is that the combination of image ratios is infinite.

The technology behind the feature will automatically search for the best way to fit the products together and reduce unwanted white space.

Here's an example of how the product images will shuffle together :