Product card design: what each card must show, and a grid people can scan
A product card has to let someone compare at a glance and decide whether to look closer. That takes four things: an image cropped like every other image in the grid, a name that says what it is, a price that's easy to find, and one clear action. Everything else on the card competes with those four.
The four essentials
- Image
- One photo per card, all in the same aspect ratio and with the same background and lighting. Square or 4:5 portrait suit most products. A grid of mismatched crops looks like a jumble sale even when every product is good.
- Name
- What the product is, in the words a buyer would search for: “Ash-glaze mug, 350 ml” rather than a collection code. Keep it to one or two lines and truncate nothing important.
- Price
- In the same place on every card, in a consistent format with the currency. Tabular figures help prices line up across a row.
- One action
- Either the whole card links to the product page, or the card has a single button such as “Buy” or “View”. Not both competing, and not three icons.
Optional details, used sparingly
- One line of detail: size, weight, flavour notes, edition. Something that helps comparison.
- Availability: “Sold out” or “Last two” as text, not just a greyed-out image.
- Sale price: the current price clearly, with the earlier price struck through only if it was genuinely charged. In many countries showing an inflated “was” price is treated as misleading.
- Colour swatches: only if variants really differ in appearance; label them for screen readers.
- Badges: at most one per card (“New”, “Seconds”). A card with three badges has none.
Product grid design
| Screen | Cards per row | Notes |
|---|---|---|
| Phone, under about 600px | 1 or 2 | Two works for visual products like clothing; one for products needing more text |
| Tablet | 2 or 3 | Keep the image large enough to judge the product |
| Laptop and desktop | 3 or 4 | Five or more makes each image too small to be useful |
Keep the gap between cards larger than the space inside them, so each card reads as one unit. Align names and prices across a row, so the eye can scan prices horizontally; if names wrap to different lengths, set the price on the same line as the name or give the name area a fixed number of lines. Sort the grid in an order that means something (newest, best-selling, price) and say which. For more on grids of cards generally, see card layout design.
Ecommerce product card accessibility
- One link per card where possible. A card with an image link, a title link and a button means three tab stops to the same place. Wrap the card's main link around the title and extend the clickable area with CSS instead.
- Alt text with the product name (and what distinguishes it, such as the colour) unless the name is already right next to it and the image adds nothing; then empty alt text avoids repetition.
- Button labels that make sense alone. Ten buttons that all say “Buy” are hard to tell apart in a screen reader's list of links; add the product name as visually hidden text or an
aria-label. - Tap targets of at least 24 by 24 CSS pixels to meet WCAG 2.2's target size minimum; 44px is more comfortable.
- Hover effects that aren't the only signal. Zooming the image on hover is fine; hiding the price or button until hover excludes touch and keyboard users.
Product cards in Anticode
Online store is one of Anticode's page kinds. Its product grid shows three cards per row on wide screens, two on tablets and one on phones. Each card has a 4:5 portrait image (from the curated photo library, with alt text set to the product name), the name and price on one line with the price in tabular figures, a line of detail, and a Buy link at least 44px tall in the action colour. On hover, the image scales up very slightly; the price and button never depend on hover.
The Buy links go to a payment link from your own provider, such as Stripe Payment Links, Gumroad, Lemon Squeezy, Shopify or Whop, and open in a new tab, where checkout, tax and receipts happen. There's one payment link per account, so every Buy button opens the same checkout. For several products, point it at a product list or multi-item checkout at your provider; the online store guide covers the options.
Questions people ask
What should a product card show?
A consistent image, the product name, the price and one action. Add one line of detail or availability only if it helps comparison.
How many products per row?
Three or four on desktop, two or three on tablets and one or two on phones, depending on how much the image needs to be seen.
Should product cards have an add-to-cart button?
Only if people commonly buy without needing details, such as repeat purchases. Otherwise link the card to the product page.