Truncate Product Title - Kingdom Theme

53 0 5

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




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

Replies 3 (3)
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 Partner
9462 1584 1977

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

Let me know if this  helps you..


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: | Skype : oscprofessionals-87
Shopify Partner
26756 2683 9405


sorry for that issue can you please update this

Find this 
{{ product.title }}
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 regarding any help
Shopify Partner | Skype :
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing