Page

Renders an entire page's content in one go, rather than a single Section placed within a page - e.g. a fully custom landing page, an about page, or any other one-off layout that doesn't fit the section-by-section page builder. It's a single, self-contained block, not a per-item template.

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

Data

data has no special/auto-provided fields - like Section, it's general-purpose. Every field it needs 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": "Page",
  "description": "A reusable full page component"
}

index.tsx

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

const PageBlock: CustomBlock.Page = ({ data }) => {
  return (
    <Flexbox flexDirection="column" gap={12} p="lg" flex={1}>
      <Text fontSize="4xl" fontWeight="Bold">
        {data.title}
      </Text>
      <Text fontSize="lg" color="gray-700">
        {data.description}
      </Text>
    </Flexbox>
  );
};

export default PageBlock;

Give the root element flex={1} (as above) so the page fills the available screen space.