Getting started with a deferred purchase option app
You're ready to create a new app that helps merchants create deferred purchase options. To get started, you'll set up the foundation of your app.
To build a deferred purchase option app, you want set up required access scopes and pages for the app. You want to have the following pages on the app:
- A page where merchants can create a deferred purchase option
- A homepage where merchants can view a list of the deferred purchase options that they created
What you'll learnAnchor link to section titled "What you'll learn"
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
RequirementsAnchor link to section titled "Requirements"
- 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.
Step 1: Set up required access scopesAnchor link to section titled "Step 1: Set up required access scopes"
Your app requires the following access scopes:
Navigate your app directory.
shopify.app.tomlfile, add the access scopes.
Step 2: Create new pageAnchor link to section titled "Step 2: Create new page"
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.
web/frontend/pages folder, create a new folder
purchaseOptions and a new file called
Step 3: Add navigation for app pagesAnchor link to section titled "Step 3: Add navigation for app pages"
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.
web/frontend/App.jsx, replace the content with the following code:
Step 4: Update app home pageAnchor link to section titled "Step 4: Update app home page"
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
EmptyStateis used to display the homepage before merchants create deferred purchase options.
TitleBaris used when merchants add additional deferred purchase options.
web/frontend/pages/index.jsx, replace the content with the following code:
Your app's homepage displays the empty state and the title bar: