Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Choose a version:

Heading

The heading component controls the visual style of headings. Use heading to introduce major sections like order details, profile settings, or account preferences.

Unlike HTML headings, you don't explicitly specify the heading level. Nest headings within HeadingGroup to control the document outline for assistive technologies.

Support

Targets (25)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the Heading component.

Anchor to accessibilityRole accessibilityRole 'presentation': Sets the semantic meaning of the heading for assistive technologies. When set, the role overrides the default heading semantics.

presentation: Strips the heading level, preventing the element's implicit ARIA semantics from being exposed to the accessibility tree.
Anchor to id id string: A unique identifier for the component. Typically used to make the heading a target that another component can refer to in order to provide an alternative accessibility label.
Anchor to inlineAlignment inlineAlignment: Aligns the heading text along the inline axis (horizontal in standard writing modes).
Anchor to level level: The visual level of the heading. When not set, the heading will use its "automatic" heading level, which is determined by the level of nesting within ancestor HeadingGroups. No matter what value you provide here, the semantic level (e.g., how the heading contributes to the document outline) is determined exclusively by the "automatic" heading level.

InlineAlignment

Controls how content is aligned along the inline axis (horizontal in standard writing modes). - `'start'`: Aligns content to the inline start of the container. - `'center'`: Centers content along the inline axis. - `'end'`: Aligns content to the inline end of the container.

'start' | 'center' | 'end'

Level

1 | 2 | 3 | 4

Anchor to ExamplesExamples

Anchor to Display a section headingDisplay a section heading

Introduce a major section with a styled heading. This example renders a heading component with default styling.

Display a section heading

A heading component displaying a section title

Display a section heading

import {

reactExtension,

Heading,

} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(

'customer-account.page.render',

() => <Extension />,

);

function Extension() {

return <Heading>Store name</Heading>;

}

import {extension, Heading} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {

const heading = root.createComponent(Heading, undefined, 'Store name');

root.appendChild(heading);

});

React

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

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

function Extension() {
  return <Heading>Store name</Heading>;
}

JS

import {extension, Heading} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {
  const heading = root.createComponent(Heading, undefined, 'Store name');

  root.appendChild(heading);
});

Anchor to Best practicesBest practices

Nest within HeadingGroup: Always wrap headings in a HeadingGroup to maintain proper document outline for screen readers.
Keep headings concise: Use short, scannable text that describes the section content.
Don't skip visual levels: Maintain consistent heading hierarchy for readability.

Was this page helpful?