Product Page Image Size

Store Design
, ,
1

The main image on our product page is too big - particularly on large screens - 1920 x 1080, can someone tell me the code to shrink it slightly please

2

Hey @ChrisW3,
Thanks for posting this to Shopify community.
In order to Shrink the left product media in the product page then you need to follow these steps.

Go to Shopify Admin >> Online Store > Themes >> Edit Code >> theme.scss.css

In the end of theme.scss.css paste the below provided code.

@media only screen and (min-width: 767px) {
#ProductSection .grid .grid-item.large--two-fifths {
    width: 50%;
  }
#ProductSection .grid .grid-item.large--three-fifths {
    width: 50%;
  }
}

Results:

image
image1919Ă—951 249 KB

You can also adjust the % values.

3

Hello @ChrisW3 ,

I hope you are doing well!

Please copy and paste the below CSS to theme.css or base.css. To find the theme.css or base.css, go to Online store >> Themes >> Edit code >> Search for Theme.css or base.css and paste the code to the top of the file

Alternatively, if the code didn’t work, copy the code below and go to Online store >> Themes >> Customize >> Click on Settings icon >> and scroll down to the bottom to find the Custom CSS and paste it to the tab.

@media only screen and (min-width: 767px) {
.pmslider-own–slides-track .pmslider-slide .pmslider-slide–inner {

height: 50%;
width: 50%;
max-width: 100%;
}
}

4

You can reduce wrapper size of product page by adding this code

..wrapper:has(.ProductSection) { max-width: 1600px !important; }

Best regards,
Dan from Ryviu: Reviews App

5

Hi @ChrisW3 ,
Go to Online Store > Themes > Actions > Edit Code > theme.scss.css Add below code at the bottom of theme.scss.css file

@media only screen and (min-width: 769px) {
    #ProductSection .large--eleven-twelfths {
        width: 70% !important;
    }
}

image
image1895Ă—948 249 KB

6

This worked, thank you.

Only issue now is that the buy buttons look a bit weird, too wide, in my opinion.

7

I am happy that it’s work for you. If this was helpful Mark as Solution and don’t forget to Buy me a Coffee.

And yeah regarding the buy button I can see it’s really wide. To fix this issue you need to paste the below provided code in the end of theme.scss.css file.

.payment-buttons.payment-buttons--medium {
   max-width: 44rem !important;
}

Results:

image
image1631Ă—731 131 KB

You can adjust the rem values as per your need.

8

Perfect, thank you for all of your help!