Every store contains completely different product image sizes making it hard to keep consistency across all stores.
Our product card templates and product images on the product page are considered standard aspect ratios. We handle oversizes using liquid filters to render the different images or media sizes but it doesn’t affect the uneven distribution of sizes between product cards and product page images.
The proportional relationship between height and width, in other words, aspect ratio, is key when uploading media and handling the situation mentioned above.
There aren’t specific standards on how wide or high an image should be as this can vary from store to store but here are the recommended aspect ratios:
1:1 width and height are the same
2:3 portrait-style image, the height is 1.5 times longer than the width
Set the image size with CSS
Go to the Custom Styles in the store record or create a new style block
Paste the following CSS rules:
.SC-ProductCard_image { height: 100%; } .SC-ProductCard_image img, .SC-ProductCard_image svg { object-fit: contain; height: 100%; aspect-ratio: 3/2; }Click save
You can also set the object-fit to cover size:
object-fit: cover;
Your changes and customisations will be reflected in the product cards, these cards are used in the following templates:
Category page template
Category and product index page templates
Featured products
The object-fit property helps to avoid expanding or cropping the images, it will fit the image within the image box.