Page

Use to build the outer wrapper of a page, including the page title and associated actions.


Examples

Use for detail pages, which should have pagination and breadcrumbs, and also often have several actions.

Drag to resize example
<Page
  breadcrumbs={[
    {content: 'Products'}
  ]}
  title="Jar With Lock-Lid"
  primaryAction={{content: 'Save', disabled: true}}
  secondaryActions={[
    {content: 'Duplicate'},
    {content: 'View on your store'},
  ]}
  pagination={{
    hasPrevious: true,
    hasNext: true,
  }}
>
  <p>Page content</p>
</Page>
Name
Type
Description
title*
string
Page title, in large type
icon
string
App icon, for pages that are part of Shopify apps
breadcrumbs
BreadcrumbProps["breadcrumbs"]
Collection of breadcrumbs
children
React.ReactNode
The contents of the page
fullWidth
boolean
Remove the normal max-width on the page
separator
boolean
Adds a border to the bottom of the page header
secondaryActions
ComplexAction[]
Collection of secondary page-level actions
actionGroups
ActionGroup[]
Collection of page-level groups of secondary actions
primaryAction
DisableableAction
Primary page-level action
pagination
PaginationDescriptor
Page-level pagination

Purpose

Put the merchant first by identifying the problem they face and the component that helps them solve it.

Problem

Merchants need a quick way to understand where they are, where they came from, and what they can do on a page in Shopify.

Solution

Use the page component to provide the outer structure for a page, which creates consistent margins and supports the page title, breadcrumbs and page header actions.


Best Practices

The page component should:

  • Always provide a title for the page header.
  • Always provide breadcrumbs when a page has a parent page.
  • Be organized around a primary activity. If that primary activity is a single action, provide it as a primary button in the page header.
  • Provide other page-level actions as secondary actions in the page header.
  • When the page represents an object of a certain type, provide pagination links to the previous and next object of the same type.

Content guidelines

Title

Titles should:

  • Describe the page in as few words as possible.
  • Be the name of the object type (pluralized) when the page is a list of objects. For a list of orders, the page title should be “Orders”.
  • Not be truncated.

App icon

App icons should:

  • Provide their app icon
  • Only be provided for pages that are part of a Shopify app

Breadcrumbs

The content of each breadcrumb link should be the title of the page to which it links.

Page header actions

Page header action labels should be:

  • Clear and predictable: merchants should be able to anticipate what will happen when they click a page action. Never deceive a merchant by mislabeling an action.

  • Action-led: they should always lead with a strong verb that encourages action. To provide enough context to merchants, use the {verb}+{noun} format.

  • Create order

  • View in Postmates

  • Create

  • Postmates deliveries

  • Short: for secondary actions, when the noun represents the same object as the page itself, a verb alone may be used. If there is ambiguity (such as with the verb “Cancel”), always use the {verb}+{noun} format.

    In the context of the orders list page:

  • Import

  • Export

  • Import orders

  • Export orders

  • Scannable: avoid unnecessary words and articles such as the, an, or a.

Do

Add menu item

Don’t

Add a menu item