How can I limit the length of the product name on the collection page?

[KKWAN]

Hi,

I am using Supply theme. Can anyone advise how I can limit the length of the product name so that the 'Add to cart' button can be align on the same level? 

Please help.

KK

[RichardNguyen]

Give me your page URL, so I can give you a custom code to fix.

[Jasoliya · Accepted solution]

Hi @KKWAN 

Open snippet->product-grid-item.liquid and fine {{ product.title }}

now change this code with below:

{{ product.title  | truncate: 30}}

Note: you can change 30 with any number that mean they show 30 character of title.

[KKWAN]

Thanks for your help.

[Everything1]

Hi Jasoliya

Please help us to solve the product title issue on the collection page here is a screenshot https://www.screencast.com/t/TfybUg5C82G

here is the website collection page https://ihighlands.myshopify.com/collections/african-blackwood-bagpipes

[Jasoliya]

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

@media only screen and (min-width: 767px) {
   .product-grid .product .name{    max-width: 265px;} 
}
@media only screen and (max-width: 767px) {
   .product-grid .product .name{    max-width: 165px;} 
}

[Everything1]

Thank you so much for your quick reply. But there is no theme.scss file under ASSETS

[Jasoliya]

Then you can add in any cs file you have.

[Everything1]

Yes, it's work. You are super

Many thanks.

[Everything1]

Hi Jasoliya

We are facing issue with mega menu

Sometime mega menu show like this 

and sometime show correct with space

here is url https://ihighlands.myshopify.com/

CAN YOU PLEASE HELP US TO SOLVE ISSUE?

Thank you