Fix the Textbox Size for All Product Titles Regardless of Word Counts

[aimeenewsun]

Hello, can anyone help me with locking the size of the product title textbox? Due to the varying length of product title, it is causing my “add to bag” button positions to be very inconsistent.
I’d like the textbox to be fixed to 5 rows.

Appreciate all your inputs

[Moeed]

Hey @aimeenewsun

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Dan-From-Ryviu]

You can add this code to Custom CSS in Theme settings

.product-card__content a.contents p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[tim_tairli]

It’s possible to make it so that cart buttons are always aligned no matter what length product titles are, but would need to see your site or at least know your theme to suggest the code.

However, it looks like Horizon and it means you that can do it with settings alone.
Simply add a “Group” above your “Buy buttons” and move your “Title” and “Price” into this group.
Then set Group Layout-> Position: bottom and Size-> Height: Fill. All done:

Before:

After:

[aimeenewsun]

https://newsun.com.au/

Thank you

[ecom-experts]

I see that the product title is already lock for 4 lines. What is the specific more help you are looking for?

[aimeenewsun]

Hello, thank you this is very helpful!

My theme is Radiant and version is Horizon 3.2.0

However I do have the SKU block, and whenever Add to Cart button is aligned, the SKU will lose alignment- please refer back to the image on my original question, the SKU was looking good.

I believe the root problem is the product title length as you can see the textbox sizes are inconsistent.
Hope this explains better

[aimeenewsun]

Hi, can you please upload a screenshot if possible?
Thank you!

[Maximus3]

It would look weird no matter what you do. The product with one line title will have a whole bunch of extra space when compared to the one with a 5 line title.

Better to have title around length the same if you can. 2-3 lines is plenty. You really don’t need to have code to add a bunch of space where it’s not needed or wanted. Another thing you could do is arrange the products in a way they are even. 3 line title products in one row, 5 line products in the next.

[aimeenewsun]

I am using radiant, version is Horizon 3.2.1

[tim_tairli]

In addition, instead of the “Product title” block in “Collection grid” you can add a “Custom liquid” block and use code like this:

{% assign product_title =  closest.product.title | truncate: 50 | prepend: '<p>' | append: '</p>' %}

  <a
    class="contents user-select-text"
    ref="productTitleLink"
    href="{{ closest.product.selected_or_first_available_variant.url }}"
  >
    {% render 'text', fallback_text: product_title, block: block %}
  </a>

The important part is in | truncate: 100 – this will limit the length of the title to 100 characters.

Not saying this is the best solution, just trying to tell what’s possible without theme code edits.