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:

Order index

Anchor to Order index targetsOrder index targets

Use these targets for order index.

Anchor to Order Index Announcement ,[object Object]Order Index Announcement target

customer-account.order-index.announcement.render

A static extension target that is rendered on top of the Order Index page as a dismissable announcement.

Support

Components (63)

APIs (13)

Anchor to ExamplesExamples

Examples

import {

reactExtension,

Text,

useApi,

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

export default reactExtension(

'customer-account.order-index.announcement.render',

() => <Extension />,

);

function Extension() {

const {announcement} = useApi();

return (

<Text>

Free shipping on orders over $50.{' '}

<Text

appearance="accent"

onPress={() => announcement.close()}

Dismiss

</Text>

);

}

Examples

Customer account order index announcement extension example

React

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

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

function Extension() {
  const {announcement} = useApi();

  return (
    <Text>
      Free shipping on orders over $50.{' '}
      <Text
        appearance="accent"
        onPress={() => announcement.close()}
      >
        Dismiss
      </Text>
    </Text>
  );
}

Javascript

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

export default extension(
  'customer-account.order-index.announcement.render',
  (root, {announcement}) => {
    const dismiss = root.createComponent(
      Text,
      {
        appearance: 'accent',
        onPress: () => announcement.close(),
      },
      'Dismiss',
    );

    const content = root.createComponent(
      Text,
      {},
      'Free shipping on orders over $50. ',
      dismiss,
    );

    root.appendChild(content);
  },
);

Anchor to Order Index Block ,[object Object]Order Index Block target

customer-account.order-index.block.render

A block extension target that renders exclusively on the Order Index page in customer accounts. Merchants can choose to place this extension in any of the supported locations. To preview your extension in each supported location, use the placement reference for that location as a URL parameter.

Support

Components (63)

APIs (13)

Anchor to ExamplesExamples

Examples

import {

reactExtension,

Banner,

Text,

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

export default reactExtension(

'customer-account.order-index.block.render',

() => <Extension />,

);

function Extension() {

return (

<Text>

real-time updates on your orders.

</Text>

</Banner>

);

}

Examples

Customer account order index extension example

React

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

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

function Extension() {
  return (
    <Banner title="Get order updates">
      <Text>
        Sign up for SMS notifications to receive
        real-time updates on your orders.
      </Text>
    </Banner>
  );
}

Javascript

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

export default extension(
  'customer-account.order-index.block.render',
  (root) => {
    const text = root.createComponent(
      Text,
      {},
      'Sign up for SMS notifications to receive real-time updates on your orders.',
    );

    const banner = root.createComponent(
      Banner,
      {title: 'Get order updates'},
      text,
    );

    root.appendChild(banner);
  },
);

Was this page helpful?

Order index

Anchor to Order index targetsOrder index targets

Anchor to Order Index Announcement ,[object Object]Order Index Announcement target

Supported components

Available APIs

Supported components

Available APIs

Anchor to ExamplesExamples

Anchor to Order Index Block ,[object Object]Order Index Block target

Supported components

Available APIs

Supported components

Available APIs

Anchor to ExamplesExamples