How can i make the product cards same size
Topic summary
Main issue: Product cards in the Ella Shopify theme display with inconsistent heights, especially when product names are longer or when color swatches are present. An image was shared illustrating the uneven card sizes.
Proposed fix: A helper suggested adding CSS in Assets/base.css to standardize card layout using flex:
- Set the product grid and card elements to display: flex and use column flow.
- Apply height: 100%/inherit to make cards equal in height.
Follow-up: The store owner asked how to change overall card size. After implementing the CSS, they reported no improvement—cards still vary due to text length and swatch presence.
Next steps: The helper requested the store URL and password to investigate directly. The store URL was provided (https://newedenapparel.myshopify.com/pages/essentials), but no password was shared yet.
Status: Unresolved and ongoing. Key items (image and code snippet) are central to understanding the issue; further inspection of the live theme is pending.
Hi @eden73
May I suggest to update code these steps:
- Go to Store Online-> theme → edit code
- Assets/base.css
- Copy code below to bottom of file
body .productListing.productGrid {
display: flex;
flex-flow: wrap;
}
body .productListing.productGrid .product .product-item {
display: flex;
flex-flow: column;
height: 100%;
}
body .productListing.productGrid .product .product-item .card {
display: flex;
flex-flow: column;
height: inherit;
}
Hope can help
If you find my reply helpful, please hit Like and Mark as Solution
EBOOST
how can i change the size of the cards
it didnt work, the cards are till bigger when certain products have more letters in its product name or theres a colour swatch