Default page builder (section templates)

The storefront's default pages — single product, category, search, cart, checkout, login, register, account, order confirmation, wishlist, 404 — can be customised at the section level. Each page is a fixed catalogue of named sections; the merchant (in the dashboard) and the theme developer (in the theme kit) can reorder, toggle, and restyle those sections. The transactional internals (cart math, checkout form, auth) stay intact — only the section layout changes.

This is separate from the header/footer builder (compiled HTML/CSS) and from free-form landing pages (arbitrary widgets). Default pages are section-level.

How it is stored

A page template is a normal builder page whose type is a system page type, published to S3 at pages/templates/{type}.json:

{
  "type": "product",
  "name": "Product page",
  "status": "published",
  "settings": {},
  "widgets": [
    { "id": "main", "name": "product.main", "active": true, "data": { "settings": {} } },
    { "id": "rel",  "name": "product.related", "active": true,
      "data": { "settings": { "title": "Related products", "limit": 10, "source": "category" } } }
  ]
}
  • widgets[] is the ordered list of sections (reusing the builder widget shape { id, name, active, data }).
  • name is the section type the storefront renders; active toggles it; data.settings holds the section's style/content options.
  • settings is page-level (background, padding, custom CSS), same shape as other builder pages.

How it renders

Each default route fetches pages/templates/{type}.json. If present it renders the sections in order, passing each the route context (the data the route already loaded — e.g. the current product). If absent, the route renders its built-in hardcoded page, so a shop with no template still works and pages can be rolled out one at a time.

The route context a section receives, per page:

Page type Context provided
product product (the current product detail)
category category, products
search searchQuery, products
order-confirmation order
others page-specific data as each page lands

Section catalogue

All sections also accept shared style settings: containerType (container | full-width), paddingTop, paddingBottom, bgColor. Required sections (★) can be toggled off but not deleted.

product

name ★ Purpose data.settings
product.main ★ Gallery, title, price, variants, quantity, add-to-cart, description —
product.related Same-category / same-brand products (reuses the product-slider) title, limit, source (category | brand)

category

name ★ Purpose data.settings
category.featured Featured products strip above the grid title, limit
category.main ★ Filters, sorting, product grid, pagination —
name ★ Purpose data.settings
search.main ★ Query summary, filters, results grid —

order-confirmation

name ★ Purpose data.settings
order-confirmation.main ★ Thank-you message, order details, items —
order-confirmation.details Echoes the custom checkout fields the shopper submitted title
order-confirmation.recommendations Featured-products slider (cross-sell) title, limit

wishlist

name ★ Purpose data.settings
wishlist.main ★ Saved-products grid —

not-found (404)

name ★ Purpose data.settings
not-found.main ★ 404 message + call-to-action title, message, buttonLabel, buttonUrl

cart, checkout, login, register, account are not section-customisable yet — the storefront keeps its hardcoded page and the builder lists them as "Coming soon". (Checkout has its own Custom checkout fields feature.)

Authoring a template

As a merchant: Dashboard → Online Shop → Default pages → pick a page → reorder/toggle/restyle sections → Publish.

As a theme developer: ship the layout in the theme kit at 10-theme-preset-kit/src/themes/custom/templates/{type}.json (see the README there). On theme apply the templates are seeded into the merchant's shop, where they can be further customised. Customise the look of each section via the theme's .tsx page designs and config/* (colors, typography, spacing).

See also: Header / Footer Builder, Custom checkout fields.