Shopify themes, liquid, logos, and UX
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
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!
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
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.
Yeah If you can prevent layout from from shifting too much, ofcourse you will improve the sites performance and insights by a bit