How to standardize aspect ratios (square thumbnails)

There are only ways to make your images square shaped - each with its own drawbacks:

• Square by adding padding (white bars)
• Square by cropping (removes sides)

Only by using one of these two techniques is it physically possible to make a rectangle fit inside of a square. To see an image showing the difference, please click here.

Square by adding padding (white bars)

This adds to the sides of your images to make the aspect ratio 1:1 (square). This is the ideal solution for images with a white or transparent background. It is also used when cropping is not workable, and has the benefit of properly aligning product titles/prices in your collection page – which many Shopify themes struggle with. To see an example of how this can help alignment, please click here.

Adding white bars will not, of course, change the size of the actual photo inside the image. This means that even though the image is technically a square, it might not look like it is. If your objective is to make the actual photo/content of the image occupy the entirety of the square shaped thumbnail, then we recommend using the cropping method instead.

Note: If your website has a non-white background, please note that you can use Canvas Resize to do the same thing (except it allows you to pick the color of the bars that will be added)

Square by cropping (removes sides)

This involves trimming the sides of the images in order to create perfect squares. This is not suitable for all merchants - it really depends on the type of images you are showing, since this approach risks cutting off vital elements of an image. This technique works best if your images have large margins or if the content on the sides is not very critical.

Additional notes

Usually only the first image associated with a product is used to generate a thumbnail. Therefore we recommend using the variant filter Image Number X of a Product to only edit image #1 inside your products. This will save you many editing credits, and will avoid having to edit or distort images unnecessarily.