UX for full pages

When you’re designing a full-page extension, follow these best practices to ensure flexibility for merchants.

Anchor to Keep each page focused on one topicKeep each page focused on one topic

Avoid cramming too many topics or jobs to be done into a single full-page extension. When a page is focused on one topic, the page title can set better expectations about the contents of the page. When the page title is clear, it also gives merchants more flexibility to link to the page from navigation or page content, and provide clear labels for those links, resulting in a more intuitive navigation experience.

Anchor to Use a consistent page structureUse a consistent page structure

Use the Page component to achieve a page structure that’s consistent with the other pages in customer accounts. For example, the component supports page title, subtitle, and page-level actions grouped in the upper-right.

If you’re building an index page that contains a list of resources, use the ResourceItem component to be consistent with the Order index page. For example, the component supports an image, description, price, and an actionable button.