Limit product title to 2 lines in Supply theme

Store Design
1

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!

2

@GTBond

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

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

Please share your site URL,
I will check out the issue and provide you a solution here.

3

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;
}
4

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

5

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.

6 
.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;}
7

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/1111120#M283344

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

8

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

Minhletran_0-1622278797057.png
Minhletran_0-1622278797057.png1730Ă—1111 330 KB

Minhletran_1-1622278814713.png
Minhletran_1-1622278814713.png1519Ă—923 147 KB

9

@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;
}
10

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

11

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?

12

Hi. Can you also shiw the exact file name where I need to put this code please?