> For the complete documentation index, see [llms.txt](https://docs.strm.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.strm.design/reference/blocks/product-card.md).

# Product card

A product card that holds the card's blocks: media, title, price, vendor, rating, swatches, inventory and compare.

A product card that holds the card's blocks: media, title, price, vendor, rating, swatches, inventory and compare.

**File:** `blocks/product-card.liquid`

**Used in:** [Footer](/reference/sections/footer.md), [Contact form](/reference/sections/main-contact.md), [Product information](/reference/sections/main-product.md), [Product recommendations](/reference/sections/product-recommendations.md), [Content](/reference/sections/section.md)

## Settings

| Setting                   | Type    | Options                | Default | Notes |
| ------------------------- | ------- | ---------------------- | ------- | ----- |
| **Product**               | Product |                        |         |       |
| **Style**                 | Choice  | Plain, Card background | Plain   |       |
| **Text alignment**        | Choice  | Left, Center           | Left    |       |
| **Space between details** | Slider  | 0–16px, steps of 1     | 4px     |       |

## Nested blocks

Product media · [Product title](/reference/blocks/product-title.md) · [Price](/reference/blocks/product-price.md) · [Vendor](/reference/blocks/product-vendor.md) · [Rating](/reference/blocks/product-rating.md) · [Swatches](/reference/blocks/product-swatches.md) · [Inventory status](/reference/blocks/product-inventory.md) · Compare · [Text](/reference/blocks/text.md)