Need help in aligning product cards

Store Design

Topic summary

A user is experiencing alignment issues with product cards on their Shopify store’s collection page, where cards with and without color swatches display unevenly.

Initial Solution:

  • One responder provided CSS code targeting .collection ul.productListing li.product, but this didn’t resolve the issue.

Working Solution:

  • Another contributor provided CSS code for base.css or theme.liquid that successfully fixed the collection page alignment:
    • Set --bs-gutter-y: 20px for .product-grid-container .row
    • Applied height: 100% to .product-grid-container .product__card

Ongoing Issues:

  • The user identified similar alignment problems on the homepage in two sections: the product tab section and featured collection tab.
  • Additional CSS was provided to fix homepage trending products: height: 100% for .product__card.product--corner-radius-true

Open Questions:

  • The user still needs help with the featured collection section alignment.
  • They also asked how to truncate product titles to two lines with ellipsis (e.g., long product names appearing as “Women’s Posture Corrector Lift Up Bra Medical Back Support…”).

The discussion remains ongoing with these two unresolved requests.

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

Hi!

ncsjcnjs_0-1741862144292.png
ncsjcnjs_0-1741862144292.png1636Ă—688 190 KB

I need some help to fix my collection page. I need the product cards aligned and even there are some with color swatch and others no
product page: https://trendlabb.com/collections/all

2

Hi @ncsjcnjs

You can try add this code in base.css

.collection ul.productListing li.product {
display: flex;
align-items: flex-end;
}

Hope this helps :slightly_smiling_face:

1 Like
3

Hey folk, thanks but this code doesn’t work for me. The issue is still same

4

Good day @ncsjcnjs ,

To achieve this, follow these simple steps:

  1. Go to the online store then select your theme.
  2. Edit the code.
  3. Find the base.css file or locate the theme.liquid file, and then update the following code inside the tag.
.product-grid-container .row {
    --bs-gutter-y: 20px;
}
.product-grid-container .product__card{
    height: 100%;
}​

Here, is the screenshot of the same.

grid-alignment.png
grid-alignment.png1294Ă—762 228 KB

If you found this solution helpful, please like and accept my solution. If you have any further queries, feel free to ask, and I will be happy to assist you.
(S.P)

1 Like
5

@Huptech-Web , very thanks for your help. it really worked. I have one more query. on the homepage (the product tab section), the alignment is off. how to fix please let me know. and yeah, again thanks for your help

ncsjcnjs_0-1741868238719.png
ncsjcnjs_0-1741868238719.png1677Ă—786 210 KB

6

Same for the featured collection tab as well

ncsjcnjs_1-1741868422367.png
ncsjcnjs_1-1741868422367.png1612Ă—786 242 KB

how to fix alignment. this section is located on my homepgae

7

Hey @ncsjcnjs , Glad to know that my solution works for you, to get the same alignment of cards in home page trending products just paste this below code.

.product__card.product--corner-radius-true {
    height: 100%;
}

Here is the screenshot of the same.

grid-cards.png
grid-cards.png854Ă—558 229 KB

If you found this solution helpful, please like and accept my solution. If you have any further queries, feel free to ask, and I will be happy to assist you.
(S.P)

1 Like
8

@Huptech-Web And for featured collection that’s mentioned on homepage? Also, just one last question: how could i make product title appear as … after taking two lines.
For example,

Original Title: Women’s Posture Corrector Lift Up Bra Medical Back Support Sports Support Fitness Vest Bras Shockproof Breathable Underwear Crotch Back Corset Bra
Title appearing under two lines: Women’s Posture Corrector Lift Up Bra Medical Back Support…