Hi,
I have two different imports and some new product images on collection page are very small. Example https://vazluxe.com/collections/new-in?page=5
small above and want to all be this size below
Is there a code I can set so they all look the same?
If you checky our this two image
https://vazluxe.com/cdn/shop/files/6164079.jpg?v=1745290040&width=360
https://vazluxe.com/cdn/shop/files/6164076.jpg?v=1745290039&width=360
one image has less white space around it and other image has much. The only way to remove the white space of those image which has much.
From shopify files content area you can resize the image and remove serounding white space like this
Hope it will solve your issue. By HTML CSS code this is not possible to solve.
Hi @Luxurymrkt , The issue you’re facing is caused by one or more of the following:
Inconsistent Image Dimensions
Missing or Low-Resolution Featured Image
Theme Settings Not Enforcing Consistent Size
Here are steps to resolve this –
Go to Online Store > Themes > Actions > Edit code
Open sections/collection-product-grid.liquid or similar file
Look for the img tag and ensure it has proper object-fit: cover and fixed height/width styles.
Add this CSS
.product-card__image img {
object-fit: cover;
height: 100%;
width: 100%;
aspect-ratio: 1/1; /* for consistent square layout */
}
Thank you but this won’t work because the images that are big will get cut off. Is there a way to just increase any image that’s smaller?