Foundation · 3 min
What you need to know
Which facts belong on the card?
On a list of products, show just enough for buyers to compare them before opening a page. That may be the name, image, price, and available sizes. The product page can explain materials, care, and delivery.
If some products have different prices by size, do not show a single price that appears to promise every version costs the same. You can put “From” beside the lowest available price and show the exact price as soon as the buyer chooses a size.
Should cards show ratings and discounts?
Show a rating only when it comes from genuine reviews and links to the relevant product. Do not put five stars on a new product that has no reviews. If you display a sale price, make the current price unmistakable and show the comparison price only when it is accurate and permitted.
A badge such as “New” or “Best seller” should mean what it says. Do not add several badges that compete with the product name.
Add to Cart or Quick Add?
A “Quick Add” button can put a product in the cart from the product list. Use it only when shoppers already know which version they will get. You might allow it for a product sold in one size. If buyers must choose a size, a card button can open the product page or a clear choice panel instead of silently adding a default.
Test what appears in the cart. The item and its selected version should match what the buyer expected.
Should a second image appear on hover?
A second photo can show the product in use, but phone users cannot hover a mouse over the card to see it. Keep the first image informative and check that the second does not hide important information or change the card’s clickable area unexpectedly.
Why do people see cards but not open them?
They may not recognize the item; its photo may hide its size or use, or the price may be unclear. Ask a visitor to find a gift from a product grid. If they cannot tell which card fits, change the names or photos before adding more badges.
Foundation · 2 min
Frequently asked questions
Does every card need an Add to Cart button?
No. A link to the product page is often clearer when shoppers still need to choose a version or read important details.
Can a card show an out-of-stock product?
Yes, if the unavailable status is clear and opening the page still helps the buyer, for example by showing alternatives or a real restock option.