How can I adjust product title length for uniform 'Add to Cart' positioning?

Shopify Discussion

Topic summary

Goal: Make product titles a consistent height so “Add to Cart” buttons align across product cards.

What was tried:

  • CSS added to clamp titles to two lines using -webkit-line-clamp with overflow hidden.
  • Additional CSS enforcing single-line truncation (white-space: nowrap; text-overflow: ellipsis) was also present.
  • Multiple variations tested; screenshots provided; site URL shared for context.

Proposed fix:

  • New CSS targeting .product-grid–title a with min-height and -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden.

Latest outcome:

  • Mobile displays as intended.
  • Desktop still shows only one line of title instead of two.
  • The template also applies {{ product.title | truncate: 30 }}, which shortens titles to 30 characters and may interact with line clamping.

Key technical notes:

  • -webkit-line-clamp limits text to a set number of lines in a flex-like WebKit box.
  • white-space: nowrap forces a single line, which conflicts with multi-line clamping.
  • The Liquid filter truncate limits character count regardless of CSS.

Status and open items:

  • Not fully resolved. Clarification needed on whether to remove the single-line CSS and/or adjust/remove the truncate filter to allow two lines on desktop.
Summarized with AI on January 4. AI used: gpt-5.
1

Hi all,

I would like to make all the product titles have the same length in product title so the ADD TO CART can stay at the same level.

davidwu1604_0-1708675976863.png
davidwu1604_0-1708675976863.png437Ă—586 39.1 KB

davidwu1604_1-1708676170301.png
davidwu1604_1-1708676170301.png1126Ă—403 101 KB

I have tried to put this at the theme.css

#main-collection-product-grid .product-item__title {
     display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
     overflow: hidden;
}
.product-item__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

I also tried

davidwu1604_2-1708676539963.png
davidwu1604_2-1708676539963.png1227Ă—817 43.7 KB

and

davidwu1604_3-1708676570599.png
davidwu1604_3-1708676570599.png922Ă—521 25.2 KB

but it still doesn’t work.

www.nominalhk.com here is the url

Does anyone know which part did I make a mistake on?

Thanks a lot!

2

@davidwu1604 Please use below CSS code in your theme.css

.product-grid--title a {
    min-height: 44px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

Please let me know when work and like and mark as solve!

3

hi do I still need to keep this as well?

{
.product-item__title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}

now it looks like this

davidwu1604_0-1708679915050.png
davidwu1604_0-1708679915050.png415Ă—331 12.5 KB

on mobile is excellent, but on desktop only sees one line instead of two.

i have keep this following:


 

  

    

      {% if show_vendor %}
        
{{ product.vendor }}

      {% endif %}
      

        {{product.title | truncate: 30}}

davidwu1604_1-1708680186340.png
davidwu1604_1-1708680186340.png893Ă—237 13.6 KB

thanks!

4

@davidwu1604 If i helped you please like and mark as solve! Thanks

1 Like