Impulse theme - product tile titles 1 line

Store Design
, , ,

Topic summary

Limit product tile titles in the Impulse theme to one line with an ellipsis. The proposed fix is adding CSS in theme.liquid to clamp titles: overflow hidden, text-overflow: ellipsis, display: -webkit-box, -webkit-line-clamp: 1, and -webkit-box-orient: vertical.

Key details in the shared CSS: it also applies text-transform: uppercase, reduces font size, and adds letter-spacing. This works visually but unintentionally changes typography/style.

Issues raised: the OP notes the fix altered fonts/styles and did not work on mobile. Another participant confirms it works for them. A helper requests the live page URL to provide a version-specific code that works properly.

Technical notes:

  • -webkit-line-clamp limits text to a set number of lines (1 here) and requires display: -webkit-box with vertical orientation.
  • text-overflow: ellipsis shows “…” when text exceeds the container.
  • Selector used includes [data-type_product_capitalize=true] .grid-product__title, which may vary by theme version and affect styling.

Actions suggested: share the store’s live URL; adjust the CSS to remove typography changes (uppercase, font-size, letter-spacing); ensure the selector targets both desktop and mobile title elements; place CSS in theme.liquid (before or above ) per theme needs.

Status: open; no finalized code that preserves original styles and works on mobile has been provided yet.

Summarized with AI on December 30. AI used: gpt-5.
1

Hi,

On impulse theme, is there a way to make the product tile titles 1 line max. and if the product title exceeds the length it will show as “…” at the end instead of continuing to a 2nd line under it

Kind regards

sce3.png
sce3.png399×372 103 KB

1 Like
2

Hello @troydewitt

You can add code by following these steps to make title in one line and if exceeds then show …

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

[data-type_product_capitalize=true] .grid-product__title,.grid-product__title { text-transform: uppercase; font-size: calc(var(--typeBaseSize) - 2px); letter-spacing: .2em; overflow: hidden !important; text-overflow: ellipsis !important; display: -webkit-box !important; -webkit-line-clamp: 1 !important; line-clamp: 1 !important; -webkit-box-orient: vertical !important; }

techlyser_ecom_0-1675792346042.png
techlyser_ecom_0-1675792346042.png1919×1002 252 KB

3

Hi @troydewitt

This is Victor from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Victor | PageFly

1 Like
4

Hi, this seemed to work but it changed the font and style of my titles too. Any way to just change the lines without other things?

5

Hi, thanks for your reply! On mobile, this did not do the job. Do you have any code to make the product tiles’ title 1 line max on both mobile and desktop?

6

@waldewit
Maybe the theme version is different, please help me to send the live page URL, i will give you another code that will work properly.
Thank you

7

works , thank you

8

works, thank you