Collection page product title display 1 line in brooklyn

New Member
2 0 0
Hi, I am trying to make my product title in collection grid display only fist line of title, right now it is displaying the entire title in several lines. I use brooklyn

Would really appreciate it if someone can help. Right now it looks like pic 1.I'd like it to look like pic 2.
0 Likes
Shopify Expert
565 24 93

The following tutorial assumes your're using Brooklyn 12.0.2 or that the relevant code in the version of your theme you're using is the same or at least similar.

 

Please be sure to make a backup of your theme before you make any changes to the code!

 

Go to Online store » Themes » Actions » Edit code. In the code editor open the file product-grid-item.liquid under snippets. Find this line:

 

<span class="grid-product__title">{{ product.title }}</span>

Change it to this:

 

<div class="truncate-title"><span class="grid-product__title">{{ product.title }}</span></div>

Save the file.

 

Then open the file theme.scss.liquid in the assets folder. All the way at the bottom of the file paste this code:

 

.truncate-title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

Save the file.

 

If this solution worked for you, please mark it as the solution so others who find this post know what worked for you and can apply the solution to their own store.

★ ThemeUp: Nifty Upgrades for your Shopify Store ★ https://themeup.net
0 Likes
Highlighted
New Member
9 0 0

Hi Thomas,

 

Could please guide let me know a solution for Masonry theme?

I want the product titles to appear in one line and not the whole text as stated above.

 

Thanks

0 Likes