How can I shorten titles on my collection page?

Store Design

Topic summary

A user seeks to truncate product titles on their collection page to display only the first two lines, with remaining text shown as ellipsis (“…”).

Proposed Solutions:

  • One suggestion directs the user to edit collection titles directly from the Shopify backend, though this doesn’t address automatic truncation.
  • A PageFly representative provides a CSS code snippet to add to the theme.css file:
.product-item__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 35px;
  width: 260px;
}

Current Status:
The discussion remains open. Another user requests clarification on where to paste the CSS code and asks if tutorial videos are available, indicating the solution may need further explanation for implementation.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

hi i want to short title in my collection page. i want there the first 2 line and remain title show li as…

here is the page link https://armazem-martins.myshopify.com/collections/loja-de-ferragens

i want to like https://emiliostore.com/collections/casa

2

@tariqul12012 - i0f you want to change the title, then please go to collection from backend and check

3

there is no option in customization of shorten collection.

4

@tariqul12012 - not customization, but collection tab in products

5

Hi @tariqul12012 .

This is PageFly - Advanced Page Builder.

You can go to Online store => themes => actions => edit code and add this code on file theme.css

.product-item__title{
width: 260px;
overflow: hidden;
text-overflow: ellipsis;
line-height: 35px;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
}

Hope this answer helps.

Best Regards,

PageFly

6

Would you pls explain where should I copy this code? is there any tutorial video? thanks