Ecommerce Product Cards: What Information Should You Show?
What to show on ecommerce product cards: images, names, prices, ratings, variants, key attributes, badges and availability, plus layout, mobile and accessibility.
Quick answer
A product card should give shoppers just enough to decide whether to open the product: a clear, consistent image, a descriptive name, the price with any genuine previous price, rating and review count, visible variants such as colour swatches, and the attribute that decides the choice in that category, such as sizes in stock, capacity or dimensions. Add badges only when they're true, use one link to the product page plus separate action buttons, and design for two cards per row on mobile in visual categories.
The Card's One Job
Shoppers scan dozens of cards and open a few. The card's job is to help them pick the right few. When cards lack the information that decides the choice, shoppers bounce between list and product pages; when cards carry too much, scanning slows. This article belongs to the product listing page UX cluster; shoppers who need to weigh specifications side by side are better served by product comparison.
Card Anatomy
The diagram above annotates a card. Each element earns its place differently.
| Element | Guidance |
|---|---|
| Image | Consistent framing and background across the list; optional second image |
| Name | Says what the product is, not only a collection or brand line |
| Price | Clear total price; genuine was-price if on sale; unit price where relevant |
| Rating | Average with review count; hide if there are no reviews |
| Variants | Colour swatches or “+3 colours”; sizes available if they decide |
| Key attribute | The one fact that decides in this category |
| Badge | Only if true and useful: new, low stock, genuine sale |
| Actions | Quick add or wishlist as separate buttons |
The Deciding Attribute by Category
| Category | Deciding attribute on the card |
|---|---|
| Fashion | Sizes in stock, colours |
| Electronics | Key spec, e.g. storage or screen size |
| Furniture | Dimensions or seats, delivery time |
| Beauty | Shade count, size, skin type |
| Grocery | Weight or count, unit price |
| Automotive parts | Fits your vehicle |
Pro tip
Look for the question shoppers go to the product page to answer, then answer it on the card.
Images
Consistent images make lists scannable: same background, framing and scale where possible. A second image on hover, such as on-model or in-room, can help in visual categories, but hover doesn't exist on touch devices, and loading two images per card affects speed. See product image design.
Prices, Sales and Honesty
Show the price shoppers will pay for the shown product. Use was-prices only when they're genuine and follow the pricing rules in your markets. “From” prices are sometimes unavoidable for configurable products; say what the starting configuration is. Unit prices help in grocery and consumables.
Shoppers bouncing between list and product pages?
ZSpace redesigns product cards around the information your shoppers look for before they click.
Badges
Badges work when they're rare and true. “Low stock” that's always shown, or “bestseller” on half the range, trains shoppers to ignore them and damages trust. Decide rules for each badge and generate them from data. See trust optimization.
Layout and Density
Visual categories usually suit a grid; information-heavy categories may suit a list view with more attributes. On mobile, two cards per row keeps browsing fast for visual products; one per row suits cards that need more text. Keep card heights consistent so rows align.
Accessibility
Make the image and name one link to the product page, and give quick add, wishlist and compare their own labelled buttons. Provide alt text that identifies the product, don't rely on colour alone for sale prices, and make sure focus is visible on each card.
Performance
Cards repeat dozens of times, so small costs multiply. Use responsive images with set dimensions to avoid layout shift, lazy-load images below the first rows, and keep card scripts light. See website performance optimization.
Product Card Checklist
- Consistent images with set dimensions
- Descriptive product names
- Clear price; genuine was-price only
- Rating with review count
- Visible variants
- The deciding attribute for the category
- Badges only when true
- One product link plus labelled action buttons
- Two-per-row mobile layout tested with real content
Want product cards that get the right clicks?
Talk to ZSpace about listing page design and testing card changes.
Conclusion
Product cards decide which products get opened. Show what decides the choice in your category, keep it honest and consistent, make it accessible and fast, and test changes. Pair this with product sorting, which decides which cards shoppers see first.
Common questions
An image, a descriptive product name, the price, rating and review count where available, variant options such as colours, and the one or two attributes that decide the choice in that category, such as sizes in stock or capacity.