Product Image Size

Store Design
1

Hello, I am using the MARANELLO theme.

I’m transferring products from an old site to this new one, my image size 104 x 104 pixels.

So, obviously they look very pixelated as the theme is increasing the size throughout.

Can I switch the product image size to max width 104 x 104?

And if so, can you let me know where to do this.

Thank you!

2

Hi @vetiver
Yes, you can set the max size of product images to 104x104px using CSS so that they don’t zoom in and appear pixelated.

Thank you!

3

Hi @vetiver
Can you share the link to your store and a screenshot of where this is happening so I can try to help you?

4

Hi there,

You have also opened a ticket with us (Truly Fine Pixels, the author of the theme) and we will get in touch with you shortly to see if there’s something that we can do about it :slightly_smiling_face:

5

Yes, you can set the product image size to a max width of 104x104 pixels to prevent Shopify from enlarging them.

Here’s how to do it in the Maranello theme:1. Go to Shopify Admin > Online Store > Themes.

  1. Click Actions > Edit Code on your active theme.

  2. Open theme.css or base.css (or another main CSS file in the theme).

  3. Add the following code at the bottom of the file:

/* Set max width and height for product images */
.product-card__image img {
    max-width: 104px;
    max-height: 104px;
    width: auto; 
    height: auto;
}
  • Save the file and refresh your store to see the changes.

Notes:- If the images are still stretched, check for any object-fit properties in the CSS and adjust accordingly.

  • This change will apply to all product images. If you only want it for specific sections, you may need to modify the CSS selectors.

Need an Easier Way? Try EasyEdits

I’m the developer of EasyEdits—a Shopify app that helps you make quick, simple store edits without coding. It’s free to try, and you can keep the changes even if you don’t subscribe!

6

Hi, can you share store url?