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.
1

1000006778.png
1000006778.png1080×644 760 KB

1000006777.png
1000006777.png1080×875 230 KB

How can i display partial title in colletion like image 1?

Thanks

2

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide the website url. Thank you.

Best regards,

Noah | PageFly

1 Like
3

Hello,

Welcome to the Shopify Community.
I read your problem and it seems that I need to analyze your website to provide the solution here.
Would you please share your website URL and if your website is password protected then also provide the password.

4

Hello @anhtaivnpro
Can you share store URL?

5

Yes, my store: http://vartdigitals.com

6

Hi @anhtaivnpro you can add code here:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag

Hope my solution will help you resolve the issue.

Thank you.

2 Likes
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
8

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag

.card__content .card__information .card__heading .full-unstyled-link {
width:200px white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media screen and (max-width: 450px) {
.card__content .card__information .card__heading .full-unstyled-link {
width: 142px;
white-space: nowrap;
overflow: hidden;
overflow:hidden;
text-overflow: ellipsis;
}
}

1 Like
9

@anhtaivnpro @

Log in to your Shopify admin panel
Navigate to Online Store > Themes.
Select the theme you want to modify and click Actions > Edit code.

Find the title section: H3

You can use this code

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

I will hope this will helpful

1 Like
10

Thanks so much, it’s worked!

1 Like
11

1000006779.png
1000006779.png1079×1981 498 KB

Thanks!!! That’s great!

12

@anhtaivnpro
Please mark my solution correct if you found it helpful.
Thanks.

13

I tried this method from mr PageFly-Noah and it worked. Thanks all

14

hamzaadeel_0-1710764238421.png
hamzaadeel_0-1710764238421.png517×307 150 KB

You will have empty space ahead by going with that.
you should have the text as the width of image at least.

1 Like