Decrease the size of product images in shopify

Store Design

Topic summary

A user seeks to reduce product image size on their Shopify product page while maintaining the overall page width.

Proposed Solution:
One respondent provided CSS code to be added to the theme’s stylesheet (main.css, base.css, style.css, or theme.css):

  • Targets product media images on screens wider than 749px
  • Reduces image dimensions to 80% width and height
  • Centers images using transform positioning
  • Adjusts padding to 50%

The solution includes a screenshot showing the visual result of the CSS modifications.

Status:
The discussion remains open, with another user requesting the store URL for further assistance. The original poster has not yet confirmed whether the CSS solution resolved their issue.

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

Hi… my website is shopkindergo.com/products/book and i’m looking for a way to decrease the size of the product images on the product page without decreasing the page width…

If anybody knows the solution i would appreciate it if you would share it with me I’ll be sure to upvote and mark as accepted solution if it works thanks :slightly_smiling_face:

2

Hi @Kindergo

Check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (min-width: 749px){
.product__media.media.media--transparent img {
    width: 80%;
    height:80%;
}
.product__media.media.media--transparent {
    padding: 50%;
}
.media>*:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
    left: 50%;
    transform: translate(-50%);
}
}

And Save.

Result:

Made4uoRibe_0-1727030803550.png
Made4uoRibe_0-1727030803550.png938×795 370 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Can you share your store URLS