Smaller product image on brooklyn theme

Solved
CompleteFP
Tourist
3 0 1

Couldnt find any answers that seem to still work. Just want the product images to be a bit smaller on the product pages for brooklyn theme

0 Likes
Pallavi
Shopify Expert
2170 353 462

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
dmwwebartisan
Shopify Partner
7278 1717 2286

@CompleteFP 

Please share store URL!

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
CompleteFP
Tourist
3 0 1

@dmwwebartisan @Pallavi 

https://complete-football.com/products/elite-speed-agility

Password: cfp123

It is the main, large product image which i would like to be smaller

0 Likes
Pallavi
Shopify Expert
2170 353 462

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

@media screen and (min-width: 767px){
.product-single__media-flex .product-single__media-wrapper {
max-height: 400px !important;
height: 100%;
overflow: hidden;
}

.product-single__media-flex .product-single__media-wrapper .product-single__media {padding: 0 !important;}

.product-single__media-flex .product-single__media-wrapper .product-single__media img {
position: unset !important;
max-width: 400px;
object-fit: contain;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
CompleteFP
Tourist
3 0 1

I have applied that - but now the image is cut off, not resized

Pallavi
Shopify Expert
2170 353 462

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

@media only screen and (min-width: 767px){
    .product-single__media-flex .product-single__media-wrapper {
        max-height: 100% !important;
    }
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
whiteandblu
Excursionist
17 0 3

Hi! I am facing a similar problem where I cannot make the product photos smaller? I am also trying to change the scroll between product photos from vertical to horizontal..

This is an example in my store: https://www.whiteandblujewellery.com/collections/gold-finished-necklaces/products/santorini-necklace

This is an example of a store that I would like to emulate in terms of photo size: https://harminstyle.com/collections/classic/products/utility-pouch

Are you able to help? I am happy to give you access if that would make it easier for you to solve the problem of size and also scrolling horizontally!

Thank you in advance,

Cristina from White & Blu

0 Likes