How can I truncate product titles on the Kingdom theme?

Store Design
1

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

Selvence_0-1634860421179.png
Selvence_0-1634860421179.png1125×2436 320 KB

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

selvence.com

1 Like
2

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!

3

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

4

@Selvence

sorry for that issue can you please update this

Find this 
{{ product.title }}
to
upate this 
{{ product.title | truncate: 10 }}