Solved

How can I adjust collection grid box heights on my eCommerce site?

mixnight
Tourist
5 0 0

Hello, I can't find a solution for this problem with the collection grid boxes height and I'm aware that the problem with the height is related to the images size, but I have hundreds of images to resize and I'm looking for a changing the code solution.

1: the product names are too long, so in the collection grid boxes it was showing only 15 characters for the name, I changed the code and now the product names are taking two lines into the collection grid boxes, this way the collection grid boxes have different heights but not too bad.

2: the some of the pictures at the collection grid boxes and into the product itself page were cropped, changed the code and now the pictures in both collection grid boxes and product page looks not cropped any more.

3: After changing the code for issue #2 (cropped pictures), almost all of the collection grid boxes are showing different heights.

Already contacted tech support for issue #3 and they sent instructions about choosing small, medium and large image size from the "customize", it didn't work.

They also said that using a resizing app could help, I installed an app and it did the process of resizing but the website keep showing different collection grid boxes height.

Tech support said that adding.thumbnail { height: 500px; } at the end of the styles.scss.liquid. It didn't work.

 

Other users on the Shopify forum having the same problem are pasting different pieces of the code to the theme.scss.css, but I don't have the theme.scss.css, what I have is styles.scss.

 

What I need is to have the same height of the boxes regardless of the height of the pictures, so editing and resizing the pictures is not an option for me. 

 

Please guide me on a solutions modifying the code.

 

Thank you.

 

https://407flightstore.com/collections/air-jordans

 

 

Screen Shot 2021-07-16 at 10.09.17 PM.png

 

 

Accepted Solutions (3)

Ajay-app-dev
Shopify Partner
178 16 14

This is an accepted solution.

Hi @mixnight 

Perfect solution by modifying CSS rules. You can add this code to your theme.css file. It works fine. If does not work, let me know. 🙂

.product_listing__main .product_img {
position: relative;
height: 260px;
}
.product_listing__main .product_info {
padding: 15px 0;
height: 70px;
}


.product_listing__main .product_name {
font-size: 10px;
letter-spacing: .3em;
text-align: center;
text-transform: uppercase;
} 

solution.png

Try Essentialwolf Upsell & Cross Sell (★★★★★ 5+ star) App

- Was your question answered? Mark it as an Accepted Solution
- Learn more about us at www.essentialwolf.com

View solution in original post

Ajay-app-dev
Shopify Partner
178 16 14

This is an accepted solution.

@mixnight

Good to know this. Please mark the Answer correct/Accepted for future reference. 

Try Essentialwolf Upsell & Cross Sell (★★★★★ 5+ star) App

- Was your question answered? Mark it as an Accepted Solution
- Learn more about us at www.essentialwolf.com

View solution in original post

Ajay-app-dev
Shopify Partner
178 16 14

This is an accepted solution.

No. As per my understanding, you will have to create the collection again and assign the product manually. 

Try Essentialwolf Upsell & Cross Sell (★★★★★ 5+ star) App

- Was your question answered? Mark it as an Accepted Solution
- Learn more about us at www.essentialwolf.com

View solution in original post

Replies 16 (16)

Ajay-app-dev
Shopify Partner
178 16 14

This is an accepted solution.

Hi @mixnight 

Perfect solution by modifying CSS rules. You can add this code to your theme.css file. It works fine. If does not work, let me know. 🙂

.product_listing__main .product_img {
position: relative;
height: 260px;
}
.product_listing__main .product_info {
padding: 15px 0;
height: 70px;
}


.product_listing__main .product_name {
font-size: 10px;
letter-spacing: .3em;
text-align: center;
text-transform: uppercase;
} 

solution.png

Try Essentialwolf Upsell & Cross Sell (★★★★★ 5+ star) App

- Was your question answered? Mark it as an Accepted Solution
- Learn more about us at www.essentialwolf.com
mixnight
Tourist
5 0 0

Yes, this piece of the code works, thank you so much.

Ajay-app-dev
Shopify Partner
178 16 14

This is an accepted solution.

@mixnight

Good to know this. Please mark the Answer correct/Accepted for future reference. 

Try Essentialwolf Upsell & Cross Sell (★★★★★ 5+ star) App

- Was your question answered? Mark it as an Accepted Solution
- Learn more about us at www.essentialwolf.com
mixnight
Tourist
5 0 0

One more thing before I accept the solution to the original question:

 

Is there a way to change the current collections from auto to manual without having to delete it and create it again, then assign products manually?

Ajay-app-dev
Shopify Partner
178 16 14

This is an accepted solution.

No. As per my understanding, you will have to create the collection again and assign the product manually. 

Try Essentialwolf Upsell & Cross Sell (★★★★★ 5+ star) App

- Was your question answered? Mark it as an Accepted Solution
- Learn more about us at www.essentialwolf.com
mixnight
Tourist
5 0 0

Please help me with a new issue, today the website is showing on the collection grid boxes the boxes with no image is not showing the button black bar.

How can I fix this using a code?

 

Thank you.

 

Screen Shot 2021-07-18 at 5.04.15 PM.png

Ajay-app-dev
Shopify Partner
178 16 14

It's  looking perfect from my side. Please clear the cache or open store in private window.

Screenshot_20210719-092053_Chrome.jpg

Try Essentialwolf Upsell & Cross Sell (★★★★★ 5+ star) App

- Was your question answered? Mark it as an Accepted Solution
- Learn more about us at www.essentialwolf.com
mixnight
Tourist
5 0 0

Thank you for answering, my browser (on Mac and PC) is still not  showing the black bar at the bottom of the collection grid boxes when a product doesn't have a product image, it looks like  the "no image" picture is taller than de grid, maybe?

 

Also, I answered to your message.

 

Thank you.

msfurnishings
Tourist
4 0 1

I am having the same issue but with the sub categories under the categories section.  The writing is also being cut out. 

msfurnishings_0-1633598215148.png

 

Ajay-app-dev
Shopify Partner
178 16 14

@msfurnishings  , kindly share the url 

Try Essentialwolf Upsell & Cross Sell (★★★★★ 5+ star) App

- Was your question answered? Mark it as an Accepted Solution
- Learn more about us at www.essentialwolf.com
Ajay-app-dev
Shopify Partner
178 16 14

@msfurnishings 

Thanks,i checked the whole page design is distorted. We need to work on the whole page including the design issue. Check your message. 

Try Essentialwolf Upsell & Cross Sell (★★★★★ 5+ star) App

- Was your question answered? Mark it as an Accepted Solution
- Learn more about us at www.essentialwolf.com
gayled
Tourist
12 0 2

@Ajay-app-dev we have a similar problem with our store, using turbo theme, I cant find a theme.css file are you able to give me any more information on where to add the code? 

jmmultiservices
Excursionist
18 0 4

Hello Ajay! Hope you are doing well. I am trying to align my collections to all be the same height, but I keep coming across a block. I have tried your solution above, but it didn't work for my theme. I am using the Debut theme, could you take a look and see if you could help, please?

 

J & M Multi Services Boutique™ | Fashion Online for Men and Women (jmmultiservicesboutique.com)

 

Thank  you,

J&M Multi

BIGBEAUTYL
Shopify Partner
1 0 0

微信图片_20240228130235.png

 

 

Hello, I encountered the same problem. Depending on the length of the title or the underlined price, the height would be inconsistent. Looking forward to your reply

Popularitems
Tourist
17 0 2

hello i messed up my code adding and taking this away please help