How to make Product Image Larger/Taller in Supply Theme

Hi all,

trying to make my main product photo larger. Tried adding following code but mobile display wasn’t good:

While this did make the image larger, it is a solution to a different problem. I would like to simply make the product image taller and more prominent.

Here is our website with an example product: https://www.raoofmdderm.com/products/retinol-10x-serum-1oz?_pos=1&_sid=4b0dc5ae6&_ss=r

Here’s a reference website for what I’m trying to achieve: https://www.drmtlgy.com/collections/anti-aging/products/retinol-complex-5?gclid=CjwKCAjw9aiIBhA1EiwAJ_GTSqQIgH35NizFV9vyzeUuQXUdzFhRtrmprpTFLGLxgHUNcifUnLQh8BoCOeIQAvD_BwE

Thanks in advance for the help!

@jb92390

yes please check product page customization option its allow

Hi Kumar,

Not sure how to check that, but don’t believe it is.

Thanks!

hello @jb92390

in your theme go to theme customize and then select product page and you see right side media option see https://nimb.ws/80364D select large save it and then check your product image size

@jb92390

you have go to customization >> open Any product>> after check left side product page setion

Hi guys,

Thanks for responding so quickly. I do not have the product page option in my Customize section. Here are 2 screen shots of what I am looking at:

Here is a link to the reference site:

https://www.drmtlgy.com/products/retinol-complex-5

@jb92390

oh sorry can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (min-width: 769px) {
#shopify-section-product-template .large--four-tenths, .large--two-fifths {
    width: 60%;
}
#shopify-section-product-template .large--six-tenths, .large--three-fifths {
    width: 40%;
}
}

Hi Ketan,

Unfortunately, that did not work. I placed the code and nothing changed…

I also noticed the code you provided it for mobile only. This issue is primarily a desktop one.

@jb92390

i have checked its work