Customizer Schema

The customizerSchema property passed to defineBlock defines the fields in the Instant admin's customizer that merchants can use to customize the block.

The schema is an object and contains the fields object, where the keys are the name's of the fields, and the values the other options of a field.

export default defineBlock({
  ...
  customizerSchema: {
    fields: {
      backgroundColor: { type: 'color', preview: '#A020F0' },
      tag: { type: 'text', maxLength: 20 },
      enableAnimation { type: 'toggle', preview: true },
      amount: {
        type: 'number',
        min: 2,
        max: 80,
        fractionDigits: 2,
        preview: 40
      },
      padding: {
        type: 'select',
        options: [
          { label: 'Small', value: 'sm' },
          { label: 'Large', value: 'lg' },
        ],
        preview: 'sm',
      },
    },
  }
});

Supported fields

The table below shows the supported customizer fields. The example return values shows the format that the content will be returned in by useBlockState.

Type	Example return value
"color"	"#F8F8F8"
"number"	3.14
"select"	"sm"
"text"	"Text"
"toggle"	false

Typings

type CustomizerSchema = {
  fields: {
    [name: string]:
      | {
          type: "color";
          description?: string;
          isRequired?: boolean;
          label?: string;
          preview?: string;
        }
      | {
          type: "number";
          description?: string;
          isRequired?: boolean;
          fractionDigits?: number;
          label?: string;
          max?: number;
          min?: number;
          preview?: string;
        }
      | {
          type: "select";
          description?: string;
          isRequired?: boolean;
          label?: string;
          options: Array<{
            label: string;
            value: string;
          }>;
          preview?: string;
        }
      | {
          type: "text";
          description?: string;
          isRequired?: boolean;
          label?: string;
          maxLength?: number;
          preview?: string;
        }
      | {
          type: "toggle";
          description?: string;
          isRequired?: boolean;
          label?: string;
          preview?: string;
        };
  };
};