I have some issues with the product grid on the Vision theme. I’ve contacted their support but they were unable to assist on the issue, they advised me to resize the images on over 2000 products. I’m hoping someone may have solved a similar problem.
We recently switched over to the Vision theme and I’m unable to display the images correctly on the product grid, as they appear far too zoomed in.
I’ve tried setting minimum product card sizes in the code, increasing the padding and a few other things but I still cannot seem to get it to work. I’d greatly appreciate some input on this issue.
You can solve this issue from your Online Store > Themes > Customize > Theme settings > Product card > Image ratio, change from Landscape to another option
Yes, as already noted, when you select any image ratio other than “Adapt”, theme code crops your images to this aspect ratio.
Only way to avoid cropping is to use “Adapt”.
Then we can override the container aspect ratio with CSS to keep info aligned. You may try using this either in section Custom CSS settings or in Custom CSS under theme settings.
product-card a{
--padding-bottom: 75% !important; /* change number to fit most images */
}
product-card img {
object-fit: contain !important;
}