Heading groups provide the document structure that accessibility technology uses to navigate the checkout. When you use a heading, any children related to that heading should be nested in a heading group. This ensures that any nested headings will use a semantically-appropriate heading level. --- ### Example ![headinggroup](/assets/api/checkout-extensions/post-purchase/components/headinggroup.png) ```ts?title: "JS" import {extend, HeadingGroup, Heading, View} from '@shopify/post-purchase-ui-extensions'; extend('Checkout::PostPurchase::Render', (root) => { const headingGroup = root.createComponent(View, undefined, [ root.createComponent(Heading, undefined, 'Hi John Doe! (h1)'), root.createComponent(HeadingGroup, undefined, [ root.createComponent(Heading, undefined, 'Your account (h2)'), root.createComponent(HeadingGroup, undefined, [ root.createComponent(Heading, undefined, 'Change Password (h3)'), ]), ]), ]); root.appendChild(headingGroup); }); ``` ```tsx?title: "React" import { render, HeadingGroup, Heading, View, } from '@shopify/post-purchase-ui-extensions-react'; render('Checkout::PostPurchase::Render', () => ); function App() { return ( Hi John Doe! (h1) Your account (h2) Change Password (h3) ); } ```