Index
The index layout lets merchants view and manage all their objects at once in a table format. They can filter, sort and do quick actions on their objects. To prevent tables from becoming visually cluttered, reveal actions only when the row is hovered over or selected
| Used to | Examples |
|---|---|
| View all objects at once | Products, orders, customers, discounts |
| Perform bulk actions | Delete products, pause/activate campaigns |
This pattern uses Badge, Box, Button, Clickable, Grid, Heading, Image, Link, Paragraph, Section, Stack, and Table components.
Design guidelines
Design your index page so users can organize and take action on resource objects.
Navigation
- Users must be able to return to the previous page without using the browser button. To achieve this, your app can provide breadcrumbs or a Back button on the page.
- Offer users clear and predictable action labels.
Layout
- Design your app to be responsive and adapt to different screen sizes and devices. This ensures a seamless user experience across various platforms.
- For resource index pages, use a full-width page. This is helpful when users are dealing with lists of data that have many columns.
Was this section helpful?
Index
// ===
// Index page pattern
// ===
export default function IndexPage() {
return (
<s-page>
{/* === */}
{/* Title Bar */}
{/* Note: ui-title-bar requires AppBridge to render correctly */}
{/* === */}
<ui-title-bar title="Puzzles">
<button variant="primary">Create puzzle</button>
<button>Export puzzles</button>
<button>Import puzzles</button>
</ui-title-bar>
{/* === */}
{/* Empty state */}
{/* This should only be visible if the merchant has not created any puzzles yet. */}
{/* === */}
<s-section accessibilityLabel="Empty state section">
<s-grid gap="base" justifyItems="center" paddingBlock="large-400">
<s-box maxInlineSize="200px" maxBlockSize="200px">
<s-image
aspectRatio="1/0.5"
src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
alt="A stylized graphic of four characters, each holding a puzzle piece"
/>
</s-box>
<s-grid
justifyItems="center"
maxBlockSize="450px"
maxInlineSize="450px"
>
<s-heading>Start creating puzzles</s-heading>
