Centered and Cropped Thumbnails

Solved
Romainp
Tourist
5 0 4

Hi,

I'm using the debut theme but i have a problem. How can i edit the thumbnails of the grid to Center and Crop the image of the products to align all the images in the grid. I don't find the line in the css. If you have some code, it will be very usefull!

Thx per advance

KetanKumar
Shopify Partner
14323 1665 5155

@Romainp 

Sorry for facing this issue, it's my pleasure to help us.

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Romainp
Tourist
5 0 4

Hi! @KetanKumar 

here my eshop https://romain-peli-photographe.myshopify.com/ and the password is eldeux.

Thx for your help!

KetanKumar
Shopify Partner
14323 1665 5155

This is an accepted solution.

@Romainp 

Thanks for the store URL.

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

.grid-view-item__image-wrapper div {
    padding-top: 100% !important;
}
.grid-view-item__image-wrapper .grid-view-item__image {
height: 100%;
    object-fit: cover;
}

 

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Romainp
Tourist
5 0 4

Wow, thx a lot. It works good for my photos. I have juste an issue with portrait pictures. I screen the issue.

Romainp_0-1611669553029.png

 

Do you have a tips for that?

 

KetanKumar
Shopify Partner
14323 1665 5155

@Romainp 

Yes, please share this page url so i will check and provide 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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Romainp
Tourist
5 0 4

@KetanKumar 

Here the page with all product https://romain-peli-photographe.myshopify.com/collections/all the password is the same: eldeux

0 Likes
KetanKumar
Shopify Partner
14323 1665 5155

@Romainp 

sorry i can't see above code can you please add and let me 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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Romainp
Tourist
5 0 4

Oh sorry, i did't upload the code. It's ok now.

KetanKumar
Shopify Partner
14323 1665 5155

This is an accepted solution.

@Romainp 

no, the rush can you please add this code

.grid-view-item__image-wrapper {
max-width: 100% !important;
}
.grid-view-item__image-wrapper .grid-view-item__image {
max-width: 100% !important;
    max-height: 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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing