---
title: Product Card
description: The shared tile that displays a product's image, title, price, and availability across the storefront.
type: guide
---

# Product Card



Product cards give shoppers a consistent way to recognize and compare products. They appear on the home page, collection and search pages, related-product sections, and agent results. A visual change affects every use.

## Information shoppers see

Each card links to the product and shows its image, title, and price. Products with a price range show both bounds. A single discounted price can show the original price and a discount badge; ranges do not show a discount because discounts may differ by variant.

When a shopper applies one color filter, collection and search cards use the image assigned to that color's first selectable variant and link to its selected options. Assign an image to each color variant in Shopify so filtered cards can show the matching merchandise. Cards fall back to the product image when the matching variant has no image.

Unavailable products keep their image visible under an out-of-stock label. Products without an image show a placeholder instead of a broken image. Loading, empty, and loaded states reserve the same square space so grids remain stable.

The featured style adds a Featured badge and stronger image treatment. Standard grids use the default style.

## Decide whether cards should support purchasing

The default card is for discovery. Shoppers open the product page to choose variants and add an item to the cart.

Common additions include alternate image proportions, a second image on hover, variant swatches, and quick add. Add purchasing controls only when shoppers can make a safe choice from the information on the card. Products with required options usually need the full product page.

## What’s next

Common additions include alternate image proportions, a second image on hover, review summaries, variant swatches, and quick add. Keep cards easy to scan, and add purchasing controls only when shoppers have enough information to choose safely without opening the product page.


---

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)