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.

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.

Last updated