HeadingGroup

Heading group controls the heading level of headings nested within it, like H1, H2, H3.

Use a heading group whenever you use a heading to ensure the experience is the same for buyers using screen readers. When using a heading, any children related to that heading should be nested within the same heading group.

Anchor to ExamplesExamples

Anchor to Basic HeadingGroupBasic HeadingGroup

Basic HeadingGroup

Basic HeadingGroup

ReactJS

Copy

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

import {

reactExtension,

HeadingGroup,

Heading,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

'purchase.checkout.block.render',

() => <Extension />,

);

function Extension() {

return (

<>

<Heading>Heading <h1></Heading>

<HeadingGroup>

<Heading>Heading <h2></Heading>

<HeadingGroup>

<Heading>Heading <h3></Heading>

</HeadingGroup>

</HeadingGroup>

</>

);

}

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

import {

extension,

HeadingGroup,

Heading,

View,

} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {

const headingGroup = root.createComponent(View, undefined, [

root.createComponent(Heading, undefined, 'Heading <h1>'),

root.createComponent(HeadingGroup, undefined, [

root.createComponent(Heading, undefined, 'Heading <h2>'),

root.createComponent(HeadingGroup, undefined, [

root.createComponent(Heading, undefined, 'Heading <h3>'),

]),

]),

]);

root.appendChild(headingGroup);

});

React

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

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <>
      <Heading>Heading <h1></Heading>

      <HeadingGroup>
        <Heading>Heading <h2></Heading>

        <HeadingGroup>
          <Heading>Heading <h3></Heading>
        </HeadingGroup>
      </HeadingGroup>
    </>
  );
}

JS

import {
  extension,
  HeadingGroup,
  Heading,
  View,
} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const headingGroup = root.createComponent(View, undefined, [
    root.createComponent(Heading, undefined, 'Heading <h1>'),
    root.createComponent(HeadingGroup, undefined, [
      root.createComponent(Heading, undefined, 'Heading <h2>'),
      root.createComponent(HeadingGroup, undefined, [
        root.createComponent(Heading, undefined, 'Heading <h3>'),
      ]),
    ]),
  ]);

  root.appendChild(headingGroup);
});

Anchor to Best practicesBest practices

• Use this component to create a content hierarchy within the document outline.

Anchor to RelatedRelated

ComponentHeading

ComponentText

ComponentTextBlock