Heading

Deprecated

Product subscription app extensions won't be supported as of December 3, 2025. You should migrate existing product subscription app extensions to purchase options extensions.

Headings are used as the titles of each major section of an extension.

import {extend, Heading} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {

const heading = root.createComponent(Heading, {

id: 'profile_heading',

level: 3,

});

const headingText = root.createText('This is a Title');

heading.appendChild(headingText);

root.appendChild(heading);

root.mount();

});

import React from 'react';

import {extend, render, Heading} from '@shopify/admin-ui-extensions-react';

function App() {

return (

Heading

</Heading>

);

}

extend(

'Playground',

render(() => <App />),

);

import {extend, Heading} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {
  const heading = root.createComponent(Heading, {
    id: 'profile_heading',
    level: 3,
  });

  const headingText = root.createText('This is a Title');
  heading.appendChild(headingText);
  root.appendChild(heading);

  root.mount();
});

import React from 'react';
import {extend, render, Heading} from '@shopify/admin-ui-extensions-react';

function App() {
  return (
    <Heading id="profile_heading" level={3}>
      Heading
    </Heading>
  );
}

extend(
  'Playground',
  render(() => <App />),
);

Anchor to PropsProps

optional = ?

Name	Type	Description
level?	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	@default 2

Anchor to GuidelinesGuidelines

📱 Headings should clearly describe the section of interface they refer to
📱 Use Headings to highlight the most important concept or piece of information merchants need to know

✅ Do	🛑 Don't
Use headings to support the hierarchy and structure of the page	Nest too many Headings in one area
Place Headings at the top of a page or section they refer to

For more guidelines, refer to Polaris' Text best practices.

Was this page helpful?