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 …

Please add this more code .card-information .price--on-sale .price__sale { display: flex; flex-direction: column; }

Hi @bynatasyayoe Could you share your store link so I can check?

Hi, @bynatasyayoe Can you please share the store URL so that I can assist you?

@bynatasyayoe can you please share your website link?

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

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; } [Screenshot 2024-11-26 at 10.18.12.png]

@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;}

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 tag Result: [AnneLuo_0-1732591343307.png] Hopefully it will help you. If yes then Please don’t forget hit Like and Mar…

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 …

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

Store Design

bynatasyayoe November 26, 2024, 3:16am 7

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

Topic		Replies	Views
Align Prices for Mobile and Desktop Store Design design , customizations , landing-page , css	2	42	November 13, 2024
Theme - Drive Product Card Price Alignment Store Design design , css , troubleshooting	4	46	April 28, 2026
Price aligned at the same level (Dawn Theme) Store Design css	4	70	November 20, 2025
Change look and placement of price on product cards Store Design design	23	275	April 6, 2026
Align Prices for Mobile and Desktop Store Design liquid , design , customizations , css , shopify-themes , product-page	3	60	November 26, 2024

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

Related topics