How can i display partial title in colletion

Store Design
, ,

Topic summary

A user seeks to display truncated collection titles on their Shopify store, showing an example image where long product titles are cut off with ellipsis instead of wrapping to multiple lines.

Solutions Provided:

Multiple developers offered CSS-based solutions, primarily using:

  • overflow: hidden
  • text-overflow: ellipsis
  • -webkit-line-clamp: 1
  • -webkit-box-orient: vertical

These styles target the .card__heading class to limit titles to a single line.

Implementation Methods:

  1. Add CSS to theme settings (Online Store > Customize > Settings > Custom CSS)
  2. Edit theme.liquid file directly, inserting code above the </head> tag

Resolution:

The user confirmed success using PageFly-Noah’s solution, which involved adding custom CSS code to the theme. A follow-up note mentioned potential empty space issues if text width doesn’t match the image width, suggesting careful adjustment of width values in the CSS.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
7

Go to your online store → customize → settings → custom css
and paste this code there

.card__heading {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
1 Like