FROM CACHE - en_header

Truncate Product Title - Kingdom Theme

61 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
534 98 148

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!

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Hire me | Whatsapp +92 3486775142
- Dawn Theme Customization or Bug Fixing
Shopify Partner
12107 1881 2413

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 | Email: | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Shopify Partner
33475 3354 11067


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