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 routes 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.
• Populate some example products to your development store to test your app's behavior.

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.

You don't need to create a homepage. Your app includes the homepage (web/frontend/pages/index.jsx) by default.

In the web/frontend/pages folder, create CreatePurchaseOptionsPage.jsx.

Create routes for index.jsx and CreatePurchaseOptionsPage.jsx and add the routes to the App.jsx file. For more information on routing in Shopify's React component library, refer to App Bridge React.

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

2. In web/frontend/App.jsx, add the routes.

   You can 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, add the empty state and title bar components.

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

• Create and add app components