Hi, I’m Hitesh
i wanted to show the product title on product card in one line and at end it should show (…) but its not working
please help me.
store:- https://www.aesthetixme.shop/
theme:-craft
should be like these
Thank you
Topic summary
Goal: Make product card titles display on a single line with an ellipsis (…) at the end in the Craft theme.
Context: The store owner provided their site and screenshots showing the current multi-line title and the desired one-line truncated look. Images illustrate expected vs. actual behavior.
Suggestions offered:
- CSS approach: Apply a multi-line clamp to the title element using display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; to enforce a single-line truncation with ellipsis.
- Liquid approach: Server-side truncation using {{ product.title | truncatewords: 3 }} to limit titles to a set number of words.
Latest update: The CSS snippet did not work for the requester. They observed that an ellipsis appears only after about 50 characters, implying some existing limit is already affecting the title length.
Status: Unresolved. No confirmation that the Liquid truncatewords solution achieves the desired single-line ellipsis on the product cards. Further verification of the specific title selector and theme markup may be needed.
Hello,
use these.
h3.cart-notification-product__name.h4 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
best regards,
didn’t worked.
one thing i noticed that after 50 letters of product title it’s showing the ellipsis property.
hope it helps
Hello @hitesh01 ,
In your liquid code use this filter in your title.
{{ product.title | truncatewords: 3 }}
Hope this helps.
Thanks,
Ritu