Reduce the characters limit in product card

jnud21
Excursionist
21 0 1

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 

 

iun.png

 

 

 

 

 

 

 

 

 

 

Thank You !!

Replies 3 (3)

StephensWorld
Shopify Expert
1332 156 326

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

★ Did my post help? If yes, then please like and accept solution. ★

https://stephens.world
support@stephensworld.ca

jnud21
Excursionist
21 0 1

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
Excursionist
24 0 1

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.

Exploring Shopify deeply