We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Re: How to get same image ratio in product card Impact theme

How to get same image ratio in product card Impact theme

TonkaPapers
New Member
4 0 0

Hi,

I'm looking for the simplest solution to get my image ratio in product cards the same / consistent. Using Impact theme and I can't find the option to do so easily.

I have so many pictures uploaded already and they all have completely different image ratios so the site is jumping when scrolling through the images. My product close-up photos are portrait and mockups with products landscape. I know it will crop many images, and in some cases I hope changing the focal point can help and in other cases I will create a new image.

 

thank you!

Replies 3 (3)

Shadab_dev
Shopify Partner
1583 83 173

You have already answered a lot of stuffs if we try to add css now to scale down or make changes to images it will defer quality or cut images. The best way is to include images of products with the same width and height for all products. 

 

If we try to set a definite width height now the image might cut or might not look the way you need it to be, it won't be that bad but still

Buy me Coffee, if you feel i was helpful. Email Me here or WhatsApp me with this link for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
TonkaPapers
New Member
4 0 0

thank you for your reply!

yes in many cases it will be really bad but I in some cases not - so it is to minimize the work. I'm migrating from squarespace, where this was an option and it is not awful how it is cut mostly. Also, on the collection pages I had the option to have images have the same image ratio and it looks fine.
I just saw that it might be helpful to group together the portrait images and before/after group landscape images in the product card, (when it is not possible to change the ratio of the image so much) - to avoid the jumping on the screen. Hope this helps on the cumulative layout shift rating also.

Shadab_dev
Shopify Partner
1583 83 173

Yeah If you can prevent layout from from shifting too much, ofcourse you will improve the sites performance and insights by a bit

Buy me Coffee, if you feel i was helpful. Email Me here or WhatsApp me with this link for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.