How to put a character limit on the product title

[8ight]

I have a problem with my product titles. When I set a title for my product, independing the size, in the main page it shows the whole title, wich makes my store look messy. What can I do with this? I use the Dawn theme 

[MarinaPetrovic]

Hi @8ight , go to edit code > assets > base.css and add this:

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

This will restrict your product title in product card to always be in two lines no matter how long it is, it will have ... at the end, here is an example:

And if you want to do this in your product page, add this:

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

example:

Another advice is to give your products shorter names and add some short description about them. 

Hope this helps! 🙂

[Shay]

Hi @8ight 

I would love to know a bit more about your naming structure for your products. A product title should be easily read by a customer, but also be descriptive so they know what they are buying. 

Could you provide some samples of the product titles on your store? I feel like we might be able to improve your naming structure so that we don't have to cut the product titles on the collection pages. If you are using product titles as a way to add additional keywords, I don't recommend that. Search engines use AI technology to assess product titles and will lower your search rankings if they feel product titles or descriptions are too spammy without making too much sense. You can read more about this here: Spam Policies for Google Web Search.

[GemPages]

Hello @8ight 

I would like to give you the recommendation to support you so kindly follow steps below:

1. Go to your Online store > Themes > Edit code
2. Open your card-product.liquid file

find code card_product.title  in the card-product.liquid file : https://prnt.sc/LSdKQZmEIUNp

and replace the code to: https://prnt.sc/PNbiOZIxqJ19

I hope the above is useful to you.
Best regards,
GemPages Support Team.

[A-website-maker]

I tried this on my Refresh theme, but didn't work, do you have solution for that theme too?