How to increase image grid/ thumbnail size for products? Debut theme

[chicandvintage]

Hello,

  I was wondering if anyone can please help me change the size on grid view. Images go smaller if I choose  4 products in a line. I'm currently still fixing my website. These is how my products appear. Even If I make picture ratios bigger it remains the same size. Is there a code I can use to fix this?

Line of 3

It gets smaller if I want a line of 4. 

This an example of how I want my images

[KetanKumar · Accepted solution]

@chicandvintage 

Thanks for confirm 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

.grid-view-item__image-wrapper {max-width: 100% !important;}
.grid-view-item__image-wrapper div {padding-top: 150% !important;}
.grid-view-item__image-wrapper .grid-view-item__image {
max-width: 100% !important;
   max-width: 100% !important;
    max-height: 100% !important;
    height: 100%;
}

After View

[KetanKumar]

@chicandvintage 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

[chicandvintage]

Thank you so much for your reply. 

https://www.chicandvintage.store/

password: treama

[KetanKumar]

@chicandvintage 

Thanks for it

do you like this?

[chicandvintage]

Perfect as long, when the customer clicks the image they can see the whole picture. How can I do this? I appreciate you looking into this. 

[KetanKumar · Accepted solution]

@chicandvintage 

Thanks for confirm 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

.grid-view-item__image-wrapper {max-width: 100% !important;}
.grid-view-item__image-wrapper div {padding-top: 150% !important;}
.grid-view-item__image-wrapper .grid-view-item__image {
max-width: 100% !important;
   max-width: 100% !important;
    max-height: 100% !important;
    height: 100%;
}

After View

[chicandvintage]

Update the code worked! Thank you very much! How do I get the 2 collection images the front page to be smaller only? I'm beyond thankful

[KetanKumar]

@chicandvintage 

Thanks, update.

yes, please give me screenshot so i will give proper code 

[chicandvintage]

Collections on my main page are large 

I'd like the length to be a little shorten and a little wider. Not too small, more on the large/medium side. Thank you

[KetanKumar]

@chicandvintage 

can you please share a particular page URL?

[chicandvintage]

I'd like collection images to have a width like this please

https://djerfavenue.com/

with a length size on the url: https://www.shopzua.com/

for these 2 images 

 The full size on the url.

I appreciate your help so much, thank you 

[KetanKumar]

@chicandvintage 

Thanks for more details and clear

i can't see any collection section at the home page now i can see only 3 products at home also product image is in portrait mode if you have a square so the image was center cropped is this fine for you?

[chicandvintage]

it's fine, it's for the spring collection on my homepage. 

[KetanKumar]

@chicandvintage 

do you have like this?

[chicandvintage]

Yes, but larger. I want my other images to stay the same size that's displaying now.

For example, what's 

https://www.chicandvintage.store/collections/all

[KetanKumar]

@chicandvintage 

that portrait size as your images

[chicandvintage]

yes, I'm okay with the center crop for spring collection as long as it doesn't affect the other image sizes on the other pages.

Here is another example for spring collection on homepage. How may I adjust this? 

[chicandvintage]

my homepage https://www.chicandvintage.store/

I want the pictures under the Spring collection on the "Home page" to be shorter but without any distortion or affecting the images on the other pages. 

[KetanKumar]

@chicandvintage 

YEs, sure but now your store is password protect can you please share us.

[chicandvintage]

 Password is treama

https://www.chicandvintage.store/

[KetanKumar · Accepted solution]

@chicandvintage 

Yes, please add this code

#shopify-section-collection .grid-view-item__image-wrapper div {
    padding-top: 100% !important;
}

[chicandvintage]

It worked! Thank you for all your help and patience. Take care! 

[KetanKumar]

@chicandvintage 

Thanks for your compliment and support.

[anthonybarry]

Can this editing of the thumbnail dimensions also be done on the products pages?

Actually, I am looking to change the thumbnail dimensions on one product page only 
https://designerpetportraits.com.au/products/3-pet-portrait

Currently the page looks like this:

I'd like it to look like this:

If you can help with this I have another job I am happy to pay for.
And likely many more to come as I only just launched the website and am in the testing stage.

Any ideas?

[KetanKumar]

@anthonybarry 

Thanks for post 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

.product-single__thumbnails-item--medium {
    flex: 0 0 50%;
}

After this code view

[anthonybarry]

Thanks for your help KetanKumar, and apologies for the delay.

I'll email you regarding obtaining a quote for a Shopify job that will be hiding thumbnails on the product page, but still being able to have the images attached to the product variants when switching between them.

[KetanKumar]

@anthonybarry 

great thanks for it i will review and let you know 

[Tapanpatel]

hey ketan i am facing a similar problem and i tried to edit code but there is no theme.css in my assets folder can you please help

and i also needed help with displaying the product titles and prices too i searched everything couldnt find an option to display them too

[KetanKumar]

@Tapanpatel oh sorry for that issue can you please share your store url so i will check and let you know proper solution 

[Tapanpatel]

hey ketan i was messing around in the theme edit section and found a file called base.css and managed to locate the product container value and changed it from 600px to 100px and that seems to have fixed my problem my other problem is name and prices not displaying on the product page......this is my store url https://www.cursedclothing.in/collections/all