Page
Skeleton page is used with other skeleton loading components to provide a low fidelity representation of the user interface (UI) before content appears on the page. It improves load times perceived by merchants.
Props
No props found for this component, run `yarn gen:docs` to generate component meta first.
Slots
No slots found for this component, run `yarn gen:docs` to generate component meta first.
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 merchants 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.
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:
- Scannable: avoid unnecessary words and articles such as the, an, or a.
Related components
- To lay out the content within a page, use the layout component
- To add pagination within the context of a list or other page content, use the pagination component
- To add primary and secondary calls to action at the bottom of a page, see the page actions component