Yeah, sometimes it happens when you have no access to the source code…
Try this instead:
.product-thumbnail {
min-height: 100%;
}
Topic summary
Goal: make “Add to cart” buttons align at the same height across product cards in Shopify’s Retina theme.
-
Proposed fixes:
- Add CSS to set a fixed header height (e.g., .product-thumbnail__header height 3.5rem) via theme.liquid before the closing .
- Preferably, in Theme Settings > Custom CSS (or the product grid section’s Custom CSS), turn the product card into a flex column and push the form to the bottom: make .product-thumbnail and .product-thumbnail__info display:flex; flex-direction:column; flex-grow:1; then set .product__form margin-top:auto. This aligned buttons in the Grid layout.
-
New issue: when switching product cards from Grid to Slideshow, alignment broke. A first attempt using .product-thumbnail height:100% caused layout problems. Changing to .product-thumbnail min-height:100% fixed the Slideshow alignment.
Outcome: resolved. Use the flex-based CSS for consistent alignment in Grid, and ensure .product-thumbnail has min-height:100% for Slideshow cards. Code can be added via Theme Settings > Custom CSS (or section-level Custom CSS), alternatively via theme.liquid if needed.
1 Like