Limit product title to 2 lines in Supply theme

Solved
GTBond
Explorer
59 2 27

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
Shopify Partner
20524 2121 7737

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

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
Michael_Pink
Navigator
286 46 60

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;
}
My life is sharing.
I hope my solution can help you save at least 1$
Build Page faster with PageFly PageBuilder App.
shopify.expert.team@gmail.com
GTBond
Explorer
59 2 27

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

0 Likes
GTBond
Explorer
59 2 27

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.

0 Likes
Michael_Pink
Navigator
286 46 60

This is an 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;}
My life is sharing.
I hope my solution can help you save at least 1$
Build Page faster with PageFly PageBuilder App.
shopify.expert.team@gmail.com
GTBond
Explorer
59 2 27

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

0 Likes
Minhletran
New Member
4 0 0

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_1-1622278814713.png

 

0 Likes
Michael_Pink
Navigator
286 46 60

@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;
}
My life is sharing.
I hope my solution can help you save at least 1$
Build Page faster with PageFly PageBuilder App.
shopify.expert.team@gmail.com
0 Likes
Minhletran
New Member
4 0 0


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

0 Likes