I need to align the buy buttons on my product cards.
Can you help me?
Thank you!
Topic summary
A user needs help aligning buy buttons on product cards for their Shopify store (i2go.co). The misalignment stems from unequal product card heights caused by varying title lengths and product variations.
Two solutions were proposed:
-
Hide variations: Remove product variations from card display via app settings, or use CSS to hide the
.product-item .card .card-information .card-swatchelement withdisplay: none. -
CSS flexbox approach: Add custom CSS to the theme’s main stylesheet (main.css, base.css, or style.css) that uses flexbox properties on
.card-informationand.card-information__wrapperto create consistent heights and align content vertically.
Both solutions include code snippets and screenshots demonstrating the expected results. The discussion appears resolved with actionable CSS fixes provided.
2 Likes
There are two reasons for not getting equal height on product cards: unequal titles and variations.
To address this issue, you can either hide the variations from the app settings for product cards or use the following CSS to remove the variations:
.product-item .card .card-information .card-swatch {
display: none;
}
this will work here is the screenshot
Hi @nhypo
Check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
.card-information {
display: flex;
flex-direction: column;
height: 22vh;
justify-content: space-between;
}
.card-information__wrapper.text-left {
margin: 0 !important;
display: flex;
flex-direction: column;
height: 10vh;
justify-content: space-between;
}
.product-card-layout-02 .product-item.enable_custom_layout_card .card .card-review, .card-price, .card-title-ellipsis, .wrapper__card.show-wishlist.show-mb {
margin: 0 !important;
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!