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

Let me know if this  helps you..


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: | Skype : oscprofessionals-87
Shopify Partner
24919 2496 9029


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