Schema

To make a component a Customizer section, you must enrich its prototype with a Schema definition object. The Schema defines the name, key, and fields that will become configurable through the Customizer.

You can check out the quick guide to creating your first section here.

/sections/YourSection/YourSection.jsx

export const YourSection = ({cms}) => {
    ...
}

// Defines sections customizer settings
YourSection.Schema = {
  label: 'Image Text Block',
  key: 'imageText',
  fields: [
    ...
  ]
}

The three required properties on your Schema are the label, key, and fields.

Key	Type	Description
label	string	This is a human-readable label for the section that will appear in the Customizer when selecting what section to add to the page.
key	string	A unique handle for the section.
fields	Array<Field>	An array of fields that will create inputs in the Customizer. Check out our our supported fields here.

Conditionally Display in the Section Gallery

If you have specific sections that you only want to be displayed in the customizer based on the page type or certain attributes of a Product or Collection, you can control that by returning a null object in your Schema. For example:

// sections/YourSection/YourSection.jsx

export const YourSection = ({cms}) => {
    ...
}

// Defines sections customizer settings
YourSection.Schema = ({ collection }) => {
  if (!collection && /* your custom logic */ ) 
    return null; 
    
  return {
    label: 'Image Text Block',
    key: 'imageText',
    fields: [
      ...
    ]
  };
}

Next steps

• Dive into our available fields that can be used in your Schema here.