How to stop thumbnail images to fill into the square and keep their original size?

Store Design
,
1

Hi Shopify Support,

I need help with my photo thumbnails. Right now, they’re being resized to fill a square, but I want them to keep their original shape. How can I do this? Even when i upload the images as a rectangle they still form into sqaures in thumbnails. I highlighted it so that you can see how the photos are filling or not filling into the square.

Thanks!

Now they are like this:

budoucimilionar_0-1720786978696.png
budoucimilionar_0-1720786978696.png899×880 325 KB

I want them to be like this :

budoucimilionar_1-1720787001668.png
budoucimilionar_1-1720787001668.png870×796 172 KB

https://81e325-28.myshopify.com/
0007

1 Like
2

Hi @radaApeta

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
.thumbnail {
    height: 70%;
}
.thumbnail img {
    object-fit: contain; 
}
3

Hello,
thank you for your help, but it doesnt work, did i place the code right ?

budoucimilionar_0-1720791345985.png
budoucimilionar_0-1720791345985.png1905×878 96.1 KB

4

Hi @radaApeta ,

You can follow these steps

Step 1: Go to Online store > Themes > Edit code and find base.css file

Step 2: Insert below code at the end file and Save them

.thumbnail img {
    object-fit: contain !important;
    height: 80% !important;
}

We’re happy to see that our suggestion helped you solve the issue. Can you kindly give us a like and mark it as a solution? This can be a reference for other merchants if they have an issue like you.

Should you need any further information, please do not hesitate to contact us by tagging directly at Community post. We will check and let you know soon.

Thanks in advance.

5

Hi @radaApeta

Please add this code to CSS Code in Online Store > Themes > Customize > Theme settings

.product__media-wrapper .thumbnail img {
    object-fit: contain;
}
6

this works!! thank you bro