sfnext-page-designer
Installation
SKILL.md
Page Designer Skill
This skill covers Page Designer integration in Storefront Next — building merchant-editable pages with React components, decorators, and the Shopper Experience API.
Overview
Page Designer is Commerce Cloud's visual editor for merchants. In Storefront Next, page structure (regions, components, attributes) is fetched from the Shopper Experience API and rendered via a component registry and <Region> component.
| Concept | Role |
|---|---|
| Page | Fetched in route loaders via fetchPageFromLoader(args, { pageId }) |
| Region | Named area rendered with <Region page={...} regionId="..." /> |
| Component | Content block with a typeId and attributes; registered in @/lib/registry |
| Registry | Static registry auto-generated by Vite plugin — do not edit by hand |