How to Consistently Align Price Information at the Bottom of Product Cards?

[bynatasyayoe]

How can I ensure that the price information on my product cards is consistently aligned at the bottom? I've tried various solutions from previously resolved questions, but none have worked.

Currently, the alignment is inconsistent, with some prices at the top and others at the bottom. I'd like all prices to align at the bottom, right above a specific line. Any assistance would be greatly appreciated. Thank you!

[Dan-From-Ryviu]

Hi @bynatasyayoe 

Could you share your store link so I can check?

[bynatasyayoe]

https://hazle.id/

[Dan-From-Ryviu]

Hi @bynatasyayoe 

Please add this code to Custom CSS in Oline Store > Themes > Customize > Theme settings 

.card__content .card__information {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

[bynatasyayoe]

Hi Dan,

Thank you for the solution! It seems like it managed to push the price information to the bottom. However, the layout is still different for some products. For some the original price is at the top and for some it's on the same line as the sale price. How do I make the layout look like the most right product card? (original price on top, sale price at the bottom). Thank you!

[Dan-From-Ryviu]

There is not enough space to display in one line if your price has "From..." text

[bynatasyayoe]

Hi Dan,

I want the price to be in 2 lines like the furthest right product card (Calvin Klein Eternity Intense Woman Eau de Parfum). Shouldn't that give more space to the price instead of making it 1 line? So the layout will be:

1. Original price (the one in black) at the top
2. Sale/From price (the red one) at the bottom

Please let me know if this is possible! Thank you.

[Dan-From-Ryviu · Accepted solution]

Please add this more code 

.card-information .price--on-sale .price__sale {
    display: flex;
    flex-direction: column;
}

[bynatasyayoe]

Thank you so much Dan! It worked. You're amazing!😁

[Dan-From-Ryviu]

You are very welcome! 

[Ced74]

I had the same problem and this code fixed it for me. Just one issue- I have some cards with an "add to cart" button and some with a "choose options" button. The "choose options" button is bigger on mobile view because it takes up two lines with text, so the prices on those cards are pushed up slightly. Is there a way I can make the buttons the same size despite the different amount of words in each? My website is homefronthabitat.com for reference. 

[Dan-From-Ryviu]

Hi @Ced74 

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings to solve the issue 

@media (max-width: 749px {
.card--card .quick-add {
    margin: 0 0rem 1rem !important;
}
}

[Ced74]

That didn't work

[AnneLuo]

Hi, @bynatasyayoe 

Can you please share the store URL so that I can assist you?

[bynatasyayoe]

Hi Anne, please see my reply above! Thank you.

[AnneLuo]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
.card__information .card__heading {
    margin-bottom: 25px !important;
}
.card__information .card-information {
    position: absolute !important;
    bottom: 80px !important;
}
</style>

Result:

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[suyash1]

@bynatasyayoe  can you please share your website link?

[bynatasyayoe]

Hi Suyash, please see my reply above! Thank you.

[suyash1]

@bynatasyayoe   please add this css to the very end of your base.css file and check,
Shopify Admin -> Online Store ->Theme -> Edit code -> base.css

.card__information {display: flex; flex-direction: column; justify-content: space-between;}