Happening now | Shopify Community AMA: SEO Basics with 2H Media | Ask your questions now!

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

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

salmanwanix
Visitor
3 0 0

davidwu1604_0-1708679915050.png

 Like this. Not the complete title just first few words then the "......."

 

Link:- https://5d920b-85.myshopify.com/

 

 

Replies 5 (5)

JasmeetVT14313
Shopify Partner
292 63 77

Hi @salmanwanix 
Try adding the below properties to you title element

.your-title-element-class{
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

 Replace "your-title-element-class" with your title's class.

If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
salmanwanix
Visitor
3 0 0

Can you please tell me where exactly will I find the title element to make the above change.

JasmeetVT14313
Shopify Partner
292 63 77

Hi @salmanwanix 
Please share your store URL so that I can provide you exact code
If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
salmanwanix
Visitor
3 0 0
JasmeetVT14313
Shopify Partner
292 63 77

@salmanwanix 
Try adding the below code to end of "base.css" file

 

.collection h3.card__heading a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 36px;
}

 

This will reflect in all the product cards.
If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com