Heading
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 screen reader users. When using a heading, any children related to that heading should be nested within the same heading group.
Was this section helpful?
Basic HeadingGroup
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>
</>
);
}
Preview
Anchor to best-practicesBest Practices
- Use this component to create a content hierarchy within the document outline.
Was this section helpful?
