In Savon Theme I cant find the CSS Code for resizing the products

Store Design

Topic summary

A user working with Shopify’s Savon theme is struggling to resize product images, finding them too large even at the smallest built-in settings. Tutorials they found only cover the Dawn theme’s “product-image-container” CSS class, which doesn’t exist in Savon’s structure.

Key Points:

  • The user wants to reduce image sizes on product pages, including the hero image
  • They’re unsure about optimal image dimensions (questioning if 2048x2048 is too large)
  • Store URL provided: www.fivechoices.de

Proposed Solution:
A helper suggested adding CSS code to either:

  • Theme settings > Custom CSS, or
  • The base.css file (found at Actions > Edit code > Assets)

The code adjusts grid columns for product images:

.product-information__grid:not(:has(.product-information__media:empty)).product-information--media-left {
    grid-template-columns: 1fr 1fr !important;
}

Status: The initial code didn’t work; a revised version with !important flag was provided. The user has not yet confirmed if the updated solution resolved the issue.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hello dear Friends,

I have found some Tutorials on how to Resize productimages. But all of them helpful Tutorials just explained the Dawn-theme. Where there is „product-image-Container“ to change the size.

but in Savon, i can not find the css section.

I just want to change the Imagesize Because the intern 3 choices to change from Big to small are still to Big.
could anybody help out here?

iam about to Change my Phototodimensons in Pixrl. What size would be the Best to implent in to Shopify? I read 2048x2048… but aint that to Big?

2

Hi @USimport ,

Please explain more about it, what are you looking to change?

For the css file, you can find it at: Actions > Edit code > Assets > base.css file.

1 Like
3

Hi Namphan,

iam trying to resize my productimages. But there are just a few options to choose from. So I have to Drive a Little more in CSS.
The Tutorials I have found online was for a other Theme and the Savor Theme iam working with Right now. Has a different structure to it and the sections I needed was Not to find. At least iam on the base.css now and iam trying to understand where I can manage the Maximum image size to be way smaller than it is shown actual.
if you Click on a image on the Homepage it will take you to the next Site, whitch is the productsite. And on that productsite the pictures are way to Big. Is There a way to manage all the Images (including the „Hero-picture“)?

4

I have taken out the Passwort Funktion for now

5

www.fivechoices.de

6

Hi @USimport please share store preview url and which theme you are using?

7

Hi Ahsan,

iam using the „Savor“ Theme. And the shopurl is www.fivechoices.de

thank you

8

Is There anybody who knows how to resize pictures in CSS in „Savor“ Theme?

9

Hi @USimport ,

Please go to Customize > Theme settings > Custom CSS and add code:

@media screen and (min-width: 750px) {
    .product-information__grid:not(:has(.product-information__media:empty)).product-information--media-left {
        grid-template-columns: 1fr 1fr;
    }
}
10

Nothing has Change After implenting your Code 1 to 1

11

Hi @USimport ,

Please change code:

@media screen and (min-width: 750px) {
    .product-information__grid:not(:has(.product-information__media:empty)).product-information--media-left {
        grid-template-columns: 1fr 1fr !important;
    }
}

Or you can also paste this at the bottom of the base.css file