Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Choose a version:

Section

The Section component creates a visual and semantic grouping for related content, with an optional heading and adjustable padding. Use Section to organize your extension into distinct content areas that merchants can scan and understand at a glance.

Section automatically increments the heading level for any Heading components nested inside it, ensuring a correct document outline. Nest Section components to create deeper heading hierarchies without manually managing levels.

Support

Targets (46)

Supported targets

Anchor to PropertiesProperties

Props for the Section component, which groups related content under an optional heading. Sections provide both visual and semantic structure, making it easier for users (and assistive technologies) to navigate through distinct areas of an extension.

Anchor to accessibilityLabel accessibilityLabel string: A label that describes the section for assistive technologies such as screen readers. When no heading prop is provided, then you must provide an accessibilityLabel so that assistive technologies can announce meaningful context about the section to users.
Anchor to heading heading string: A visible title displayed at the top of the section that describes its content. When provided, this heading also serves as the accessible label for the section unless accessibilityLabel is explicitly set.
Anchor to padding padding 'base' | 'none' Default: 'base': The padding on all edges of the section.

base: Applies padding that's appropriate for the context. This might result in no padding if Shopify determines that's the right design decision for a particular placement.

none: Removes all padding from the section. This is useful when child elements need to span to the section's edges (for example, a full-width image). Use Box or another layout component to restore padding for the remaining content.

Anchor to ExamplesExamples

Anchor to Group content with a headingGroup content with a heading

Group warehouse location details under a labeled heading. This example uses Section with a heading prop to bundle a warehouse name, storage slot, and stock count into one content area.

Group content with a heading

import {reactExtension, Section, Text, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

return (

<Text>Warehouse: East Coast — New York</Text>

<Text>Storage slot: A-42</Text>

<Text>Units in stock: 247</Text>

</Section>

</BlockStack>

);

}

export default reactExtension(

'admin.product-details.block.render',

() => <App />,

);

import {extension, Section, Text, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(

'admin.product-details.block.render',

(root) => {

const stack = root.createComponent(BlockStack);

const section = root.createComponent(Section, {

heading: 'Inventory details',

});

const warehouse = root.createComponent(Text, {}, 'Warehouse: East Coast — New York');

const slot = root.createComponent(Text, {}, 'Storage slot: A-42');

const quantity = root.createComponent(Text, {}, 'Units in stock: 247');

section.appendChild(warehouse);

section.appendChild(slot);

section.appendChild(quantity);

stack.appendChild(section);

root.appendChild(stack);

);

React

import {reactExtension, Section, Text, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

  return (
    <BlockStack>
      <Section heading="Inventory details">
        <Text>Warehouse: East Coast — New York</Text>
        <Text>Storage slot: A-42</Text>
        <Text>Units in stock: 247</Text>
      </Section>
    </BlockStack>
  );
}

export default reactExtension(
  'admin.product-details.block.render',
  () => <App />,
);

TS

import {extension, Section, Text, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
  'admin.product-details.block.render',
  (root) => {

    const stack = root.createComponent(BlockStack);

    const section = root.createComponent(Section, {
      heading: 'Inventory details',
    });

    const warehouse = root.createComponent(Text, {}, 'Warehouse: East Coast — New York');
    const slot = root.createComponent(Text, {}, 'Storage slot: A-42');
    const quantity = root.createComponent(Text, {}, 'Units in stock: 247');

    section.appendChild(warehouse);
    section.appendChild(slot);
    section.appendChild(quantity);

    stack.appendChild(section);
    root.appendChild(stack);
  },
);

Anchor to Nest sections for content hierarchyNest sections for content hierarchy

Nest sections to create multi-level content grouping with automatic heading level adjustment. This example places a "Safety certifications" section inside a "Product compliance" parent section, with heading levels adapting to reflect the hierarchy.

Nest sections for content hierarchy

import {reactExtension, Section, Text, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

return (

<Text>Regulatory status for product distribution.</Text>

<Text>UL Listed — Class II</Text>

<Text>CE Marking — Approved</Text>

<Text>FCC Part 15 — Compliant</Text>

</Section>

</BlockStack>

);

}

export default reactExtension(

'admin.product-details.block.render',

() => <App />,

);

import {extension, Section, Text, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(

'admin.product-details.block.render',

(root) => {

const stack = root.createComponent(BlockStack);

const outer = root.createComponent(Section, {

heading: 'Product compliance',

});

const intro = root.createComponent(

Text,

{},

'Regulatory status for product distribution.',

);

const inner = root.createComponent(Section, {

heading: 'Safety certifications',

});

const cert1 = root.createComponent(Text, {}, 'UL Listed — Class II');

const cert2 = root.createComponent(Text, {}, 'CE Marking — Approved');

const cert3 = root.createComponent(Text, {}, 'FCC Part 15 — Compliant');

inner.appendChild(cert1);

inner.appendChild(cert2);

inner.appendChild(cert3);

outer.appendChild(intro);

outer.appendChild(inner);

stack.appendChild(outer);

root.appendChild(stack);

);

React

import {reactExtension, Section, Text, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

  return (
    <BlockStack>
      <Section heading="Product compliance">
        <Text>Regulatory status for product distribution.</Text>
        <Section heading="Safety certifications">
          <Text>UL Listed — Class II</Text>
          <Text>CE Marking — Approved</Text>
          <Text>FCC Part 15 — Compliant</Text>
        </Section>
      </Section>
    </BlockStack>
  );
}

export default reactExtension(
  'admin.product-details.block.render',
  () => <App />,
);

TS

import {extension, Section, Text, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
  'admin.product-details.block.render',
  (root) => {

    const stack = root.createComponent(BlockStack);

    const outer = root.createComponent(Section, {
      heading: 'Product compliance',
    });

    const intro = root.createComponent(
      Text,
      {},
      'Regulatory status for product distribution.',
    );

    const inner = root.createComponent(Section, {
      heading: 'Safety certifications',
    });

    const cert1 = root.createComponent(Text, {}, 'UL Listed — Class II');
    const cert2 = root.createComponent(Text, {}, 'CE Marking — Approved');
    const cert3 = root.createComponent(Text, {}, 'FCC Part 15 — Compliant');

    inner.appendChild(cert1);
    inner.appendChild(cert2);
    inner.appendChild(cert3);

    outer.appendChild(intro);
    outer.appendChild(inner);

    stack.appendChild(outer);
    root.appendChild(stack);
  },
);

Anchor to Add accessible section descriptionsAdd accessible section descriptions

Provide screen readers with a more descriptive section context than the visible heading alone using accessibilityLabel. This example labels a shipping configuration section with form fields, so assistive technology announces the full purpose of the form group.

Add accessible section descriptions

import {reactExtension, Section, TextField, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

return (

<Section

heading="Shipping configuration"

accessibilityLabel="Configure shipping dimensions and weight for this product"

</Section>

</BlockStack>

);

}

export default reactExtension(

'admin.product-details.action.render',

() => <App />,

);

import {extension, Section, TextField, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(

'admin.product-details.action.render',

(root) => {

const stack = root.createComponent(BlockStack);

const shippingSection = root.createComponent(Section, {

heading: 'Shipping configuration',

accessibilityLabel: 'Configure shipping dimensions and weight for this product',

});

const weight = root.createComponent(TextField, {

label: 'Weight (kg)',

});

const length = root.createComponent(TextField, {

label: 'Length (cm)',

});

const width = root.createComponent(TextField, {

label: 'Width (cm)',

});

shippingSection.appendChild(weight);

shippingSection.appendChild(length);

shippingSection.appendChild(width);

stack.appendChild(shippingSection);

root.appendChild(stack);

);

React

import {reactExtension, Section, TextField, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

  return (
    <BlockStack>
      <Section
        heading="Shipping configuration"
        accessibilityLabel="Configure shipping dimensions and weight for this product"
      >
        <TextField label="Weight (kg)" name="weight" />
        <TextField label="Length (cm)" name="length" />
        <TextField label="Width (cm)" name="width" />
      </Section>
    </BlockStack>
  );
}

export default reactExtension(
  'admin.product-details.action.render',
  () => <App />,
);

TS

import {extension, Section, TextField, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
  'admin.product-details.action.render',
  (root) => {

    const stack = root.createComponent(BlockStack);

    const shippingSection = root.createComponent(Section, {
      heading: 'Shipping configuration',
      accessibilityLabel: 'Configure shipping dimensions and weight for this product',
    });

    const weight = root.createComponent(TextField, {
      label: 'Weight (kg)',
      name: 'weight',
    });
    const length = root.createComponent(TextField, {
      label: 'Length (cm)',
      name: 'length',
    });
    const width = root.createComponent(TextField, {
      label: 'Width (cm)',
      name: 'width',
    });

    shippingSection.appendChild(weight);
    shippingSection.appendChild(length);
    shippingSection.appendChild(width);

    stack.appendChild(shippingSection);
    root.appendChild(stack);
  },
);

Anchor to Best practicesBest practices

Use Section to group related content: Wrap related fields, text, or actions in a Section with a descriptive heading to create clear visual and semantic groupings.
Provide an accessibility label when there is no heading: If the section doesn't have a visible heading, provide an accessibility label so screen reader users understand what the section contains.
Nest Section components for deeper structure: Each nested Section increments the heading level. This creates a natural document outline (h1 → h2 → h3) without manually managing heading levels.

Anchor to LimitationsLimitations

Section's visual appearance is controlled by Shopify and can't be customized. It might render differently in different component contexts (AdminBlock versus AdminAction).
The heading level auto-increment stops at h6. Nesting sections beyond six levels deep will still render h6 headings.

Was this page helpful?