How can I wrap Product Title Text To Single Line

mukukaje
Tourist
5 0 2

Hi Support,

I am trying to wrap my product title text that have multiple lines into a single line for my store. This would help improve my store appearance. It would be nice to have the text wrapped to a 16 character cut off so the rest of the product title text in the product card can be hidden off and not overflowing in the next line. See image attached for the issue. I am using the Refresh theme.

 

The issue:

1.JPG

 

 

 

 

 

 

 

 

 

 

 

 

 

 

And here is an image of what I want the titles to look like with the rest of the titles trailing off but hidden away:

2.JPG

 

Replies 7 (7)

KetanKumar
Shopify Partner
36904 3641 11986

@mukukaje 

Thank you for reaching out and posting this question!
Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mukukaje
Tourist
5 0 2

Hi Ketan,

Thanks for the quick repky.

Site URL is: https://www.mangozambia.com/

KetanKumar
Shopify Partner
36904 3641 11986

@mukukaje 

can you please confirm 

KetanKumar_0-1717777084404.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mukukaje
Tourist
5 0 2

Yes thats the one. I comfirm.

KetanKumar
Shopify Partner
36904 3641 11986

@mukukaje yes please  add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/component-card.css ->paste below code at the bottom of the file.
I hope that helps you out! Best of luck 😊

.card--standard>.card__content .card__information {
    padding-left: 1.7rem;
    padding-right: 1.7rem;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mukukaje
Tourist
5 0 2

Hi @KetanKumar thanks for the solution, however i am not trying to add text padding to my product headings and titles in the product cards. I am trying to truncate the product card heading title text to a single line with a character limit of 16 characters or the width of the product card to prevent the product headings from overflowing into multiple lines if that makes sense.

 

KetanKumar
Shopify Partner
36904 3641 11986

@mukukaje  oh sorry for that can you try this code

{{ product.title | truncate: 16 }}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing