Getting started with a deferred purchase option app

In this tutorial, you'll learn how to do the following tasks:

• Set up required access scopes
• Create an app page
• Add navigation for app pages
• Add the empty state and title bar components to the homepage

• Complete the Create and manage deferred purchase options and Create and manage delivery profiles tutorials.
• Complete the Create an app tutorial to set up your development environment and scaffold an app.

Your app requires the following access scopes:

• write_products
• write_customers
• write_draft_orders
• write_purchase_options

1. Navigate your app directory.

2. In the shopify.app.toml file, add the access scopes.

Create an app page where merchants can create a deferred purchase option. This is an empty page, but you'll add various app components later.

In the web/frontend/pages folder, create a new folder purchaseOptions and a new file called new.jsx.

Update the navigation links in the App.jsx file. For more information on routing in Shopify's React component library, refer to App Bridge React.

1. In web/frontend/App.jsx, replace the content with the following code:

Now that you've set up your app pages, you can use Polaris and App Bridge React to build the user interface. You'll add the following components to the index.jsx file:

• EmptyState is used to display the homepage before merchants create deferred purchase options.
• TitleBar is used when merchants add additional deferred purchase options.

In web/frontend/pages/index.jsx, replace the content with the following code:

Your app's homepage displays the empty state and the title bar:

• Create and add app components