Product Card Template

If you arrived here looking for an editable HTML product-card template — a JSP page with #{price}# tokens and data-bind attributes — that model no longer exists in PeakCommerce. There is no per-tenant card template file to edit, and nothing interprets that markup. Product cards are components, and this page explains where their markup actually comes from and what you can change.

The component model

A product card is a registered component that page authors drop into a page in the editor. Its markup lives in the platform's own component source, not in a template you upload. The built-in Product Card is available in the Storefront and Checkout page editors, and the Product Grid component renders the same card repeatedly from a JSON array of the same field shape.

Because the markup is code, you customize a card by setting its fields — or, if you need different markup, by building your own component instead of editing the built-in one.

The fields you get

The built-in Product Card exposes exactly these fields:

Field	Type	Notes
Product Name	text	The card heading
Description	textarea	Supporting copy, optional
Price	text	A free-text string such as $29
Period	text	A free-text string such as /mo
Image URL	text	Rendered above the body when set
Button Text	text	Defaults to Buy Now
Button Action	select	Link / Navigate or Add to Cart
Button Link URL	text	Used by the Link / Navigate action

That is the complete list. There is no quantity field, no currency field, and no catalog reference — see Quantity on Product Cards.

Viewing the source

Open Content → Component Library and select Product Card to read its source code, read-only. Built-in components can't be duplicated into an editable copy — their source is a React renderer, while your own components run as sandboxed HTML templates, so a clone could never render. To build a card with different markup, author a new code-type component from the component editor and use the read-only source here as a reference.

Gotchas

• Price and Period are strings you type, not catalog data. The built-in Product Card never reads a price from the catalog, so a card can drift out of sync with what the buyer is actually charged.

• Add to Cart dispatches a browser event, not an order. The action fires a storefront:addToCart DOM event carrying the card's name and price. No cart handler in the product listens for it today, so nothing happens unless the surrounding page supplies its own listener. For a real purchase path, point Link / Navigate at a journey.

• For live, catalog-driven cards, use a journey. Journey pricing blocks read a product set and render cards from resolved prices — see Product Sets.

Related

• Dynamic Fields in Product Cards

• Price Display and Rounding

• Building Custom Components

• Product Card Customizations