Product Images are to big (symmetry theme)

Shopify Partner
38 0 0

Hello Shopify Community! 
Is there an easy way to fix the images being tooScreenshot_29.png big? 

0 Likes
Shopify Expert
96 17 12

@PrinceJohny - Can you provide a link to the page you are referencing (ie product page or collection page) and if you are looking at mobile or desktop?  Thanks!

0 Likes
Shopify Partner
38 0 0

@__cascadia 

https://poochesupplies.com/

StanyWolf
And on desktop

Thanks!

0 Likes
Shopify Expert
96 17 12

@PrinceJohny - If you are familiar with HTML this should be a quick fix.  if not, I would suggest reaching out to a Shopify Expert

 

1) Locate the following classes in your product template (or snippet contained within):

 

grid__item product-single__photos medium-up--one-half
grid__item medium-up--one-half

Update them to the following:

 

grid__item product-single__photos medium-up--one-third
grid__item medium-up--two-thirds

That will reduce the width of the image (making overall size smaller) and add additional width to the product form to compensate (ie. keep things centered).

 

If this answers your Q, feel free to mark as solved ;)

0 Likes
Shopify Partner
38 0 0

I cant find the code in the product template 

Screenshot_31.png

0 Likes
Navigator
358 39 40

hello @PrinceJohny 

 

it is possible to reduce images sizes by css, 

 

add following css at very end of your theme css file and check it

 

.product-single__photo-wrapper .product-featured-img{ max-width: 300px !important;  max-height: 300px !important; }

you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes
Shopify Partner
38 0 0

Hello @suyash1 

Thanks for your post.

Is this correct? I didn't see any changes reflect Screenshot_36.png

0 Likes
Navigator
358 39 40

it is correctly added, let me check why is it not reflecting, meanwhile you clear all the cache from browser

you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes
Shopify Partner
38 0 0
Awesome, Thanks a ton and will do!
0 Likes
Navigator
358 39 40

remove previous code I gave and add only this part

 

.product-featured-img { max-width: 300px !important; max-height: 300px !important}
 
 
clear all the cache and test it
you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes