Design System / Modules

Product

advancedCommercecore

Commerce product — full-bleed media, price, variant chips, a quantity stepper, and an add-to-bag CTA.

Demo

Product

Tour Tee — Summer ’26

Summer ’26 dropShips early August
Heavyweight cottonUnisex fit
Fields
Color
Black
Size
Size Guide +
Quantity
1
Total£35.00

Source

The rendered structure, live from the demo above — hover a row to highlight the element in the demo.

Waiting for the demo to render…

Colour Mapping

Every colour token this module consumes, resolved under the active profile — neutral · light · brand default. Switch the profile above the demo to remap.

--module-surface-raised
--module-surface
--gray-a6
--gray-12
--gray-1
--gray-11
--module-fg-mutedvia shared
--seed-9via shared

Token contract

SEMANTIC SLOTS

--module-surface-raised--module-surface--module-fg-muted ·shared

SEED SCALE

--seed-9 ·shared

RADIX COLOUR SCALES

--gray-a6--gray-12--gray-1--gray-11

LAYOUT & TYPE

--radius-4--radius-3--space-3

Anatomy

LAYERS

Product ModuleModuleShell · borderless
Module HeaderRow
Module TitleRadix Text
Module CTARadix Badge
Module ContentColumn
Product MediaAspect Ratio (1:1)
ImageNative <img>
Pagination DotsRow (dots)
Product MetaColumn
Product NameRadix Heading
Meta BlockColumn (per meta)
Fields Sub-cardBox (gray surface)
Color FieldRow
Swatch RadioNative <button> (per colour)
Selected NameRadix Badge
Size FieldRow
Size SelectRadix Select
Size GuideRadix Badge
Quantity RowRow
StepperRow (− count +)
TotalColumn (Radix Text ×2)
Module CTACtaRow (label + arrow)

RADIX COMPONENTS

AspectRatioBadgeBoxFlexHeadingSelectText

SHARED COMPOSITES

CtaRowModuleShellPaginationDots

Fields

The client-editable schema (builder-kit/lib/fields.ts) — what the Builder's fields rail and the Portal Builder expose. Defaults are the sample props the demo renders with.

KeyLabelTypeOptionsSample default
titleModule titletext——
nameProduct nametext—Tour Tee — Summer ’26
priceTotal pricetext—£35.00
actionLabelCTA labeltext——
aspectRatioAspect ratioaspect-ratio——
headerShow headertoggle——

Registry

Filemodules/core/ProductModule/ProductModule.tsx
ComponentProductModule
Tier / groupadvanced · core
Statusbuilt
Client referencescnx, genesys, hlls