Solved

Minimal theme: How to limit product title to 2 lines?

thevista888
Explorer
65 0 22

I tried to limit the characters by using truncate, (found the code here in forum) it works fine but I need to keep the title at same level, it works on desktop but doesn't work on mobile. 
So its better to limit the product title to 2 lines, not limiting the characters.

I tried the codes in this topic, it didn't work.
I use minimal theme.
My store link: https://wiggleduck.com/ 

Accepted Solution (1)

diego_ezfy
Shopify Partner
2934 562 883

This is an accepted solution.

@thevista888, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:

p.grid-link__title {
      display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

 

diego_ezfy_0-1632401440880.png

 



Kind regards,
Diego

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 5 (5)

oscprofessional
Shopify Partner
15830 2369 3071

Hi @thevista888 ,

As I can see your title is lengthy so if you try for decrease the font size then it will not visible at mobile.

Right solution is keep one product in one row for mobile version. so that  title will be  in 2 lines.

Like this

oscprofessional_0-1632399205357.png

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
thevista888
Explorer
65 0 22

@oscprofessional 

How did you do it? I don't see any differences between the original file. Sorry if I'm missing.

diego_ezfy
Shopify Partner
2934 562 883

This is an accepted solution.

@thevista888, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:

p.grid-link__title {
      display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

 

diego_ezfy_0-1632401440880.png

 



Kind regards,
Diego

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

thevista888
Explorer
65 0 22

@diego_ezfy Thanks for your precious help. Problem solved.

sixsunss
Visitor
3 0 0

Hi Diego! I tried your code in my store but it didn't change anything...