Help with product grid on the Vision Theme

[Its_Jeremy]

Hello,

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.

We did not have this issue with our old theme

Images are set to landscape in the theme editor. I’ve tried the adapt to image but that throws off the alignment of all the product cards.

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.

Our store link

Thanks in Advance

[suyash1]

@Its_Jeremy - check these links , these have images cropped already, that is no padding or any other settings are working, original images are cropped

link1

link2

[Dan-From-Ryviu]

Hi @Its_Jeremy

You can solve this issue from your Online Store > Themes > Customize > Theme settings > Product card > Image ratio, change from Landscape to another option

[Its_Jeremy]

Yes that seems to be the issue, The template is automatically cropping my product photos.

[Its_Jeremy]

Hey Dan,
Doing this ruins the alignment of product cards on the see image above

[tim_1]

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;
}

[Its_Jeremy]

Hey Tim, It worked!
Setting the images to “adapt to Image” and using this worked! Thanks so much Tim, I greatly appreciate your help.

[tim_1]

Cool. Will reach out when in need of some bicycle stuff