---
title: Heading
description: Headings are used as the titles of each major section of an extension.
api_name: product-subscription-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/heading
  md: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/heading.md
---

ExpandOn this page

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/heading.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/heading.md#guidelines)

# Heading

Deprecated

Product subscription app extensions won't be supported as of February 9, 2026. You should migrate existing product subscription app extensions to [purchase options extensions](https://shopify.dev/docs/apps/build/purchase-options/purchase-options-extensions).

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

##### JavaScript

```ts
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();
});
```

##### React

```tsx
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 />),
);
```

***

## Props

optional = ?

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

***

## Guidelines

* 📱 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](https://polaris.shopify.com/components/typography/text#best-practices).

***

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/heading.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/heading.md#guidelines)