FROM CACHE - en_header

Truncate Product Title - Kingdom Theme

Selvence
Excursionist
61 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)
Muhammad_Ali_S
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
oscprofessional
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 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 | Email: pallavi@oscprofessionals.com | 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
KetanKumar
Shopify Partner
33475 3354 11067

@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