Hello,
I am trying to resize the product images but all products are showing differently (attached picture). I am newbie to Shopify.
Can anyone guide me what will be the size of Product Images ? and how to fix this issue
Thank you
2 Likes
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community! 
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
1 Like
@KetanKumar Thank you so much. Here you go:
For product images, it’s best to follow our guide here on product media which says:
Your product and collection images can be any size up to 4472 x 4472 px, or 20 megapixels. Product and collection images need to have a file size smaller than 20 MB to be added to Shopify.> > High-resolution photos look more polished and professional to your customers. For square product images, a size of 2048 x 2048 px usually looks best.
Your images can be any size up to 4472 x 4472px. There is more information here on how to take amazing product photography, it’s well worth checking out! Are you having any trouble at the moment with your product images? Do you know the dimensions of the current images you’d like to use on your product page?
1 Like
@dmwwebartisan 1024px*1024px
@Sally05 4472 x 4472 px,
I have to resize all to4472 * 4472 px? @dmwwebartisan
@Sally05 yes!
@dmwwebartisan I am still unable to fix this issue. I tried for couple of products. Please check the attached screenshot
Thanks
what issue Please explain properly exact your issue I will try to solve your problem. I check your screenshot not clear to me what do you want
@dmwwebartisan Can you see the alignment of Add to Cart button on the products I have shared, displaying up and down (see attachment) on collection page and home page
password is aashyez
1 Like
sorry for the terrible issue can you try this code
- Go to Online Store->Theme-> Edit code
- Asset->/theme.css ->paste the below code at the bottom of the file.
.grid-view-item__image-wrapper div {
padding-top: 100% !important;
}
.grid-view-item__image-wrapper .grid-view-item__image {
height: 100%;
object-fit: cover;
}
.product-card__title {
height: 45px;
display: inline-block;
}
.product-card .price--listing {
height: 50px;
}
after code view
1 Like
It works!!! Thank you so much appreciate it
1 Like
its my pleasure to help us
1 Like
I tried this code it works well but I am getting the line underneath the Product title on Home and Collection Page. Can you check why I am getting this on Hover?
1 Like
oh sorry for that issue can you try this code
.product-card:hover .product-card__title, .product-card:focus-within .product-card__title {
border: none;
}
1 Like
I am still having issues with Images Alignment and display @KetanKumar Can you please check it
- space between the rows (see image)
- if product is with review it shows incorrectly (see image)
- if title is bigger then alignment it shows incorrectly (see image)
Link for reference: https://aashyez.com/collections/huda-beauty
