Product showcase
Show existing products or service offers from the website’s Products collection.
Code name: ProductList · Category: Collections
Registered in the live renderer. Website context and the limitations below still apply.
When to use it
Use the showcase to display offers already created in Products. The block controls selection and layout; names, prices and destinations come from the product records.
In the editor
- Create or choose the relevant products in Products.
- Select those existing records for the block.
- Choose Cards, Compact list or Featured and test the resulting links.
Example
This example uses illustrative content. Media placeholders must be replaced with your own assets; data-backed blocks need the normal website context.
<ProductList layout="Cards" />Behaviour and limitations
- Do not invent productIds or put product content in a data property.
- Edit names, prices and descriptions in Products, not in the section JSX.
- The minimal example depends on the current website’s available products.
Content model
Product names, descriptions, prices, and links are synced from Products. In section JSX, only select existing products with productIds or edit presentation props. Valid layouts are Cards, Compact list, and Featured; never invent a data prop or product IDs.
Property reference
Types below describe the editor controls and known choices, not every value accepted by the renderer. A renderer default is extracted from its parameter; an editor-only default does not prove the runtime default. “Not declared here” does not mean required. Preserve omitted values unless the requested edit needs them.
| Property | Editor value type | Default evidence | Guidance |
|---|---|---|---|
productIds | See guidance | [] (renderer) | Products. See the usage notes for this block. |
layout | "Cards", "Compact list", "Featured" | "Cards" (renderer) | Layout. See the usage notes for this block. |
spacing | object | Not declared here | An object of spacing settings. Preserve existing responsive values when changing a single setting. |
animationType | "none", "fade-up", "fade-down", "fade-left", "fade-right", "flip-up", "flip-down", "flip-left", "flip-right", "zoom-in", "zoom-left", "zoom-right" | "" (renderer) | Entrance animation setting. Use a supported editor value; preserve it for unrelated edits. |
screenList | string | "" (renderer) | Comma-separated device names to hide on: mobile, tablet, desktop. An empty string hides on none. |
