---
title: Product Card
description: The shared tile that displays a product's image, title, and price in grids and sliders.
type: guide
---

# Product Card



Used in the home featured grid, collection (PLP) and search grids, the related-products slider on the PDP, and the AI agent's results. It's the same component everywhere a product is shown as a tile, so a change to the card is a change everywhere at once.

## How it works

**Compound component with stable styling hooks.** `ProductCard` is a server component that wraps the product in a `Link` to `/products/[handle]` — the bare product URL, which renders the first-available (default) variant. Each part — image container, image, content, title, price, optional badge — exposes a `data-slot` attribute (`product-card`, `product-card-image`, etc.), so the pieces can be composed or restyled independently without touching the underlying markup.

**Loading, empty, and out-of-stock states share one footprint.** The skeleton, the no-image placeholder, and the loaded image all render inside the same square box using the same `ImagePlaceholder` element, so grids never shift as cards move between states. An out-of-stock overlay draws on top of the image rather than replacing it, keeping that same footprint.

## Out of the box

* **Two variants** — `default` for standard grids and sliders, and `featured`, which adds a "Featured" badge and a top-down gradient behind the image for highlighting hero products.
* **Price ranges** — when a product's variants span a price range, the card shows both bounds (*$48.00 – $96.00*) instead of a single price; compare-at strike-through and the discount badge only appear for a single price, since per-variant discounts differ across a range.
* **Square media** — loaded images, no-image placeholders, and skeletons use the same square footprint by default.
* **Image fallback** — products with no featured image render a placeholder icon instead of a broken image, so grids stay visually aligned.
* **Out-of-stock overlay** — a darkened image with a localized "out of stock" label when the product is unavailable.

## Common customizations

The card doesn't ship these, but they're common additions teams layer on top.

* **Image aspect ratio** — change the aspect ratio of product images to fit your storefront.
* **Hover image carousel** — reveal additional product images on desktop hover instead of showing only the featured image.
* **Variant selection from the grid** — swatches on the card itself (usually color) so shoppers can preview or add a specific variant without opening the PDP.
* **Quick add** — an add-to-cart action on the card that skips the PDP for simple, single-variant products.


---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)