No matter how I do it, I cannot set the size of the images so that all images are the ‘same’ size without something being cut off.
How do I change this?
The text should be on one level, the pictures should just be smaller, instead of being cut off
Topic summary
A user is experiencing issues with product image sizing on their store, where images appear cropped instead of uniformly scaled. The text labels are misaligned, and images are being cut off rather than resized proportionally.
Proposed Solutions:
-
Standardize image dimensions before upload: Use consistent dimensions (e.g., 1080 x 1080 pixels) for all product images to ensure uniform display. Resizing before upload is recommended over using Shopify’s built-in tool, which may distort images.
-
CSS modification: Add custom CSS code to the theme’s stylesheet (
theme.scss.css) to enforce a square aspect ratio:
.grid-product__image-mask .image-wrap {
padding-bottom: 100% !important;
}
The discussion remains open, awaiting feedback on whether the CSS solution resolves the issue. One respondent requested the store URL for further troubleshooting.
Hi @JonasDialga please share your store url
There are several ways but the easiest way is to use a standard size. For example, if all the images you upload to your site have the same dimensions (i.e. 1080 x 1080) then they will be the same size on the page. You can either upload them all the same size or you can resize them once they are in Shopify. If you use Shopify’s resize tool, it can distort the images sometimes in order to make it fit in the dimensions you specify, it’s best to do it before you upload them.
Hi there @JonasDialga I suggest that you
Try this -
Go to the online store > theme > Edit Code >Assets >theme.scss.css >add code in this file.
.grid-product__image-mask .image-wrap {
padding-bottom: 100% !important;
}
Let me know if this works for you!