Adding Pages to Your App

1. Creating a New Page

Create a new file in your app's frontend directory, placing it inside the src/pages folder. The filename you choose (like foobar.jsx) will determine the URL path for accessing your page.

import {Page} from '@shopify/polaris';
import React from 'react';
 
export default function FooBar() {
 
     <Page
      title="Example Page"
      >
      <!-- your page content here... -->
    </Page>
}

2. Adding to Navigation Menu

Once created, your page will be accessible through the URL: https://admin.shopify.com/store/<your_app_slug>/apps/foobar. For example, if you named your file product-list.jsx, it would be available at /product-list. To make your page visible in the Shopify dashboard's navigation menu, you'll need to add it to the navigation links in your Navigation.jsx file. This will create a clickable link in your app's navigation that users can use to access your new page.

// ....
 
<NavigationMenu
  navigationLinks={[
    {
      destination: "/foobar",
      label: FooBar,
    },
  ]}
/>
 
// ...

3. More

For additional customization options and to explore more features for your pages, layouts, etc, you can refer to Shopify's official Polaris Page documentation. Shopify Polaris documentation

Table