How to reduce the image size in product page

Store Design
1

Website- https://unigemofficial.myshopify.com/collections/bracelet/products/rose-gold-white-pearl-bracelet

Password- uni

1 Like
2

@Unitech

oh sorry for that issue can you check your theme customization option on product page may allow this image size

3

Not getting any option in customization section. Please suggest the solution

1 Like
4

@Unitech

can you please confirm this look!

KetanKumar_0-1654689061702.png
KetanKumar_0-1654689061702.png1920Ă—1080 271 KB

5

Yes perfect

6

Please suggest the solution

1 Like
7

@Unitech

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/site.scss.liquid->paste below code at the bottom of the file.
.js-product-media .product-media__wrapper {
    padding-top: 100%;
    position: relative;
}
.js-product-media .product-media__wrapper .mfp-image {
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;
    right: 0;
    margin: 0px auto;
}
8

not working

1 Like
9

@Unitech

i can see code work

KetanKumar_0-1654758793895.png
KetanKumar_0-1654758793895.png1920Ă—1080 270 KB

10

Thanks for your feedback… But not working. Please check

Unitech_0-1654759060146.png
Unitech_0-1654759060146.png1366Ă—768 135 KB

11

@KetanKumar please suggest the solution

12

@KetanKumar please share the solution

13

@KetanKumar please suggest the solution

1 Like
14

@Unitech

can you try this code

.product-media__wrapper {
    max-width: 360px;
    margin: 0px auto;
}
15

See the gap in image and thumbnails… It is still not look like how you shared the screeshot

Unitech_0-1654854056625.png
Unitech_0-1654854056625.png1366Ă—768 181 KB

16

@KetanKumar can we reduce the red marked space and add blank space in green marked section. As mentioned in the below screenshot

Unitech_1-1654854299578.png
Unitech_1-1654854299578.png1376Ă—591 395 KB

1 Like
17

that’s content part if reduce that spacing to closed content but current look proper look much better