Change aspect ration in collections page

Solved
something4andie
Tourist
5 0 3

Hi,

I'm looking for a way to make all of the thumbnail images in a collections page square.

I have two stores - one uses DEBUT and one uses BROOKLYN themes.

Thanks in advance

 

Screen Shot 2021-10-15 at 1.09.03 pm.png

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
24911 2497 9036

This is an accepted solution.

@something4andie 

thanks for url 

yes please try this code

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

.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 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 5 (5)
KetanKumar
Shopify Partner
24911 2497 9036

@something4andie 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you 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
something4andie
Tourist
5 0 3

Thanks for that!

 

www.montrachet.myshopify.com (Password: Montrachet4006!) and also www.mica-express.myshopify.com

KetanKumar
Shopify Partner
24911 2497 9036

This is an accepted solution.

@something4andie 

thanks for url 

yes please try this code

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

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

something4andie
Tourist
5 0 3

Thank you so much! It works!

KetanKumar
Shopify Partner
24911 2497 9036

@something4andie 

its my please share to  help 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