Settings Panel (configurationSchema)

Blocks with settings (header, footer, drawer-menu, section, page) expose a settings panel so a merchant can configure content without touching code. This is driven by two files sitting alongside the block's index.tsx:

• configurationSchema.json - an array of field definitions. Each field becomes an input in the settings panel.
• data.json - the default/preview values for those fields, keyed by field name. This is what the component receives as its data prop while editing (and the merchant's saved values replace it at runtime).

Example

configurationSchema.json

[
  {
    "type": "text",
    "name": "title",
    "label": "Title"
  },
  {
    "type": "textarea",
    "name": "description",
    "label": "Description"
  }
]

data.json

{
  "title": "Section",
  "description": "A page section component"
}

index.tsx

import React from 'react';
import { Flexbox, Text } from '@evlop/native-components';
import { CustomBlock } from '@evlop/shopify';

// `data.title`/`data.description` come from configurationSchema.json above -
// editing those fields in the settings panel updates what renders here.
const SectionBlock: CustomBlock.Section = ({ data }) => {
  return (
    <Flexbox flexDirection="column" gap={8} p="md">
      <Text fontSize="2xl" fontWeight="Bold">{data.title}</Text>
      <Text fontSize="md" color="gray-700">{data.description}</Text>
    </Flexbox>
  );
};

export default SectionBlock;

Every field needs a unique type, name, and label. name is the key the value shows up under on data.

Common field types

type	Renders as	Value shape
text	Single-line text input	string
textarea	Multi-line text input	string
number	Numeric input	number
select	Dropdown	string
checkbox	Toggle	boolean
icon	Icon picker	icon identifier string, e.g. "material-community-icons:cart-plus"
action-select	Action/link picker	app action value, pass straight to a component's action prop
product	Shopify product picker	a resolved ShopifyProduct once loaded (or a ShopifyProduct[] array if multiple: true) - see Showing a Merchant-Selected Product and Showing Several Merchant-Selected Products
array	A repeatable list of sub-fields (see below)	array

Array fields (repeatable items)

Use type: "array" to let a merchant add/reorder/remove a list of items, each shaped by its own nested schema. This is exactly how the automatic menuItems field on header/footer/drawer-menu works under the hood:

{
  type: "array",
  name: "menuItems",
  singularLabel: "menu item",
  maxItems: 5,
  itemLabel: item => item.label || "Menu item",
  schema: [
    { type: "text", name: "label", label: "Name" },
    { type: "icon", name: "icon", label: "Icon" },
    { type: "action-select", name: "action", label: "Action" },
  ],
}

Each item in data.menuItems then looks like { label: string, icon: string, action: <app action> }.

Auto-provided fields

header, footer, and drawer-menu automatically get a data.menuItems field (an array of up to 5 { label, icon, action } items) without you declaring it - see each type's page under Block Types. Never declare your own menuItems field in configurationSchema.json for those types - it's added for you.

section and page have no special auto-provided fields - every field they need must be declared explicitly, matching whatever content the block is meant to show (a title, an image, a link, a list of items, etc.).

product-display-card, collection-display-card, product-sticker, and product-information are blocks without settings and don't have a settings panel at all - see Block Types for what data they receive instead.