Limit product title to 2 lines in Supply theme

[GTBond]

Hey guys, how can I shorten my product titles to 2 lines so that my store can have some uniformity? Like if the product title is longer than 2 lines it just shows ellipses at the end

Thank you!

[KetanKumar]

@GTBond 

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.

[Michael_Pink]

You can try follow this path:
Themes => edit code => asset => theme.scss.liquid
and add this code to bottom of the file theme.scss.liquid

.template-product h1.h2 {
display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

[GTBond]

thanks for getting back to me Michael, but unfortunately it didn't work.

my site url is https://gadzone.co

kindly let me know if you have another solution, thanks.

[Michael_Pink · Accepted solution]

.template-index [data-section-type="collection-row-section"] .product-grid-item p {display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;}

[GTBond]

You're the best Michael thank you so much it worked!

I also have another issue open don't know how to link it so I'll just copy-paste the url
https://community.shopify.com/c/Shopify-Design/Add-to-Cart-button-on-products-in-Supply-theme/m-p/11...

Thanks again Micheal! Hope you can help me with the above issue too 🙂

[Minhletran]

Hi

My website is layeredsvg.net

I tried your solution and it works. Thank you so much, but one problem is that it only works on the collection page and does not work on the search result page. Please help me

[Michael_Pink]

@Minhletran 
you can try this code

.search-result .product-grid-item p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[Minhletran]

Thank you so much!

I am really grateful, as I am not only building my site but also learning code. This is so great, the feeling of learning something new is so great, I haven't experienced this after high school. you are inspirational

[MelinaPrarchar]

Hello. I have the same problem in the dawn theme. The file theme.scss.liquid doesn't exist in my theme. Can you help me out?

[GTBond]

my site url is https://gadzone.co

I would also like to add an add to cart button under the price of each product on the home page. The Supply theme doesn't have that set on default