Limit product titles and keep products a line in collection pages(Classic theme used)

Highlighted
Shopify Partner
17 0 0

Hi Guys,

 We want to improve products display effect in collection: showing products in a line,with limited title characters,the left ones instead by ".....", and, the whole title will show when mouse hoves over them

"Boost To Life" , Bamboost-Tech
0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
400 0 64

Hi Jeff,

Britton here with the Shopify support team.

We are going to accomplish this mostly by just setting a maximum height to your product description elements. To do that, go to your theme.scss.liquid file and add this to the bottom: 

p.grid-link__title {
    height: 70px;
    overflow: hidden;
}

.grid__item.medium-down--one-half.large--one-fifth:hover p.grid-link__title {
    height: auto;
}

.grid__item.medium-down--one-half.large--one-fifth:hover .ellipsis {
    display:none;
}

The only thing we need to do now is add in the ellipsis underneath the truncated text. To do that we will need to edit the featured-products.liquid snippet. You need to find the paragraph element with the class "grid-link__title"; for me, it was on line 64. Immediately after that line add in "<p class="ellipsis">&hellip;</p>". This is what lines 64 and 65 turned into after I added it in: 

<p class="grid-link__title">{{ 'home_page.onboarding.product_title' | t }}</p>
<p class="ellipsis">&hellip;</p>
<p class="grid-link__meta">

Thart should accomplish what you were going for I think! You may want to edit the height in the CSS in the first code snippet I posted if you want to include more or less of the title. Also, make sure to back up your theme by duplicating it before making any code changes!

I hope that helps!

-Britton
               

Britton Shopify Guru
0 Likes
Shopify Partner
17 0 0

Hi Britton,thank you for you kind help.It seems your plan conficts with my owen new plan(truncate product titles in product-grid-item.liquid).

Anyway,thanks again.

"Boost To Life" , Bamboost-Tech
0 Likes
Highlighted
New Member
9 0 0

Hi there,

 

I'm using the masonry theme and want the product titles on the collection page to appear in one line and not the entire text in multiple lines. Could you please guide me on that?

 

Thanks

0 Likes