Issue: Product images on a Shopify collection grid look too small due to excessive empty space (“air”) within the source images. Goal is to make items appear larger in the grid.
Preferred solution: Crop images tighter and re-upload for best clarity and consistent framing. A bulk-edit app (e.g., Hextom: Bulk Image Edit & SEO) was suggested to streamline cropping.
Temporary CSS options shared:
Trade-offs: Using transform: scale() can make images appear fuzzy; enlarging via width/translate aims to mitigate fuzziness. Both are considered temporary compared with proper image cropping.
Outcome: The original poster chose to crop images tighter and re-upload. The thread appears resolved. Code snippets and screenshots were provided to illustrate before/after behavior.
Hello there!
Like it says in the question, my product images appear small on the featured collection grids. You can see it on the image.
Is it possible to zoom in the image so we can see it bigger on the grid so it can fill up more of the remaining space?
Here is the URL:
https://toroeatstreats.com/collections/all
If you need a password enter: brayden
As @Sangeetanahar pointed out, there is too much “air” in your images.
Ideally, you should crop them tighter and re-upload.
Or, use an app to crop them in place, like Hextom: Bulk Image Edit & SEO which can do it in bulk.
However, it this is really not an option, you can add this code to either Theme Settings=> Custom CSS, or Custom CSS setting of relevant section(s):
.product-item__image > img.image__img {
width: 150%;
max-width: 150%;
transform: translateX(-16.66%);
aspect-ratio: 1;
}
This will make your product grid images 1.5 larger.
Not really recommended though. Only as temporary measure.
Screenshots before/after
Hi @abailea077
You can add this code to Custom CSS in Online Store > Themes > Customize > Theme settings reduce the space of your images
.product-item__image-link img {
aspect-ratio: 1 / 1 !important;
transform: scale(1.3);
}
comment:
transform: scale(1.3); suggested below will make your images fuzzy, my code would not.
Thank you! I will crop them tighter and re-upload! This is very usefull!
