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

title

string

required

The text to be used as title.

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.

primaryAction

RemoteFragment

The action grouping, provided as button(s), that is placed in the primary position of the page.

primaryActionAccessibilityLabel

string

Default: "More actions"

Accessibility label for the primary action grouping. If an accessibility label is not provided, default text is used.

primaryActionLabel

string

Default: "More actions"

Label for the primary action grouping. If a label is not provided, default text is used.

secondaryAction

RemoteFragment

The action grouping, provided as button(s), that is placed in the secondary position of the page.

subtitle

string

The text to be used as subtitle.

Was this section helpful?

Anchor to buttonprops primaryactionButtonProps primaryAction

Supported props for Buttons used inside Page primaryAction prop.

children only support text.

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.

disabled

boolean

Default: false

Disables the button, disallowing any interaction.

loading

boolean

Default: false

Replaces content with a loading indicator.

loadingLabel

string

Accessible label for the loading indicator when user prefers reduced motion. This value is only used if loading is true.

onPress

() => void

Callback that is run when the button is pressed.

overlay

RemoteFragment

An overlay component to render when the user interacts with the component.

to

string

Destination URL to link to.

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.

accessibilityLabel

string

required

A label used for buyers using assistive technologies. Needed because children passed to this component will be discarded.

onPress

() => void

Callback that is run when the button is pressed.

to

string

Destination URL to link to.

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>

);

}

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?