Choose a version:

Page

The outer wrapper of the page—including the page title, subtitle, and page-level actions—displayed in a familiar and consistent style that sets expectations about the purpose of the page.

Anchor to pagepropsPageProps

Anchor to title title string required: The text to be used as title.
Anchor to loading loading boolean Default: false: Indicates that the page is in a loading state.

When true, the page shows loading indicators for the UI elements that it is owns. The page is not responsible for the loading indicators of any content that is passed as children.
Anchor to primaryAction primaryAction RemoteFragment: The action grouping, provided as button(s), that is placed in the primary position of the page.
Anchor to primaryActionAccessibilityLabel primaryActionAccessibilityLabel string Default: "More actions": Accessibility label for the primary action grouping. If an accessibility label is not provided, default text is used.
Anchor to primaryActionLabel primaryActionLabel string Default: "More actions": Label for the primary action grouping. If a label is not provided, default text is used.
Anchor to secondaryAction secondaryAction RemoteFragment: The action grouping, provided as button(s), that is placed in the secondary position of the page.
Anchor to subtitle subtitle string: The text to be used as subtitle.

PageProps

loading
Indicates that the page is in a loading state. When `true`, the page shows loading indicators for the UI elements that it is owns. The page is not responsible for the loading indicators of any content that is passed as `children`.
```
boolean
```
primaryAction
The action grouping, provided as button(s), that is placed in the primary position of the page.
```
RemoteFragment
```
primaryActionAccessibilityLabel
Accessibility label for the primary action grouping. If an accessibility label is not provided, default text is used.
```
string
```
primaryActionLabel
Label for the primary action grouping. If a label is not provided, default text is used.
```
string
```
secondaryAction
The action grouping, provided as button(s), that is placed in the secondary position of the page.
```
RemoteFragment
```
subtitle
The text to be used as subtitle.
```
string
```
title
The text to be used as title.
```
string
```

export interface PageProps {
  /**
   * The text to be used as title.
   */
  title: string;

  /**
   * The text to be used as subtitle.
   */
  subtitle?: string;

  /**
   * The action grouping, provided as button(s), that is placed in the primary position of the page.
   */
  primaryAction?: RemoteFragment;

  /**
   * Label for the primary action grouping. If a label is not provided, default text is used.
   *
   * @defaultValue "More actions"
   */
  primaryActionLabel?: string;

  /**
   * Accessibility label for the primary action grouping. If an accessibility label is not provided,
   * default text is used.
   *
   * @defaultValue "More actions"
   */
  primaryActionAccessibilityLabel?: string;

  /**
   * The action grouping, provided as button(s), that is placed in the secondary position of the page.
   */
  secondaryAction?: RemoteFragment;

  /**
   * Indicates that the page is in a loading state.
   *
   * When `true`, the page shows loading indicators for the UI elements that it is owns.
   * The page is not responsible for the loading indicators of any content that is passed as `children`.
   *
   * @defaultValue false
   */
  loading?: boolean;
}

Was this section helpful?

Anchor to buttonprops primaryactionButtonProps primaryAction

Supported props for Buttons used inside Page primaryAction prop.

children only support text.

Anchor to accessibilityLabel accessibilityLabel string: A label used for buyers using assistive technologies. When set, any children supplied to this component will not be announced to screen reader users.
Anchor to disabled disabled boolean Default: false: Disables the button, disallowing any interaction.
Anchor to loading loading boolean Default: false: Replaces content with a loading indicator.
Anchor to loadingLabel loadingLabel string: Accessible label for the loading indicator when user prefers reduced motion. This value is only used if loading is true.
Anchor to onPress onPress () => void: Callback that is run when the button is pressed.
Anchor to overlay overlay RemoteFragment: An overlay component to render when the user interacts with the component.
Anchor to to to string: Destination URL to link to.

Docs_Page_Button_PrimaryAction

accessibilityLabel
A label used for buyers using assistive technologies. When set, any `children` supplied to this component will not be announced to screen reader users.
```
string
```
disabled
Disables the button, disallowing any interaction.
```
boolean
```
loading
Replaces content with a loading indicator.
```
boolean
```
loadingLabel
Accessible label for the loading indicator when user prefers reduced motion. This value is only used if `loading` is true.
```
string
```
onPress
Callback that is run when the button is pressed.
```
() => void
```
overlay
An overlay component to render when the user interacts with the component.
```
RemoteFragment
```
to
Destination URL to link to.
```
string
```

export interface Docs_Page_Button_PrimaryAction
  extends Pick<
    ButtonProps,
    | 'onPress'
    | 'overlay'
    | 'to'
    | 'loading'
    | 'loadingLabel'
    | 'disabled'
    | 'accessibilityLabel'
  > {}

Was this section helpful?

Anchor to buttonprops secondaryactionButtonProps secondaryAction

Supported props for Button used inside Page secondaryAction prop.

children are not supported.
Use accessibilityLabel instead.

Anchor to accessibilityLabel accessibilityLabel string required: A label used for buyers using assistive technologies. Needed because children passed to this component will be discarded.
Anchor to onPress onPress () => void: Callback that is run when the button is pressed.
Anchor to to to string: Destination URL to link to.

Docs_Page_Button_SecondaryAction

accessibilityLabel
A label used for buyers using assistive technologies. Needed because `children` passed to this component will be discarded.
```
string
```
onPress
Callback that is run when the button is pressed.
```
() => void
```
to
Destination URL to link to.
```
string
```

export interface Docs_Page_Button_SecondaryAction
  extends Pick<ButtonProps, 'onPress' | 'to'> {
  /**
   * A label used for buyers using assistive technologies. Needed because `children` passed to this component will be discarded.
   */
  accessibilityLabel: ButtonProps['accessibilityLabel'];
}

Was this section helpful?

Basic Page

import {

Page,

Button,

reactExtension,

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

import React from 'react';

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

function App() {

return (

<Page

title="Order #1411"

subtitle="Confirmed Oct 5"

secondaryAction={<Button accessibilityLabel="Button" onPress={() => {}}/>}

primaryActionLabel="Manage"

primaryAction={

<Button onPress={() => {}}>Buy again</Button>

<Button onPress={() => {}}>Second action</Button>

<Button onPress={() => {}}>Third action</Button>

</>

}

Content

</Page>

);

}

examples

Basic Page

React

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

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

function App() {
  return (
    <Page
      title="Order #1411"
      subtitle="Confirmed Oct 5"
      secondaryAction={<Button accessibilityLabel="Button" onPress={() => {}}/>}
      primaryActionLabel="Manage"
      primaryAction={
        <>
          <Button onPress={() => {}}>Buy again</Button>
          <Button onPress={() => {}}>Second action</Button>
          <Button onPress={() => {}}>Third action</Button>
        </>
      }
    >
      Content
    </Page>
  );
}

JS

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

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

async function renderApp(root, api) {
  const primaryAction = root.createFragment();
  await primaryAction.append(root.createComponent(Button, {onPress: () => {console.log("primary action 1")}}, 'Buy again primary 1'));
  await primaryAction.append(root.createComponent(Button, {onPress: () => {console.log("primary action 2")}}, 'Buy again primary 2'));
  await primaryAction.append(root.createComponent(Button, {onPress: () => {console.log("primary action 3")}}, 'Buy again primary 3'));

  const secondaryAction = root.createFragment();
  await secondaryAction.append(root.createComponent(Button, {accessibilityLabel: 'Button', onPress: () => {}}))

  const page = root.createComponent(
    Page,
    {
      title: "Order #1411",
      subtitle: "Confirmed Oct 5",
      primaryAction,
      primaryActionLabel: "Manage",
      secondaryAction,
      },
    root.createComponent('View', {}, "Content")
  )
  root.append(page);
}

Preview

Anchor to best-practicesBest Practices

Title

Set clear expectations about the purpose and main topic of the page.
Aim for 1-3 words.
Use sentence case.

Subtitle

Use to provide additional context or information that enhances the customer’s understanding of the page.
Use subtitles sparingly and only when they add useful information that is distinct from the title.

Buttons

Use for page-level actions only.
If there is a single primary action for the page, display it as a primary button. Display all other page-level actions as secondary buttons.
See UX guidelines to learn more about the button logic for order actions.

Was this section helpful?