• What you'll learn
  • Requirements
  • Step 1: Set up required access scopes
  • Step 2: Update the navigation
  • Step 3: Update app home page
  • Next steps

Start building a pre-order and Try Before You Buy (TBYB) app

You're ready to create a new app that helps merchants create pre-order or TBYB options. To get started, you'll set up the foundation of your app.

To build a pre-order or TBYB 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 pre-order or TBYB option
  • A homepage where merchants can view a list of the pre-order or TBYB 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"

Note

  • Most subscriptions, pre-order and try before you buy apps need to request API access through the Partner Dashboard. We give API access to apps that are designed according to our principles for subscriptions, pre-order and TBYB apps.
  • Public apps that use subscriptions, pre-order or TBYB need to meet specific requirements to be published on the Shopify App Store.
  • Custom apps created in the Shopify admin can't use subscriptions, pre-order or TBYB because these apps can't use extensions or request access to protected scopes. If you're building a solution for a single store, then build your custom app in the Partner Dashboard.
  • Complete the tutorial to scaffold an app and set up your development environment.
  • Complete the tutorials to create pre-order and TBYB (try before you buy) options and manage delivery profiles.

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

  1. Navigate your app directory.

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

Step 2: Update the navigation

Anchor link to section titled "Step 2: Update the navigation"

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:

Step 3: Update app home page

Anchor link to section titled "Step 3: Update app home page"

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:

deferred purchase option app homepage

Next steps

Anchor link to section titled "Next steps"
  • Create and add app components

On this page

  • What you'll learn
  • Requirements
  • Step 1: Set up required access scopes
  • Step 2: Update the navigation
  • Step 3: Update app home page
  • Next steps