Shopify themes, liquid, logos, and UX
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!
selvence.com
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!
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
sorry for that issue can you please update this
Find this
{{ product.title }}
to
upate this
{{ product.title | truncate: 10 }}
User | RANK |
---|---|
133 | |
98 | |
87 | |
63 | |
51 |
Connect your PayPal account to allow your customers to checkout using the PayPal gateway a...
ByYour online store speed can enhance your store’s discoverability, boost conversion rates a...
ByShopping is at our fingertips with mobile devices. Is your theme optimized to be user-frie...
By