How Can I Uniformly Resize Images with Different Heights on Shopify?

Hi,

I uploaded some photographs to Shopify, but the sizing seems to be a problem. Shopify uses the photos’ maximum width but not their maximum height. My photos all have different heights, and it looks terrible. The problem also occurs when Shopify shows items “you may also like” and the full image isn’t shown, because the image is too tall and Shopify doesn’t resize it. How could I get my images to all be the same height?

Hi, @KMichael .

Thank you for posting your question to the Shopify Community!

I understand that your product photos have different heights, and the end goal is to have your photos fit the maximum width and maximum height.

Are you using any additional photo editing/resizing tools to resize your product photos? I recommend using our Free Shopify Image Resizer Tool to keep your images consistent with width and height. When resizing your content images, you’ll want to resize them to 1024 x 1024px. When resizing for your storefront, you’ll want to use 2048 x 2048px.

I’d also like to share additional photo editing and resizing tools/apps to help better resize your images:

Could you also share how you started your online store? I’d love to hear more about what you’re working on and if you’ve looked into starting a social media strategy. If you haven’t, we have a great 7-step resource on our Shopify Blog to get you started.

Hi,

I am looking for a solution without going through every single photo.

I have several thousand products and it’s not going to work to resize them all.

I need a bulk solution.

Please let me know if you could help.

Thank you

Thank you for your reply, @KMichael .

I definitely understand going through each photo is not plausible in this case. I recommend looking into the following apps so that you can bulk resize your photos and save time.

App Recommendations:

I hope this helps!

Hi @KMichael ,

Go to Assets > base.css and paste this at the bottom of the file:

.collection .card--standard .card__inner {
    --ratio-percent: 70% !important;
}