Comment on page
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./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. |
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: [
...
]
};
}
Last modified 6mo ago