Choose a version:

Index

Most apps need a way for merchants to manage collections of resources and perform actions on them. For React Router-based Shopify apps, that index route file (app.[resources].jsx) should use a plural noun for the resource type. For example, app.products.jsx for managing products through your app.

The index pattern provides this foundation while following proven design guidelines that help your app feel native to the Shopify admin. See Built for Shopify requirements for more details on these guidelines.

Anchor to Use casesUse cases

Displaying searchable, filterable tables of resources
Enabling bulk operations on multiple items
Providing quick access to individual resource details

Anchor to ExamplesExamples

Anchor to Display an index table with filters, search, and bulk actionsDisplay an index table with filters, search, and bulk actions

Merchants need to manage a collection of resources and perform actions on them. This example displays an index page for a puzzle app, with page actions for creating, exporting, and importing puzzles, and a table of puzzles with thumbnails, piece counts, creation dates, and status badges. Merchants who haven't created a puzzle yet see an empty state instead, with its illustration in the graphic slot, its description in the subheading slot, and its buttons in the secondary-actions and primary-action slots.

Preview

<s-page heading="Puzzles">

<s-button slot="primary-action" variant="primary">

Create puzzle

</s-button>

<s-button slot="secondary-actions" variant="secondary">

Export puzzles

</s-button>

<s-button slot="secondary-actions" variant="secondary">

Import puzzles

</s-button>

{/* === */}

{/* Empty state */}

{/* This should only be visible if the merchant has not created any puzzles yet. */}

{/* === */}

<s-section accessibilityLabel="Empty state section">

<s-empty-state heading="Start creating puzzles">

<s-box slot="graphic" maxInlineSize="200px">

{/* aspectRatio should match the actual image dimensions (width/height) */}

<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-text slot="subheading">

Create and manage your collection of puzzles for players to enjoy.

</s-text>

<s-button

slot="secondary-actions"

accessibilityLabel="Learn more about creating puzzles"

Learn more

</s-button>

<s-button slot="primary-action" variant="primary">

Create puzzle

</s-button>

</s-empty-state>

</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>

<s-table-header-row>

<s-table-header listSlot="primary">Puzzle</s-table-header>

<s-table-header format="numeric">Pieces</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="#"

accessibilityLabel="Mountain View puzzle thumbnail"

border="base"

borderRadius="base"

overflow="hidden"

inlineSize="40px"

blockSize="40px"

<s-image

objectFit="cover"

alt="Mountain View puzzle thumbnail"

src="https://picsum.photos/id/29/80/80"

</s-clickable>

<s-link href="#">Mountain View</s-link>

</s-stack>

</s-table-cell>

<s-table-cell>16</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="#"

accessibilityLabel="Ocean Sunset puzzle thumbnail"

border="base"

borderRadius="base"

overflow="hidden"

inlineSize="40px"

blockSize="40px"

<s-image

objectFit="cover"

alt="Ocean Sunset puzzle thumbnail"

src="https://picsum.photos/id/12/80/80"

</s-clickable>

<s-link href="#">Ocean Sunset</s-link>

</s-stack>

</s-table-cell>

<s-table-cell>9</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="#"

accessibilityLabel="Forest Animals puzzle thumbnail"

border="base"

borderRadius="base"

overflow="hidden"

inlineSize="40px"

blockSize="40px"

<s-image

objectFit="cover"

alt="Forest Animals puzzle thumbnail"

src="https://picsum.photos/id/324/80/80"

</s-clickable>

<s-link href="#">Forest Animals</s-link>

</s-stack>

</s-table-cell>

<s-table-cell>25</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>

{/* Footer help */}

<s-stack alignItems="center" paddingBlock="large">

<s-text color="subdued">

Learn more about <s-link href="https://help.shopify.com" target="_blank">improving product quality</s-link>.

</s-text>

</s-stack>

</s-page>

<!DOCTYPE html>

<head>

<title>Pattern</title>

</head>

<body>

<s-page heading="Puzzles">

<s-button slot="primary-action" variant="primary">Create puzzle</s-button>

<s-button slot="secondary-actions" variant="secondary">Export puzzles</s-button>

<s-button slot="secondary-actions" variant="secondary">Import puzzles</s-button>

<s-section accessibilityLabel="Empty state section">

<s-empty-state heading="Start creating puzzles">

<s-box slot="graphic" maxInlineSize="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-image>

</s-box>

<s-text slot="subheading">

Create and manage your collection of puzzles for players to enjoy.

</s-text>

<s-button slot="secondary-actions" accessibilityLabel="Learn more about creating puzzles">Learn more</s-button>

<s-button slot="primary-action" variant="primary">Create puzzle</s-button>

</s-empty-state>

</s-section>

<s-section padding="none" accessibilityLabel="Puzzles table section">

<s-table>

<s-table-header-row>

<s-table-header listSlot="primary">Puzzle</s-table-header>

<s-table-header format="numeric">Pieces</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="#"

accessibilityLabel="Mountain View puzzle thumbnail"

border="base"

borderRadius="base"

overflow="hidden"

inlineSize="40px"

blockSize="40px"

<s-image objectFit="cover" alt="Mountain View puzzle thumbnail" src="https://picsum.photos/id/29/80/80"></s-image>

</s-clickable>

<s-link href="#">Mountain View</s-link>

</s-stack>

</s-table-cell>

<s-table-cell>16</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="#"

accessibilityLabel="Ocean Sunset puzzle thumbnail"

border="base"

borderRadius="base"

overflow="hidden"

inlineSize="40px"

blockSize="40px"

<s-image objectFit="cover" alt="Ocean Sunset puzzle thumbnail" src="https://picsum.photos/id/12/80/80"></s-image>

</s-clickable>

<s-link href="#">Ocean Sunset</s-link>

</s-stack>

</s-table-cell>

<s-table-cell>9</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="#"

accessibilityLabel="Forest Animals puzzle thumbnail"

border="base"

borderRadius="base"

overflow="hidden"

inlineSize="40px"

blockSize="40px"

<s-image objectFit="cover" alt="Forest Animals puzzle thumbnail" src="https://picsum.photos/id/324/80/80"></s-image>

</s-clickable>

<s-link href="#">Forest Animals</s-link>

</s-stack>

</s-table-cell>

<s-table-cell>25</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>

</s-table-body>

</s-table>

</s-section>

<s-stack alignItems="center" paddingBlock="large">

<s-text color="subdued">Learn more about <s-link href="https://help.shopify.com" target="_blank">improving product quality</s-link>.</s-text>

</s-stack>

</s-page>

</body>

</html>

jsx

// @validate-ignore: Property 's-empty-state' does not exist on type 'JSX.IntrinsicElements'
<s-page heading="Puzzles">
      <s-button slot="primary-action" variant="primary">
        Create puzzle
      </s-button>
      <s-button slot="secondary-actions" variant="secondary">
        Export puzzles
      </s-button>
      <s-button slot="secondary-actions" variant="secondary">
        Import puzzles
      </s-button>
      {/* === */}
      {/* Empty state */}
      {/* This should only be visible if the merchant has not created any puzzles yet. */}
      {/* === */}
      <s-section accessibilityLabel="Empty state section">
        <s-empty-state heading="Start creating puzzles">
          <s-box slot="graphic" maxInlineSize="200px">
            {/* aspectRatio should match the actual image dimensions (width/height) */}
            <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-text slot="subheading">
            Create and manage your collection of puzzles for players to enjoy.
          </s-text>
          <s-button
            slot="secondary-actions"
            accessibilityLabel="Learn more about creating puzzles"
          >
            Learn more
          </s-button>
          <s-button slot="primary-action" variant="primary">
            Create puzzle
          </s-button>
        </s-empty-state>
      </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>
          <s-table-header-row>
            <s-table-header listSlot="primary">Puzzle</s-table-header>
            <s-table-header format="numeric">Pieces</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="#"
                    accessibilityLabel="Mountain View puzzle thumbnail"
                    border="base"
                    borderRadius="base"
                    overflow="hidden"
                    inlineSize="40px"
                    blockSize="40px"
                  >
                    <s-image
                      objectFit="cover"
                      alt="Mountain View puzzle thumbnail"
                      src="https://picsum.photos/id/29/80/80"
                     />
                  </s-clickable>
                  <s-link href="#">Mountain View</s-link>
                </s-stack>
              </s-table-cell>
              <s-table-cell>16</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="#"
                    accessibilityLabel="Ocean Sunset puzzle thumbnail"
                    border="base"
                    borderRadius="base"
                    overflow="hidden"
                    inlineSize="40px"
                    blockSize="40px"
                  >
                    <s-image
                      objectFit="cover"
                      alt="Ocean Sunset puzzle thumbnail"
                      src="https://picsum.photos/id/12/80/80"
                     />
                  </s-clickable>
                  <s-link href="#">Ocean Sunset</s-link>
                </s-stack>
              </s-table-cell>
              <s-table-cell>9</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="#"
                    accessibilityLabel="Forest Animals puzzle thumbnail"
                    border="base"
                    borderRadius="base"
                    overflow="hidden"
                    inlineSize="40px"
                    blockSize="40px"
                  >
                    <s-image
                      objectFit="cover"
                      alt="Forest Animals puzzle thumbnail"
                      src="https://picsum.photos/id/324/80/80"
                     />
                  </s-clickable>
                  <s-link href="#">Forest Animals</s-link>
                </s-stack>
              </s-table-cell>
              <s-table-cell>25</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>

    {/* Footer help */}
    <s-stack alignItems="center" paddingBlock="large">
      <s-text color="subdued">
        Learn more about <s-link href="https://help.shopify.com" target="_blank">improving product quality</s-link>.
      </s-text>
    </s-stack>
</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/polaris-2.0-rc.js"></script>
    <title>Pattern</title>
  </head>
  <body>
    <!-- @validate-ignore: Property 's-empty-state' does not exist on type 'JSX.IntrinsicElements' -->
    <!-- === -->
    <!-- Index page pattern -->
    <!-- === -->
    <s-page heading="Puzzles">
      <s-button slot="primary-action" variant="primary">Create puzzle</s-button>
      <s-button slot="secondary-actions" variant="secondary">Export puzzles</s-button>
      <s-button slot="secondary-actions" variant="secondary">Import puzzles</s-button>
      <!-- === -->
      <!-- Empty state -->
      <!-- This should only be visible if the merchant has not created any puzzles yet. -->
      <!-- === -->
      <s-section accessibilityLabel="Empty state section">
        <s-empty-state heading="Start creating puzzles">
          <s-box slot="graphic" maxInlineSize="200px">
            <!-- aspectRatio should match the actual image dimensions (width/height) -->
            <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-image>
          </s-box>
          <s-text slot="subheading">
            Create and manage your collection of puzzles for players to enjoy.
          </s-text>
          <s-button slot="secondary-actions" accessibilityLabel="Learn more about creating puzzles">Learn more</s-button>
          <s-button slot="primary-action" variant="primary">Create puzzle</s-button>
        </s-empty-state>
      </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>
          <s-table-header-row>
            <s-table-header listSlot="primary">Puzzle</s-table-header>
            <s-table-header format="numeric">Pieces</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="#"
                    accessibilityLabel="Mountain View puzzle thumbnail"
                    border="base"
                    borderRadius="base"
                    overflow="hidden"
                    inlineSize="40px"
                    blockSize="40px"
                  >
                    <s-image objectFit="cover" alt="Mountain View puzzle thumbnail" src="https://picsum.photos/id/29/80/80"></s-image>
                  </s-clickable>
                  <s-link href="#">Mountain View</s-link>
                </s-stack>
              </s-table-cell>
              <s-table-cell>16</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="#"
                    accessibilityLabel="Ocean Sunset puzzle thumbnail"
                    border="base"
                    borderRadius="base"
                    overflow="hidden"
                    inlineSize="40px"
                    blockSize="40px"
                  >
                    <s-image objectFit="cover" alt="Ocean Sunset puzzle thumbnail" src="https://picsum.photos/id/12/80/80"></s-image>
                  </s-clickable>
                  <s-link href="#">Ocean Sunset</s-link>
                </s-stack>
              </s-table-cell>
              <s-table-cell>9</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="#"
                    accessibilityLabel="Forest Animals puzzle thumbnail"
                    border="base"
                    borderRadius="base"
                    overflow="hidden"
                    inlineSize="40px"
                    blockSize="40px"
                  >
                    <s-image objectFit="cover" alt="Forest Animals puzzle thumbnail" src="https://picsum.photos/id/324/80/80"></s-image>
                  </s-clickable>
                  <s-link href="#">Forest Animals</s-link>
                </s-stack>
              </s-table-cell>
              <s-table-cell>25</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>

    <!-- Footer help -->
    <s-stack alignItems="center" paddingBlock="large">
      <s-text color="subdued">Learn more about <s-link href="https://help.shopify.com" target="_blank">improving product quality</s-link>.</s-text>
    </s-stack>
</s-page>
  </body>
</html>

Anchor to Make empty states actionable using IntentsMake empty states actionable using Intents

Use the Intents API to open native Shopify interfaces for creating products directly from an empty state. Each button in the empty state's secondary-actions and primary-action slots invokes an intent.

Preview

{}

<s-section accessibilityLabel="Empty state with intents">

<s-empty-state heading="No products yet">

<s-box slot="graphic" maxInlineSize="200px">

<s-image

aspectRatio="1/0.5"

src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"

alt="Illustration showing product creation"

</s-box>

<s-text slot="subheading">

Add products from your Shopify catalog to get started with quality auditing.

</s-text>

<s-button

slot="secondary-actions"

onClick={() => {

shopify.intents.invoke('browse:shopify/Product');

}}

Browse products

</s-button>

<s-button

slot="primary-action"

variant="primary"

onClick={async () => {

const activity = await shopify.intents.invoke('create:shopify/Product');

const response = await activity.complete;

if (response.code === 'ok') {

shopify.toast.show('Product created');

}

}}

Create product

</s-button>

</s-empty-state>

</s-section>

<s-section accessibilityLabel="Empty state with intents">

<s-empty-state heading="No products yet">

<s-box slot="graphic" maxInlineSize="200px">

<s-image

aspectRatio="1/0.5"

src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"

alt="Illustration showing product creation"

></s-image>

</s-box>

<s-text slot="subheading">

Add products from your Shopify catalog to get started with quality auditing.

</s-text>

<s-button slot="secondary-actions">Browse products</s-button>

<s-button slot="primary-action" variant="primary">Create product</s-button>

</s-empty-state>

</s-section>

<!--

JavaScript usage for the buttons:

// Browse products

shopify.intents.invoke('browse:shopify/Product');

// Create product

const activity = await shopify.intents.invoke('create:shopify/Product');

const response = await activity.complete;

if (response.code === 'ok') {

shopify.toast.show('Product created');

}

-->

jsx

{/* @validate-ignore: possibly 'undefined', Cannot invoke an object, Property 's-empty-state' does not exist on type 'JSX.IntrinsicElements' */}
<s-section accessibilityLabel="Empty state with intents">
  <s-empty-state heading="No products yet">
    <s-box slot="graphic" maxInlineSize="200px">
      <s-image
        aspectRatio="1/0.5"
        src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
        alt="Illustration showing product creation"
      />
    </s-box>
    <s-text slot="subheading">
      Add products from your Shopify catalog to get started with quality auditing.
    </s-text>
    <s-button
      slot="secondary-actions"
      onClick={() => {
        shopify.intents.invoke('browse:shopify/Product');
      }}
    >
      Browse products
    </s-button>
    <s-button
      slot="primary-action"
      variant="primary"
      onClick={async () => {
        const activity = await shopify.intents.invoke('create:shopify/Product');
        const response = await activity.complete;
        if (response.code === 'ok') {
          shopify.toast.show('Product created');
        }
      }}
    >
      Create product
    </s-button>
  </s-empty-state>
</s-section>

html

<!-- @validate-ignore: Property 's-empty-state' does not exist on type 'JSX.IntrinsicElements' -->
<!-- Empty state with Intents API actions -->
<!-- Note: Intents require JavaScript to invoke. This HTML shows the UI structure. -->
<s-section accessibilityLabel="Empty state with intents">
  <s-empty-state heading="No products yet">
    <s-box slot="graphic" maxInlineSize="200px">
      <s-image
        aspectRatio="1/0.5"
        src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
        alt="Illustration showing product creation"
      ></s-image>
    </s-box>
    <s-text slot="subheading">
      Add products from your Shopify catalog to get started with quality auditing.
    </s-text>
    <s-button slot="secondary-actions">Browse products</s-button>
    <s-button slot="primary-action" variant="primary">Create product</s-button>
  </s-empty-state>
</s-section>

<!-- 
JavaScript usage for the buttons:

// Browse products
shopify.intents.invoke('browse:shopify/Product');

// Create product
const activity = await shopify.intents.invoke('create:shopify/Product');
const response = await activity.complete;
if (response.code === 'ok') {
  shopify.toast.show('Product created');
}
-->

Was this page helpful?

Index

Supported components

Available APIs

Recommended compositions

Supported components

Available APIs

Recommended compositions

Anchor to Use casesUse cases

Anchor to ExamplesExamples

Anchor to Display an index table with filters, search, and bulk actionsDisplay an index table with filters, search, and bulk actions

Preview

jsx

html

Anchor to Make empty states actionable using IntentsMake empty states actionable using Intents

Preview

jsx

html