Heading

Anchor to PropertiesProperties

1 | 2 | 3 | 4 | 5 | 6

Anchor to ExamplesExamples

Anchor to Label extension sectionsLabel extension sections

Add a title and description to a product analytics block. This example renders a Heading above descriptive Text inside a BlockStack.

Label extension sections

Label extension sections

ReactTS

Copy

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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

function App() {

return (

<BlockStack>

<Heading>Product analytics</Heading>

<Text>

View real-time performance metrics synced from your analytics provider.

</Text>

</BlockStack>

);

}

export default reactExtension(

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

() => <App />,

);

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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

export default extension(

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

(root) => {

const stack = root.createComponent(BlockStack);

const heading = root.createComponent(

Heading,

{},

'Product analytics',

);

const detail = root.createComponent(

Text,

{},

'View real-time performance metrics synced from your analytics provider.',

);

stack.appendChild(heading);

stack.appendChild(detail);

root.appendChild(stack);

},

);

React

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

function App() {

  return (
    <BlockStack>
      <Heading>Product analytics</Heading>
      <Text>
        View real-time performance metrics synced from your analytics provider.
      </Text>
    </BlockStack>
  );
}

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

TS

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

export default extension(
  'admin.product-details.block.render',
  (root) => {
    const stack = root.createComponent(BlockStack);

    const heading = root.createComponent(
      Heading,
      {},
      'Product analytics',
    );

    const detail = root.createComponent(
      Text,
      {},
      'View real-time performance metrics synced from your analytics provider.',
    );

    stack.appendChild(heading);
    stack.appendChild(detail);
    root.appendChild(stack);
  },
);

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

function App() {

  return (
    <BlockStack>
      <Heading size={2}>Warehouse integration</Heading>
      <Text>
        Manage inventory sync and fulfillment settings for this product.
      </Text>
      <Heading size={3}>Sync history</Heading>
      <Text>
        Last synced 15 minutes ago — 3 variants updated successfully.
      </Text>
    </BlockStack>
  );
}

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

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

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

    const stack = root.createComponent(BlockStack);

    const primary = root.createComponent(
      Heading,
      {size: 2},
      'Warehouse integration',
    );

    const section = root.createComponent(
      Text,
      {},
      'Manage inventory sync and fulfillment settings for this product.',
    );

    const sub = root.createComponent(
      Heading,
      {size: 3},
      'Sync history',
    );

    const detail = root.createComponent(
      Text,
      {},
      'Last synced 15 minutes ago — 3 variants updated successfully.',
    );

    stack.appendChild(primary);
    stack.appendChild(section);
    stack.appendChild(sub);
    stack.appendChild(detail);
    root.appendChild(stack);
  },
);

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

function App() {

  return (
    <BlockStack>
      <Section heading="Custom fields">
        <Heading id="metafields-heading">Metafield values</Heading>
        <Text>
          These custom fields are synced with your external product information
          management system.
        </Text>
      </Section>
    </BlockStack>
  );
}

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

import {extension, Heading, 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: 'Custom fields'},
    );

    const heading = root.createComponent(
      Heading,
      {id: 'metafields-heading'},
      'Metafield values',
    );

    const description = root.createComponent(
      Text,
      {},
      'These custom fields are synced with your external product information management system.',
    );

    section.appendChild(heading);
    section.appendChild(description);

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

Anchor to Best practicesBest practices

• Let the heading level be determined automatically: Wrap Heading components in HeadingGroup or Section components to produce a logical heading hierarchy. Avoid manually setting size to simulate heading levels.
• Use one primary heading per section: Each Section or HeadingGroup should typically contain one Heading that describes its content. Multiple headings at the same level within a single section can confuse screen reader users.
• Keep headings concise: Write headings that clearly and briefly describe the section content. Merchants scan headings to find relevant sections, so short, descriptive titles work best.
• Don't skip heading levels: Use nested HeadingGroup or Section components to create a natural hierarchy (h1 → h2 → h3). Skipping levels (h1 → h3) makes the document outline confusing for assistive technologies.

Anchor to LimitationsLimitations

• The size prop controls the visual size of the heading but not the semantic level. The rendered heading level (h1–h6) is determined by the nesting depth of parent HeadingGroup and Section components. This means a visually large heading might render as an h3 if nested inside two HeadingGroup components.
• The maximum heading level is h6. Further nesting beyond six levels of HeadingGroup or Section components will still render as h6.
• Heading doesn't support font weight, color, or alignment props. It always renders with the default heading style for its level. For inline text with custom typographic styling, use the Text component.