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
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 — the component model, the full field list, and how to view or fork a card's source.
Dynamic Fields in Product Cards — the
{{field}}and{{data.<name>.path}}binding contract.Quantity on Product Cards — where quantity really lives, and how to achieve the intent.
Checkbox Add-ons and Conditional Quantity — add-on selection, dependencies, and when the quantity input appears.
Price Display and Rounding — how amounts are rounded and formatted, and what you can control.
Related
Building Custom Components — the full authoring guide.
Component Cookbook — worked examples.
Product Card Customizations — the same material for administrators.
Last updated
Was this helpful?