Section API
Sections are React components that have the capability to be rendered and interacted with the Storefront Customizer.
Sections allow you, as a developer, to create components that are editable by a Storefront editor and have a live preview of your component changing as you edit the Storefront. All your sections live in the
/sections folder of your project.This component is like creating any React component, however, it has a custom prop and custom prototype that enables it to be an editable section. Let's take a look at its anatomy.
src/sections/MyFirstSection/MyFirstSection.jsx
export const MyFirstSection = ({ cms, ...props }) => {
// In this example cms would be { howdy: 'Howdy Label' }
// defined by its Schema
return (
<p> Hello, my name is {cms.howdy} </p>
);
}
// Section Customizer Schema
MyFirstSection.Schema = {
label: 'My First Section',
key: 'myFirstSection',
fields: [
{
name: 'howdy',
component: 'text',
label: 'Howdy Label',
}
]
}
The
cms prop on the component will match up with your components Schema fields. You can see that there is a text component on the Schema field named howdy which becomes an input text field in the Customizer where its value can now be rendered through your React component. You can get a full list of supported fields in our documentation here.In your component's folder, you have an
index.js where you can export your component.src/sections/MyFirstSection/index.js
export { MyFirstSection } from './MyFirstSection';
The final step to start using your component is to register it in the
index.js of the /sections folder. This will allow your component to be available in the Customizer.- 1.import your section into
/sections/index.js. - 2.Add it to the exports array.
- 3.Refresh the Customizer.
sections/index.js
import { MyFirstSection } from './MyFirstSection';
... // other sections
// default must export an array of storefront sections
export default [
MyFirstSection,
... // other sections
];
Last modified 10mo ago