---
title: Product Card
description: "The shared tile that displays a product's image, title, price, and availability across the storefront."
url: "https://shop-docs.labs.vercel.dev/docs/anatomy/product-card"
docs_index: /llms.txt
lastUpdated: 2026-10-13
type: guide
---

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

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.

## Decide whether cards should support purchasing

On large screens, cards on the home, collection, and search pages offer quick shop for in-stock products: shoppers choose options and add the product to the cart without leaving the grid. Gift cards, smaller screens, related products, and agent results lead to the product page.

Quick shop suits products that shoppers can choose from options and price alone. If shoppers need size guides, detailed media, or other product page content to choose safely, remove quick shop so cards lead straight to the product page.

## What’s next

Common additions include alternate image proportions, a second image on hover, review summaries, and variant swatches. Keep cards easy to scan.

---

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)