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 routes for app pages
- Add the empty state and title bar components to the homepage
RequirementsAnchor link to section titled "Requirements"
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 an app pageAnchor 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.
web/frontend/pages folder, create
Step 3: Add routes for app pagesAnchor link to section titled "Step 3: Add routes for app pages"
Create routes for
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.
web/frontend/Routes.jsx, replace the content with the following code:
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 barAnchor link to section titled "Step 4: Add an empty state and a title bar"
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, add the empty state and title bar components.
Your app's homepage displays the empty state and the title bar: