How am I able to make these collection selection buttons line up?

Store Design
, , ,

Topic summary

A user is experiencing misalignment issues with collection selection buttons on their Shopify store, as shown in an attached screenshot. The buttons appear at different vertical positions, likely due to varying text lengths in the product titles above them.

Proposed Solutions:

  • Set fixed height for product titles: This would create uniform spacing and push buttons to consistent positions
  • CSS modification approach: One responder provided detailed step-by-step instructions with specific CSS code using flexbox properties (display: flex, flex-direction: column, flex-grow, align-self) to align buttons at the bottom of each card

Current Status:

Multiple community members have requested the store URL to provide more tailored assistance. The discussion remains open, awaiting the original poster’s response with their store link for direct implementation help.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

How am I able to make these collection selection buttons line up?

hi143ily_0-1736806726328.png
hi143ily_0-1736806726328.png3000Ă—1372 662 KB

1 Like
2

Hi @hi143ily

Please, share your store URL. Thanks!

3

Hi @hi143ily ,

To ensure the buttons are properly aligned, you can set a fixed height for the product title section above the buttons.

If you’re unsure how to implement this, feel free to share your store link, and I’d be happy to assist you directly.

Best,

Daisy

4

HI @hi143ily

Could you share your store link?

5

Hi. This can be accomplished by modifying the CSS for this section:

  1. From the Shopify Admin home page, select “Online Store” > “Themes”.
  2. Then find your currently published theme (the one at the top of the page with the label “current theme”).
  3. Click “Customize”.
  4. At the top of the screen, select the corresponding page (I believe this is your home page).
  5. Find the section along the left and click on it.
  6. In the section menu that comes up, scroll to the bottom and find “Custom CSS”.
  7. Add this code. Then click “Save”.
.multicolumn-grid-item {
  display: flex;
  flex-direction: column;
}

.multicolumn-grid-item > a:first-child {
  flex-grow: 1;
}

.multicolumn-grid-item > a:last-child {
  align-self: flex-start;
}

If you need assistance with any of this, feel free to respond to this post.