How can I limit the vendor name to one line in the Impulse theme?

Store Design
, , , ,

Topic summary

A user working with the Shopify Impulse theme wants to limit vendor names to a single line on product tiles. Currently, one particularly long vendor name wraps to two lines on mobile, creating an undesirable appearance.

Desired outcome:

  • Truncate vendor names that exceed one line
  • Display ellipsis (“…”) at the end of truncated text
  • Example: “FLOWERS BIRD…” instead of the full name wrapping to a second line

Proposed solution:
A PageFly representative provided CSS code to implement text truncation:

  • Navigate to: Online Store → Theme → Edit code
  • Locate the theme.css file
  • Add CSS targeting .grid-product__vendor with properties for text overflow, ellipsis display, and webkit line clamping

The solution uses standard CSS text truncation techniques (overflow: hidden, text-overflow: ellipsis, webkit-line-clamp) to constrain vendor names to one line. An image was included showing the current two-line display issue.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone!

I am using the Impulse theme and I would like to make some minor changes to the vendor on product tiles. This one vendor name in particular is very long and therefor takes up two lines on mobile which does not look great (refer to image). Is there any way to limit the vendor at one line? So whenever the vendor name exceeds one line it cuts off at the end and shows “…” (three dots) instead. So for the image in this example the vendor would say: “FLOWERS BIRD…” and not exceed to the second line.

The website is www.pixierebels.com

Warm regards,

Troy

0553544F-9073-414B-B6A4-9FCF803708C4 (1).jpg
0553544F-9073-414B-B6A4-9FCF803708C4 (1).jpg1108×2048 199 KB

2

Hi @troydewitt

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

.grid-product__vendor {

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 1;

-webkit-box-orient: vertical;

}

PageFlyVictor_0-1678531797875.png
PageFlyVictor_0-1678531797875.png413×423 113 KB

Hope that my solution works for you.

Best regards,

Victor | PageFly

1 Like