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.

Creating a Section component

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.

Exporting your section

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';

Registering your Section to the Customizer

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
];

Additional Documentation

• A full list of our available fields.

• Learn more about the Customizer here.