Solved

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

chicandvintage
Excursionist
45 1 19

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

Capture (2).PNG

It gets smaller if I want a line of 4. 

Capture (2).PNG

 

This an example of how I want my images

Capture (3).PNG

 

 

 

Accepted Solutions (2)
KetanKumar
Shopify Partner
36839 3635 11972

This is an 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_0-1610224595213.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@chicandvintage 

Yes, please add this code

#shopify-section-collection .grid-view-item__image-wrapper div {
    padding-top: 100% !important;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 26 (26)

KetanKumar
Shopify Partner
36839 3635 11972

@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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
chicandvintage
Excursionist
45 1 19

Thank you so much for your reply. 

https://www.chicandvintage.store/

password: treama

 

 

KetanKumar
Shopify Partner
36839 3635 11972

@chicandvintage 

Thanks for it

do you like this?

KetanKumar_0-1610217830623.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
chicandvintage
Excursionist
45 1 19

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
Shopify Partner
36839 3635 11972

This is an 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_0-1610224595213.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
chicandvintage
Excursionist
45 1 19

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
Shopify Partner
36839 3635 11972

@chicandvintage 

Thanks, update.

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
chicandvintage
Excursionist
45 1 19

Collections on my main page are large 

chicandvintage_1-1610252153928.png

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
Shopify Partner
36839 3635 11972

@chicandvintage 

can you please share a particular page URL?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
chicandvintage
Excursionist
45 1 19

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

chicandvintage_0-1610373892545.png

https://djerfavenue.com/

 

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

for these 2 images 

Capture (2).PNG

 

 The full size on the url.

I appreciate your help so much, thank you 

KetanKumar
Shopify Partner
36839 3635 11972

@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?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
chicandvintage
Excursionist
45 1 19

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

KetanKumar
Shopify Partner
36839 3635 11972

@chicandvintage 

do you have like this?

KetanKumar_0-1610393410802.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
chicandvintage
Excursionist
45 1 19

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
Shopify Partner
36839 3635 11972

@chicandvintage 

that portrait size as your images

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
chicandvintage
Excursionist
45 1 19

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.

Capture (2).PNG

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

chicandvintage
Excursionist
45 1 19

Capture (3).PNG

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
Shopify Partner
36839 3635 11972

@chicandvintage 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
chicandvintage
Excursionist
45 1 19

 Password is treama

https://www.chicandvintage.store/

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@chicandvintage 

Yes, please add this code

#shopify-section-collection .grid-view-item__image-wrapper div {
    padding-top: 100% !important;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
chicandvintage
Excursionist
45 1 19

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

KetanKumar
Shopify Partner
36839 3635 11972

@chicandvintage 

Thanks for your compliment and support.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
anthonybarry
Visitor
2 0 2

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:

anthonybarry_0-1611997694395.png
I'd like it to look like this:

anthonybarry_1-1611997886002.png


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
Shopify Partner
36839 3635 11972

@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

KetanKumar_0-1612003199088.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
anthonybarry
Visitor
2 0 2

Thanks for your help , 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
Shopify Partner
36839 3635 11972

@anthonybarry 

great thanks for it i will review and let you know 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing