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 routes 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.
- Populate some example products to your development store to test your app's behavior.
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 an app page
Anchor link to section titled "Step 2: Create an app 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.
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
.
Step 3: Add routes for app pages
Anchor link to section titled "Step 3: Add routes for app pages"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.
In
web/frontend/Routes.jsx
, replace the content with the following code:In
web/frontend/App.jsx
, add the routes.You can replace the content with the following code:
Step 4: Add an empty state and a title bar
Anchor link to section titled "Step 4: Add an empty state and a title bar"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: