Product card image ratio

Product cards are displayed on product listings, such as collection pages, search pages, or featured collections sections.

By default, the theme will use your image aspect ratio to ensure images are not cut. This is the recommended approach if images are essential for your products.

However, there are cases where it is useful to force a different ratio for the product card's image on listings:

  • If your product images have different ratios from product to product, then the product listing grid can look off.
  • If your product images have a weird ratio that does not look good on a grid.

To do that, our themes offer a way to force a specific ratio. To change the ratio, open the theme editor, click on the General settings icon, then select Product card category:

Then, change the "Image size" setting:

Most of our themes support the following options:

  • Natural (default): the ratio will respect your image ratio, ensuring the image is never cropped.
  • Square, Short and Tall: the ratio will be resized to fit into a square (1:1), short (4:3) or tall (2:3) format.
  • Fill card variations: images will also be cropped in addition to being resized to fit into a square, short, or tall format.

This setting only affects product listings such as collection pages. On product pages, the natural ratio of your images will be used. If you want to also change the ratio of your images on product pages, you will need to resize your images to the desired format, and re-upload them to Shopify.