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

# Overview

A product card is the moment of choice in a buying flow — the tile showing a plan's name, price, billing period, and the action that selects it. This section covers how cards are built and customized today, and it starts with the thing most people arrive here needing to know.

## The legacy template model is gone

PeakCommerce used to render product cards from an editable HTML template — a JSP page with `#{...}#` tokens and knockout `data-bind` attributes, including an `input-spinner` for quantity. **That model no longer exists.** There is no card template file to upload or edit, and nothing in the platform interprets that markup.

Cards are now **components**: registered, typed, and either configured through their fields or replaced with a custom component you build. If you are porting an old customization, the first question is not "where is the template" but "which of these three mechanisms does what I need".

## The three mechanisms

| You want                                                         | Use                                                                              |
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------- |
| A card with your own copy, image, and link                       | The built-in **Product Card** component's fields                                 |
| A card whose content changes per visitor or per tenant           | A **code-type custom component** with `{{field}}` and `{{data.<name>}}` bindings |
| Cards driven by the live catalog, with real prices and selection | A **journey** backed by a product set                                            |

The most common mistake is reaching for the first when you need the third. The built-in card's price is a string you type — it does not track the catalog, so it will silently go stale.

## In this section

* [Product Card Template](/developers/product-cards/product-cards/product-card-template.md) — the component model, the full field list, and how to view or fork a card's source.
* [Dynamic Fields in Product Cards](/developers/product-cards/product-cards/dynamic-fields-for-product-html.md) — the `{{field}}` and `{{data.<name>.path}}` binding contract.
* [Quantity on Product Cards](/developers/product-cards/product-cards/adding-quantity-field-to-a-product-card.md) — where quantity really lives, and how to achieve the intent.
* [Checkbox Add-ons and Conditional Quantity](/developers/product-cards/product-cards/quantity-field-visibility-for-checkbox-product-cards.md) — add-on selection, dependencies, and when the quantity input appears.
* [Price Display and Rounding](/developers/product-cards/product-cards/rounding-the-price-in-product-cards.md) — how amounts are rounded and formatted, and what you can control.

## Related

* [Building Custom Components](/developers/custom-components.md) — the full authoring guide.
* [Component Cookbook](/developers/component-cookbook.md) — worked examples.
* [Product Card Customizations](https://gitlab.com/peak-hercules/peak-help-docs/-/tree/main/product/rules-and-customizations/product-card-customizations/README.md) — the same material for administrators.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.peakcommerce.com/developers/product-cards/product-cards.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.