Is there a way to align the prices altogether? Some of the products have longer names which unaligned the price. Is it possible to line up all the prices to the same level on the homepage?
Topic summary
A user seeks to align product prices on their Shopify store homepage, as products with varying name lengths cause price misalignment across the grid.
Proposed Solution:
Another user suggested adding CSS code to set a minimum height for card headings:
- Navigate to Online Store → Theme → Edit
- Add
.card__heading { min-height: 34px; }to the component-card.css file
Current Status:
The CSS adjustment brought text closer to alignment but did not fully resolve the issue on mobile or desktop. The original poster is questioning whether complete alignment is achievable or if the solution requires a more complex approach. The discussion remains open with no definitive resolution yet.
Hello there @WaataBlasters Try the steps below and I believe the prices would become aligned
- Go to Online Store->Theme->Edit code
- Asset->/component-card.css->paste below code at the bottom of the file:
.card__heading {
min-height: 34px;
}
It didn’t work. I checked on mobile and desktop and it’s pretty much the same. The text is close but not aligned.
Is this not possible to do or is it complicated to do?