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 learn
Anchor 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
Requirements
Anchor 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 scopes
Anchor link to section titled "Step 1: Set up required access scopes"Your app requires the following access scopes:
write_products
write_customers
write_draft_orders
write_purchase_options
Navigate your app directory.
In the
shopify.app.toml
file, add the access scopes.
Step 2: Create new page
Anchor 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.
In the web/frontend/pages
folder, create a new folder purchaseOptions
and a new file called new.jsx
.
Step 3: Add navigation for app pages
Anchor 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.
- In
web/frontend/App.jsx
, replace the content with the following code:
Step 4: Update app home page
Anchor 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 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: