Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.frontic.com/llms.txt

Use this file to discover all available pages before exploring further.

A Detail Block is an API endpoint with a user-defined schema — it returns the exact data one UI component needs. Blocks are reusable, have parameters, and can be nested inside each other. Manage your blocks in the API Builder section of the admin app.
API Builder showing a list of Detail Blocks with their names, storage connections, and endpoints

​
Create a block

Head to the API Builder and click Create Block.
Create block dialog with name input and auto-generated endpoint URL
Frontic generates an endpoint URL as you type the name.
Block names must use normal capitalized words with spaces (e.g., Product Card, not ProductCard). Frontic derives the namespace and endpoint slug from this value — incorrect casing will break the auto-generated endpoint.

​
Description

Add a description for your block. This is used for the auto-generated API documentation.

​
Storage connection

Connect your block to a Data Storage to populate it with real data. For commerce storages, you choose whether the block operates on the product level or the variant level. This determines which fields are available in the response schema:
  • Product-level blocks access shared fields only. Variant-specific data (price, options) is available through the special field types below (Price, Variant Field, Variant List).
  • Variant-level blocks access variant fields and shared fields — they inherit from the parent product.
See Product Models for a deeper look at when to use which level.

​
Response schema

Define the output — the fields your block returns. Each field you add has a name that determines how it appears in the API response. The return shape depends on the field type — a storage field returns the type defined in the schema (string, number, composite, etc.), a nested block returns the nested block’s full response, a listing returns a collection, and a route returns URL and metadata.
Block response schema editor showing field types, storage field selection, and nested block options

​
Storage fields

Select a field from the connected storage. The return type matches the storage field’s type — a string field returns a string, a composite like Price returns the full composite structure, an array field returns an array.
  • Reference — the storage field to read from

​
Nested block

Nest another Detail Block inside this block. A typical use case: nesting a brand information block inside a product detail block.
  • Block — the Detail Block to nest
  • Parameters — configure the nested block’s parameters so it resolves correctly

​
Nested listing

Nest a Search Listing inside this block. A typical use case: a category page block with a product listing nested inside it.
  • Listing — the Search Listing to nest
  • Parameters — configure the listing’s parameters for resolution

​
Route

Adds a context-aware URL to the response that points to a Page URL. Frontic resolves this and returns the correct URL for the caller’s locale and region — a product card on demo-shop.com/de automatically links to /de/sneakers and on demo-shop.com to /en/sneakers.
  • Target page — the Page URL to link to
  • Key — a block field to take the record key from
The following fields are available on product-level blocks from a commerce storage.

​
Variant list

Includes a list of variants in the response.
  • Variant block — a variant-level block that shapes each variant’s data
  • Active variants only — whether to exclude inactive variants

​
Variant field

Rolls up a single field across all variants of the product — for example, all available colors or sizes.
  • Storage field — which field to aggregate from the variants
  • Active variants only — whether to exclude inactive variants
  • Unique values only — whether to deduplicate the aggregated values

​
Price

Includes the price in the response, resolved to the caller’s currency via Request Context.
  • Strategy — which price to return when a product has multiple variants: first, lowest, or highest
  • Active variants only — whether to exclude inactive variants from the price calculation

​
Fetch a block

const block = await client.block("ProductCard", "my-product-key");
Every block requires a key parameter that identifies the record. If the block is connected to a storage, this is the record’s key field. Without a storage connection, pass any string. See the Client SDK reference for the full API.

​
Response

The response is a JSON object shaped exactly like the block’s response schema: 
{
  "name": "Aurora Trail Runner",
  "price": { "amount": 12900, "currency": "eur", "precision": 2 },
  "image": { "url": "https://cdn.demo-shop.com/aurora-trail.jpg", "alt": "Aurora Trail Runner" }
}

​
API Playground

Preview — this feature is being rolled out.
Open the playground from any block’s detail page to test it against real data without writing code. Enter a record key, pick a domain for context resolution, and hit Send — the response appears side by side with your request.
API Playground dialog for a Detail Block showing key input on the left, domain and context header configuration, and JSON response with status and timing badges on the right
Use the playground to:
  • Verify the response shape — confirm your block returns the fields you expect before wiring up the frontend
  • Test different contexts — switch domains or pass a context key to see how the same block responds for different markets or locales
  • Debug unexpected data — check response status, timing, and payload size at a glance. Color-coded badges flag slow or oversized responses
  • Copy code snippets — the playground generates ready-to-use code from your current configuration, so you can paste it straight into your project