How to put a character limit on the product title

8ight
Visitor
1 0 0

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 

 

 

Replies 4 (4)

MarinaPetrovic
Shopify Partner
552 124 177

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:
Screenshot 2023-02-21 at 19.13.33.png

 

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:
Screenshot 2023-02-21 at 19.15.40.png

 

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

Hope this helps! 🙂

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Shay
Shopify Staff
2633 427 550

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.

 

 

Shay | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

GemPages
Shopify Partner
5587 1260 1190

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.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
A-website-maker
Visitor
3 0 0

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