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 to 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"
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"
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: