How to Limit Product Title to 3-4 Lines and Decrease Font Size at Your Cart Page

[alibilal]

Hi Shopify Community,

I need some help with customizing the display of product titles in my Shopify store. Specifically, I would like to:

1. Limit the product title for jackets to 3-4 lines maximum on the product page (currently, the title is getting too long and wrapping into multiple lines).
2. Decrease the font size of the title for jackets to make it more balanced with the rest of the product description.

Could anyone guide me on how to achieve this? I’m comfortable editing the theme code, but I would appreciate any pointers on where to apply these changes.

Thanks in advance for your help!

[LizHoang]

Hi @alibilal

You can follow the instruction here :

1. Go to Shopify > Online store > theme > customize

2. Click to Settings > Custom CSS > Paste this code to the section and save.

Note : The first line of code is for the text font size, and the you can adjust it as requested. “-webkit-line-clamp: 3;” is the code to set to show text in 3 lines, which can be changed to 4,5, or other number of lines as desired.

.cart-item a.cart-item__name {
    font-size: 50px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

Here is the result: