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
432 81 128

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
9161 1561 1925

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

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
KetanKumar
Shopify Partner
24919 2496 9029

@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