Web using shella theme | trim to 2 lines

[Sao23]

Hi, I have an shopify website using shella theme.At collection pages I use an option “ trim title to one line “ ,this option trim titles of product cards to one line.The point is that I want 2 lines instead of one, how I can achieve this? Pls help 😆😁😃

[rajweb]

Hi @Sao23 ,

1. Step 1: Access the Theme Editor

   1. Go to your Shopify Admin.
   2. Click on Online Store and then Themes.
   3. Find your Shella theme and click Customize.

   Step 2: Open the Theme Code Editor

   1. Click on Actions and select Edit code.

   Step 3: Add Custom CSS

   1. In the Assets folder, look for a file named theme.scss.liquid or styles.scss.liquid (the name may vary).

   2. Click on the file to open it for editing.

   3. Scroll to the bottom of the file and add the following CSS code:

.product-card__title {
    overflow: hidden; /* Prevents overflow */
    display: -webkit-box; /* Enables flexbox layout */
    -webkit-line-clamp: 2; /* Limits to 2 lines */
    -webkit-box-orient: vertical; /* Specifies the orientation */
    height: auto; /* Ensures height is calculated automatically */
}

• This CSS code allows the product title to display up to two lines and truncates any overflow.