Collection page product title display 1 line in brooklyn

New Member
2 0 1
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.
Shopify Expert
540 24 118

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 ★
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.



New Member
1 0 1

Hi Thank you for the information, I have a little problem I didn't find product-grid-item.liquid. i think because I using 'Gecko 4.0 - Responsive Shopify Theme"

Guys do you have any way to solve this 


yes i can help you to solve this issue form gecko theme.

Shopify Expert | Arslan
Want to modify or custom changes on store hire me.
Skype : arsal.33
Mail :