Aligning product prices on the Shopify Dawn homepage collection grid. The homepage collection showed misaligned price rows because product cards had varying text heights (different numbers of title/description lines). A screenshot was shared for context.
Initial suggestions requested the store URL (mypearlies.co.uk) and proposed standardizing the number of text rows. The effective fix was a CSS adjustment targeting the product card heading to enforce a consistent height.
Implementation: Online Store → Theme → Edit code → base.css, then add at the bottom: .card__heading { height: 70px !important; }. This equalizes card heading height so prices align on the same horizontal line across products.
Outcome: The store owner confirmed the solution worked immediately. Another user later reported it still works in 2023. No further issues or open questions were raised; the thread is resolved.
Can anyone help me align all the prices on the front page of my website?
I have chosen to display them as a collection on the homepage because it was the easiest way to control in which order they were displayed. The first two products are aligned simply because they have three rows of copy.
Hello, Based on the concept of your request, the very issue is not a technical one as it is due to some in-balance in the product description. Looking into the file sent above, you will see the first two product has the same number of row while the others have a lesser row. Focus on having the same number of row then with that, you will have the prices aligned on a single row