Decrease the size of product images in shopify

Store Design
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