Resizing images on individual product pages

[satler]

I have a problem with the product page images. They are just too big. Any advice on how to fix this ?

Link of an example : KRTACA rezervna za Euro Farm – Agro Satler

[Moeed]

Hey @satler

That is happening because you added an image that is really big in height and barely has any width. See below.

If you just simply upload a square size image then the issue will get resolved automatically by itself.

Either way, if you still wanna use this image then:

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above </ body> tag

<style>
.grid__item.product__media-wrapper .slider__slide {
    max-width: 25% !important;
}
</style>

RESULT:

---

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

[satler]

Hello, if i do this then I have a problem with other pictures.

[karim326]

hey @satler

The CSS is shrinking everything in the gallery, not just the big photo.
.slider__slide matches every slide including the thumbnail row so the 25%
hits those too that’s why your other pictures moved.

it’s also limiting the wrong side the problem isn’t that the image is too
wide, it’s that it’s too tall, roughly 1:3. Capping the width just gives you
a small tall image instead of a big tall one

Which is why I’d go back to @Moeed 's first suggestion. Your other two photos
are landscape and this one is portrait. No theme lays out mixed aspect
ratios well, so you will keep hitting this in different places.

Open the tall photo in any editor, put it on a square white canvas with
empty space at the sides, and re upload it. Two minutes and no theme code.

The thing that decides it for me: CSS only fixes the product page. That same
image also shows in your collection grid, in search results, and in a Google
Shopping feed if you run one. Fixing the file fixes all of them. The CSS
fixes one page.

If you want to keep the file as it is, limit the height instead of the width
and leave the thumbnails out of it:

.product__media-wrapper .product__media img {
  max-height: 600px;
  width: auto;
  margin: 0 auto;
}

Duplicate your theme and test there first. I can’t see your theme’s markup
from here, so the selector may need adjusting.

Are your other product photos square oor is this one the odd one out?

[Ploqo]

You are on the Trade theme.

The image is not really “too big”, it is a tall, thin photo (about 545 x 1880 px on the page).

Two methods:

1. Just swap the image

   • Re-save the tall photo on a normal shape before uploading: a square (like 1200 x 1200) or a standard portrait (like 1200 x 1500), with the brush centered on a white background.
   • You can Use ChatGPT Image/ Gemini Image to do that quickly

2. Keep the photos as they are (CSS)

   • This caps how tall a product image is allowed to get on desktop. Square and wide photos are untouched, only the very tall ones get pulled back in, shown whole and centered.
   • Go to Online Store, Themes, your Trade theme, then the three dots and Edit code.
   • Open layout, then theme.liquid.
   • Paste this just above the closing tag, then Save:

<style>
@media screen and (min-width: 750px) {
  .product__media-wrapper .product__media.media {
    padding-top: min(125%, calc(100% / var(--ratio, 1))) !important;
  }
  .product__media-wrapper .product__media.media img {
    object-fit: contain !important;
  }
}
</style>

• Change 125% to allow taller or shorter images. It only touches desktop, so mobile is untouched.

Note on the max-width 25% idea above:

• Shrinks every product image to a quarter width and pushes it to the side
• Capping only the tall ones keeps the normal photos full size.

Regards,
Ploqo

[satler]

Thank you ! This worked. I used the code you sent because I have around 10.000 pictures and I can’t check every single one and edit it.

[satler]

Question, what about mobile version ? Is there a fix for it too ?

[Ploqo]

Yes.

The line @media screen and (min-width: 750px) tells it to skip phones, so on mobile the tall photo still blows up.

Swap that whole block for this one. It caps tall images on phones and desktop both:

<style>
.product__media-wrapper .product__media.media {
  padding-top: min(125%, calc(100% / var(--ratio, 1))) !important;
}
.product__media-wrapper .product__media.media img {
  object-fit: contain !important;
}
</style>

Lower 125% for a shorter cap, raise it to allow taller.

Regards,
Ploqo

[Amlani]

are you talking about image compression? because the file size is too big?

use a Shopify SEO app.

for my store, i use Nabu Image Optimizer & SEO and it does a great job in auto-syncing Shopify images and bulk compressing them.