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

Preview of the index pattern

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>

examples

Index

JSX

// ===
// 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>
            <s-paragraph>
              Create and manage your collection of puzzles for players to enjoy.
            </s-paragraph>
            <s-stack
              gap="small-200"
              justifyContent="center"
              padding="base"
              paddingBlockEnd="none"
              direction="inline"
            >
              <s-button aria-label="Learn more about creating puzzles">
                Learn more
              </s-button>
              <s-button variant="primary" aria-label="Add a new puzzle">
                Create puzzle
              </s-button>
            </s-stack>
          </s-grid>
        </s-grid>
      </s-section>

      {/* === */}
      {/* Table */}
      {/* This should only be visible if the merchant has created one or more puzzles. */}
      {/* === */}
      <s-section padding="none" accessibilityLabel="Puzzles table section">
        <s-table fullwidth>
          <s-table-header-row>
            <s-table-header listSlot="primary">Puzzle</s-table-header>
            <s-table-header>Type</s-table-header>
            <s-table-header>Created</s-table-header>
            <s-table-header>Status</s-table-header>
          </s-table-header-row>
          <s-table-body>
            <s-table-row>
              <s-table-cell>
                <s-stack direction="inline" gap="small" alignItems="center">
                  <s-clickable
                    href="/app/details"
                    accessibilityLabel="Mountain View puzzle thumbnail"
                    border="base"
                    borderRadius="base"
                    overflow="hidden"
                    inlineSize="40px"
                    blockSize="40px"
                  >
                    <s-image
                      objectFit="cover"
                      src="https://picsum.photos/id/29/80/80"
                    ></s-image>
                  </s-clickable>
                  <s-link href="/app/details">Mountain View</s-link>
                </s-stack>
              </s-table-cell>
              <s-table-cell>16-piece</s-table-cell>
              <s-table-cell>Today</s-table-cell>
              <s-table-cell>
                <s-badge color="base" tone="success">
                  Active
                </s-badge>
              </s-table-cell>
            </s-table-row>
            <s-table-row>
              <s-table-cell>
                <s-stack direction="inline" gap="small" alignItems="center">
                  <s-clickable
                    href="/app/details"
                    accessibilityLabel="Ocean Sunset puzzle thumbnail"
                    border="base"
                    borderRadius="base"
                    overflow="hidden"
                    inlineSize="40px"
                    blockSize="40px"
                  >
                    <s-image
                      objectFit="cover"
                      src="https://picsum.photos/id/12/80/80"
                    ></s-image>
                  </s-clickable>
                  <s-link href="/app/details">Ocean Sunset</s-link>
                </s-stack>
              </s-table-cell>
              <s-table-cell>9-piece</s-table-cell>
              <s-table-cell>Yesterday</s-table-cell>
              <s-table-cell>
                <s-badge color="base" tone="success">
                  Active
                </s-badge>
              </s-table-cell>
            </s-table-row>
            <s-table-row>
              <s-table-cell>
                <s-stack direction="inline" gap="small" alignItems="center">
                  <s-clickable
                    href="/app/details"
                    accessibilityLabel="Forest Animals puzzle thumbnail"
                    border="base"
                    borderRadius="base"
                    overflow="hidden"
                    inlineSize="40px"
                    blockSize="40px"
                  >
                    <s-image
                      objectFit="cover"
                      src="https://picsum.photos/id/324/80/80"
                    ></s-image>
                  </s-clickable>
                  <s-link href="/app/details">Forest Animals</s-link>
                </s-stack>
              </s-table-cell>
              <s-table-cell>25-piece</s-table-cell>
              <s-table-cell>Last week</s-table-cell>
              <s-table-cell>
                <s-badge color="base" tone="neutral">
                  Draft
                </s-badge>
              </s-table-cell>
            </s-table-row>
            {/* Add more rows as needed here */}
            {/* If more than 100 rows are needed, index page tables should use the paginate, hasPreviousPage, hasNextPage, onPreviousPage, and onNextPage attributes to display and handle pagination) */}
          </s-table-body>
        </s-table>
      </s-section>
    </s-page>
  );
}

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script>
    <title>Pattern</title>
  </head>
  <body>
    <!-- === -->
    <!-- Index page pattern -->
    <!-- === -->
    <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>
            <s-paragraph>
              Create and manage your collection of puzzles for players to enjoy.
            </s-paragraph>
            <s-stack
              gap="small-200"
              justifyContent="center"
              padding="base"
              paddingBlockEnd="none"
              direction="inline"
            >
              <s-button aria-label="Learn more about creating puzzles"> Learn more </s-button>
              <s-button variant="primary" aria-label="Add a new puzzle"> Create puzzle </s-button>
            </s-stack>
          </s-grid>
        </s-grid>
      </s-section>
      <!-- === -->
      <!-- Table -->
      <!-- This should only be visible if the merchant has created one or more puzzles. -->
      <!-- === -->
      <s-section padding="none" accessibilityLabel="Puzzles table section">
        <s-table fullwidth>
          <s-table-header-row>
            <s-table-header listSlot="primary">Puzzle</s-table-header>
            <s-table-header>Type</s-table-header>
            <s-table-header>Created</s-table-header>
            <s-table-header>Status</s-table-header>
          </s-table-header-row>
          <s-table-body>
            <s-table-row>
              <s-table-cell>
                <s-stack direction="inline" gap="small" alignItems="center">
                  <s-clickable
                    href="/app/details"
                    accessibilityLabel="Mountain View puzzle thumbnail"
                    border="base"
                    borderRadius="base"
                    overflow="hidden"
                    inlineSize="40px"
                    blockSize="40px"
                  >
                    <s-image objectFit="cover" src="https://picsum.photos/id/29/80/80"></s-image>
                  </s-clickable>
                  <s-link href="/app/details">Mountain View</s-link>
                </s-stack>
              </s-table-cell>
              <s-table-cell>16-piece</s-table-cell>
              <s-table-cell>Today</s-table-cell>
              <s-table-cell>
                <s-badge color="base" tone="success"> Active </s-badge>
              </s-table-cell>
            </s-table-row>
            <s-table-row>
              <s-table-cell>
                <s-stack direction="inline" gap="small" alignItems="center">
                  <s-clickable
                    href="/app/details"
                    accessibilityLabel="Ocean Sunset puzzle thumbnail"
                    border="base"
                    borderRadius="base"
                    overflow="hidden"
                    inlineSize="40px"
                    blockSize="40px"
                  >
                    <s-image objectFit="cover" src="https://picsum.photos/id/12/80/80"></s-image>
                  </s-clickable>
                  <s-link href="/app/details">Ocean Sunset</s-link>
                </s-stack>
              </s-table-cell>
              <s-table-cell>9-piece</s-table-cell>
              <s-table-cell>Yesterday</s-table-cell>
              <s-table-cell>
                <s-badge color="base" tone="success"> Active </s-badge>
              </s-table-cell>
            </s-table-row>
            <s-table-row>
              <s-table-cell>
                <s-stack direction="inline" gap="small" alignItems="center">
                  <s-clickable
                    href="/app/details"
                    accessibilityLabel="Forest Animals puzzle thumbnail"
                    border="base"
                    borderRadius="base"
                    overflow="hidden"
                    inlineSize="40px"
                    blockSize="40px"
                  >
                    <s-image objectFit="cover" src="https://picsum.photos/id/324/80/80"></s-image>
                  </s-clickable>
                  <s-link href="/app/details">Forest Animals</s-link>
                </s-stack>
              </s-table-cell>
              <s-table-cell>25-piece</s-table-cell>
              <s-table-cell>Last week</s-table-cell>
              <s-table-cell>
                <s-badge color="base" tone="neutral"> Draft </s-badge>
              </s-table-cell>
            </s-table-row>
            <!-- Add more rows as needed here -->
            <!-- If more than 100 rows are needed, index page tables should use the paginate, hasPreviousPage, hasNextPage, onPreviousPage, and onNextPage attributes to display and handle pagination) -->
          </s-table-body>
        </s-table>
      </s-section>
    </s-page>
  </body>
</html>

Anchor to relatedRelated

RequirementsBuilt for Shopify