HeadingGroup

Anchor to ExamplesExamples

Anchor to Group related heading contentGroup related heading content

Create a two-level title hierarchy for accessible screen reader navigation. This example uses HeadingGroup to nest a subsection under a parent Heading, so screen readers announce the correct levels.

Group related heading content

Group related heading content

ReactTS

Copy

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

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

function App() {

return (

<BlockStack>

<Heading>Warehouse integration</Heading>

<HeadingGroup>

<Heading>Sync configuration</Heading>

<Text>

Configure how product data flows between Shopify and your warehouse

management system.

</Text>

</HeadingGroup>

</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

25

26

27

28

29

30

31

32

33

34

35

36

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

export default extension(

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

(root) => {

const stack = root.createComponent(BlockStack);

const h1 = root.createComponent(

Heading,

{},

'Warehouse integration',

);

const group = root.createComponent(HeadingGroup);

const h2 = root.createComponent(

Heading,

{},

'Sync configuration',

);

const detail = root.createComponent(

Text,

{},

'Configure how product data flows between Shopify and your warehouse management system.',

);

group.appendChild(h2);

group.appendChild(detail);

stack.appendChild(h1);

stack.appendChild(group);

root.appendChild(stack);

},

);

React

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

function App() {

  return (
    <BlockStack>
      <Heading>Warehouse integration</Heading>
      <HeadingGroup>
        <Heading>Sync configuration</Heading>
        <Text>
          Configure how product data flows between Shopify and your warehouse
          management system.
        </Text>
      </HeadingGroup>
    </BlockStack>
  );
}

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

TS

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

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

    const stack = root.createComponent(BlockStack);

    const h1 = root.createComponent(
      Heading,
      {},
      'Warehouse integration',
    );

    const group = root.createComponent(HeadingGroup);

    const h2 = root.createComponent(
      Heading,
      {},
      'Sync configuration',
    );

    const detail = root.createComponent(
      Text,
      {},
      'Configure how product data flows between Shopify and your warehouse management system.',
    );

    group.appendChild(h2);
    group.appendChild(detail);

    stack.appendChild(h1);
    stack.appendChild(group);
    root.appendChild(stack);
  },
);

Anchor to Best practicesBest practices

• Use HeadingGroup to build document structure: Nest HeadingGroup components to create a logical heading hierarchy rather than manually setting heading sizes. This ensures assistive technologies can navigate the content correctly.
• Choose HeadingGroup or Section per nesting layer: Both HeadingGroup and Section increment the heading level, so use one or the other at each layer to avoid double-incrementing. Use Section when you want a visible content grouping, and HeadingGroup when you only need to adjust the heading hierarchy.
• Keep nesting shallow: Avoid deeply nesting HeadingGroup components beyond three or four levels. Deeply nested headings (h5, h6) are rarely useful and can signal that the content structure needs simplification.

Anchor to LimitationsLimitations

• Heading levels stop incrementing at h6. Nesting HeadingGroup components beyond six levels will still render h6 headings.
• Section also increments the heading level, so you typically choose one or the other for a given nesting layer—using both together will increment the level twice.