For the complete documentation index, see llms.txt. This page is also available as Markdown.
Creating a Component
When the system components don't cover a layout you need — a bespoke pricing block, a branded banner, a portal widget specific to your business — you create your own. User components become first-class blocks in the page editor, so a layout you build once can be reused across pages and portals. Create them in Content → Component Library.
The component editor — fields on the left, a live preview in the center, and the selected field's properties on the right.
Two ways to start
New Component — build a component from scratch in the component editor.
Create with Mango — describe what you want in plain language and have PeakCommerce generate a working component for you, which you can then refine.
The component editor
The editor is a three-pane workspace:
Left rail — switch between Insert (drop in ready-made snippets), Fields (define the editable properties authors will see), and Chat (ask Mango to generate or change the component).
Center canvas — toggle between a live Preview (rendered at desktop, tablet, or mobile widths) and the Code view for direct editing.
Right inspector — Props for the selected field or the whole component, and Data for binding the component to live commerce data.
When you ask Mango for a change, it proposes an edit you can accept, reject, or refine; accepting it updates the code, fields, and preview together.
Settings to set
Category — how it's grouped in the library.
Contexts — which editors and page types it can be used in (Storefront, Checkout, Customer Portal, Partner Portal, CSR Portal, or Payment Pages). Choose every context where the component should be available.
Status — set it Active to make it available in the page editor.
Things to watch
Set the right contexts. A component only appears in editors whose context you selected — if it's missing from a page, its contexts are the first thing to check.
Active is what makes it usable. A saved-but-inactive component won't show up as a block until you activate it.
Define fields for anything authors should edit. Values you don't expose as fields are baked into the component and can only be changed back in the editor.
Once active, the component appears in the Component Library and can be placed on any page whose context matches.
