Deliver product cards as ready HTML

This guide shows you how to prebuild product cards with the existing snippet template editor and include them in the first shop response. After setup, the initial display does not need browser calls for catalog data, prices, or availability.

Use this approach for anonymous lists, categories, and comparisons. Add an optional API request after the initial render when your shop needs customer-specific prices or exact availability.

Prerequisites

Product variants are published for the required sales channel and locale.
The site page uses the existing productCatalogSnippets component.
You have Tenant Owner permission to change snippet templates.

Edit the existing product card

Open PIM > Publishing > Snippet templates.
Open the product card that the site already uses. Do not create a second renderer or parallel template for the same output area.
Continue to maintain HTML and optional Lua in the existing tabs.
Use {{ .price_display }} for the anonymous standard price.
Use {{ .purchase_availability.label }} for the coarse quantity-one status. Use purchase_availability.can_attempt_purchase in conditions.
Test the card in the Preview tab with a real variant, locale, and sales channel.

Static availability uses durable physical stock and deliberately ignores active or pending cart reservations. Cart and checkout remain authoritative for price and purchasability.

Select rebuild triggers

Open Automatic rebuilds and select only the business changes used by the markup:

Trigger	Select it when the template …
Anonymous standard price	outputs `price_display`, `price_amount`, `price_currency`, or `public_price`
Static purchase availability	outputs `purchase_availability` or derives classes and actions from it

The list only contains triggers registered by the product. Free event names are not accepted. Price changes, price time boundaries, and durable stock changes then rebuild only templates that selected the corresponding trigger. An unchanged business fingerprint does not write HTML or invalidate the cache.

HTML, Lua, scope, and product-content changes remain normal lifecycle rebuilds. The trigger selection does not disable them.

Include the card on the server

Configure productCatalogSnippets with the name of the existing product card and the required catalog filter. The component inserts already built HTML artifacts. It does not calculate prices or availability during the page request.

Verify the result:

Load the page with JavaScript disabled.
Confirm that all cards, prices, and static availability labels are visible.
Confirm that initial rendering does not require Catalog, Summary, Pricing, or Availability requests.
Change a standard price or durable physical stock and confirm that the card updates after the rebuild.

Optionally refine data after rendering

A Storefront extension may call the public Pricing/Availability contract after the initial render. Use it for customer-specific prices, other quantities or units, and exact availability. Replace static values only after a successful response. Keep the visible card unchanged after a timeout or API failure.