Truncate Product Title - Kingdom Theme

Selvence
Excursionist
53 0 5

Hello, I need to truncate my product titles on the Kingdom theme. 

 

Selvence_0-1634860421179.png

 

What would be the css code to shorten these titles and how do I install it into my code edit? Thanks!

 

selvence.com 

Replies 3 (3)
Zeian_Shahzad
Shopify Partner
437 83 135

Add this at the bottom of theme.css file.

You can change the number of lines by changing 3 to as per your need, -webkit-line-clamp: 3;

 

#main-collection-product-grid .product-item__title {
     display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
     overflow: hidden;
}

 

Do let me know if it works for you.

Good Luck!

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
oscprofessional
Shopify Partner
9417 1579 1967

hi @Selvence 

One option to do this by adding the below css in theme.css file

.product-item__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

 

or else you can perform changes in your product file..
you can follow this https://shopify.github.io/liquid/filters/truncate/

Let me know if this  helps you..

Thanks

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
KetanKumar
Shopify Partner
26558 2654 9352

@Selvence 

sorry for that issue can you please update this

Find this 
{{ product.title }}
to
upate this 
{{ product.title | truncate: 10 }}
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