Need help in aligning product cards

Store Design

Topic summary

A Shopify store owner is experiencing misaligned product cards on their site (trendlabb.com), where cards display at inconsistent heights.

Initial Problem:

  • Product cards are not properly aligned, creating an uneven layout
  • User also wants product titles to truncate with ellipsis (…) after two lines

Solutions Provided:
Multiple community members offered CSS code solutions involving:

  • Adding -webkit-line-clamp: 2 to limit title text to 2 lines with ellipsis
  • Modifying .swiper-slide height properties
  • Setting min-height on product card titles
  • Code should be added to theme CSS files (base.css, theme.css, or custom CSS section)

Current Status:
The title truncation is working, but a new issue emerged: product cards with larger images still display at different heights. The user is seeking a solution to ensure all product cards maintain uniform height regardless of image size.

Discussion remains open with the height consistency issue unresolved.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

I need help in aligning product cards like the alignment is off. kindly help

ncsjcnjs_0-1741885151300.png
ncsjcnjs_0-1741885151300.png1600Ă—662 184 KB

the alignment is off

2

Hi @ncsjcnjs l,

Thank you for reaching out to the Shopify community. I’d be glad to assist you. Could you kindly share your store URL and
password (if it’s password-protected) so I can review it and provide you with an update?

3

Hi @ncsjcnjs ,
please share your store Url .

4

@CodingFifty trendlabb.com

Also, kindly tell me how could my product title in featured collection appear as … after taking two lines. i mean it takes 2 lines and then ellipes (…) appears.

5

Hi @ncsjcnjs ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

a.product__card-title--link {
    display: -webkit-box !important;
    -webkit-line-clamp: 2; /* Maximum 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.swiper-slide {
    height: auto !important;
}

CodingFifty_1-1741887562475.png
CodingFifty_1-1741887562475.png1545Ă—595 431 KB

Or

a.product__card-title--link {
    display: -webkit-box !important;
    -webkit-line-clamp: 1; /* Maximum 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.swiper-slide {
    height: 100% !important;
}

CodingFifty_0-1741887415768.png
CodingFifty_0-1741887415768.png1514Ă—510 342 KB

1 Like
6

@ncsjcnjs

How to Add This to Shopify YourYour Theme:

  1. Go to Shopify Admin → Online Store → Themes.
  2. Click “Customize” on your theme.
  3. In the theme editor, go to “Theme settings” (bottom left).
  4. Scroll down and click “Custom CSS”.
  5. Paste the above CSS code and save changes.

Alternative (Edit Theme CSS Directly):

  1. Go to “Online Store” → “Themes”.
  2. Click “Actions” → “Edit code”.
  3. Open base.css inside the assets folder.
  4. Paste the CSS at the bottom and Save.
.product__card-title--link {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Adds "..." at the end if text is cut */
    min-height: 33px;
}

Arif_Shopidevs_0-1741887862474.png
Arif_Shopidevs_0-1741887862474.png2352Ă—788 232 KB

If you found this helpful, we’d really appreciate it if you could give it a thumbs up and mark it as the solution!

1 Like
7

ncsjcnjs_0-1741940755130.png
ncsjcnjs_0-1741940755130.png1816Ă—762 277 KB

it works but some product cards with big images appear like this, i want same height for every product. kindly help