Section

A reusable content section that a merchant can place within a page's content area via the page builder - e.g. a banner, a rich-text block, a custom promo section. It's a single, self-contained content block, not a per-item template.

type: "section" - a block with settings - see Settings Panel for how its configurable fields work.

Data

data has no special/auto-provided fields - it's the most general-purpose block type. Every field it needs (a title, an image, a link, a list of items, etc.) must be declared in configurationSchema.json and referenced as data.<key>.

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 this block's configurationSchema.json
// (the settings panel), so editing those fields 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;

See Settings Panel for the full list of field types you can use in configurationSchema.json, including repeatable array fields for things like a list of slides or feature bullets.