Reduce the characters limit in product card

[jnud21]

Hello There ,

Is there any way to edit in the product card in such a way that if the title exceeds more than 2 line it should cut off the title with "..." at the end. Like this 

Thank You !!

[StephensWorld]

See here: https://community.shopify.com/c/shopify-discussions/does-someone-know-how-to-truncate-product-titles... 

[jnud21]

Hi , 

I used this code , but in the title end "...." is not coming when the line breaks.

h3.product-grid-item__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-line-clamp: 1;
  max-height: 2.5em; /* Adjust this value as needed */
  white-space: normal !important;
  word-break: break-word;
}

[vai_jpn]

In Shopify, you can control the display of product titles in your product cards using CSS to limit the number of lines and add an ellipsis (...) for longer titles. Here's how you can achieve this.

1. Access your Shopify Admin:
   Log in to your Shopify admin panel.
2. Navigate to Theme Editor:
3. From your Shopify admin, go to "Online Store" and then click on "Themes."
   In the Themes section, find the theme you are using and click on "Actions" > "Edit code."
   Locate the Stylesheet (CSS) file:
4. In the left-hand sidebar, under "Assets," find and click on the "theme.scss.liquid" file or a similar stylesheet file.
   Add Custom CSS:

Once you're in the stylesheet file, add the following CSS code to control the display of the product title:

.product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

This CSS code uses the -webkit-line-clamp property to limit the number of lines to 2. Adjust the value if you want a different number of lines.

5. Save Changes:

Save the changes to your stylesheet file.

6. Preview and Test:

Go back to the "Theme Editor" and preview your changes.
Test the product cards to see if the product titles are now truncated after two lines with an ellipsis.