How to Limit Product Tittle to 2 Lines Then show... in impulse theme version-2-5-2

Store Design
, , , ,
1

Hello Everyone, I’m Facing a Issue while building store in impulse theme i try various methods to Limit product tittle to 2 lines but failed if anyone know’s the method please let me know

Here’s My Store URL : www.gizmeleon.shop

2 Likes
2

Hello @Moeez ,

You can use CSS to limit the product title to 2 lines.

Here’s an example:

.grid-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 3.6em; /* Adjust based on your line height */
}

To add custom CSS, follow the instructions here:
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css#custom-css

custom-css.PNG
custom-css.PNG1004×837 210 KB

Using this CSS works well for listing pages. However, if you’re targeting the Product Details page, this approach may not be ideal. In that case, I recommend adjusting the layout to allow more space for the title or considering shortening the title length for better presentation.

3

Hi @Moeez

  • Go to Online Store → Theme → Edit code.
  • Find the file theme.scss.css and paste the code below at the bottom of the file.
.grid-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
4

@devcoders Modifying the theme’s core CSS files is not recommended. This can lead to issues during future theme updates, where changes may be overwritten, making the theme harder to manage. It’s best to leave the original theme files untouched. If theme customization is necessary, it’s a better practice to add new custom CSS files instead or add cutom CSS within the theme’s customization editor.

1 Like
5

HI @Robert_Kanaan

Yes, I understand that modifying the theme’s core CSS files is not recommended. However, the store owner doesn’t know how to create a custom.css file.

6

Thanks Buddy You Save My Time

1 Like
7

Hi @Moeez

Thank you so much, the solution is working perfectly. If my assistance was helpful, please consider liking and accepting the solution. Thank you!