Getting started with a pre-order and try before you buy (TBYB) app

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

• Complete the Manage Pre-orders and Try Before You Buy (TBYB) and Manage delivery profiles tutorials.
• Complete the Create an app tutorial to set up your development environment and scaffold an app.

Your app requires the following access scopes:

• write_products
• write_customers
• write_draft_orders
• write_purchase_options

1. Navigate your app directory.

2. In the shopify.app.toml file, add the access scopes.

Update the navigation links in the app/routes/app.jsx file. For more information on routing refer to ui-nav-menu in the App Bridge Library web components.

1. In app/routes/app.jsx, replace the content with the following code:

Now that you've set up your app pages, you can use Polaris to build the user interface. You'll add the following components to the app._index.jsx file:

• EmptyState is used to display the empty state before merchant can view their pre-order or TBYB options.
• ui-title-bar is used to show button actions to create pre-order or TBYB options.

In app/routes/app._index.jsx, replace the content with the following code:

Your app's homepage displays the empty state and the title bar:

• Create and add app components