Skip to main content

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

Anchor to What you'll learnWhat 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

Anchor to RequirementsRequirements

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.

Anchor to Step 1: Set up required access scopesStep 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.

shopify.app.toml

scopes = "write_products,write_customers,write_draft_orders,write_purchase_options"

Anchor to Step 2: Update the navigationStep 2: Update the navigation

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

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

app/routes/app.jsx

import {Outlet, useLoaderData, useRouteError } from "react-router";
import { boundary } from "@shopify/shopify-app-react-router/server";
import { AppProvider } from "@shopify/shopify-app-react-router/react";

import { authenticate } from "../shopify.server";

export const loader = async ({ request }) => {
await authenticate.admin(request);

return { apiKey: process.env.SHOPIFY_API_KEY || "" };
};

export default function App() {
const { apiKey } = useLoaderData();

return (
<AppProvider embedded apiKey={apiKey}>
<ui-nav-menu>
<a href="/app" rel="home">
Home
</a>
<a href="/app/create">Create</a>
</ui-nav-menu>
<Outlet />
</AppProvider>
);
}

// Shopify needs React Router to catch some thrown responses, so that their headers are included in the response.
export function ErrorBoundary() {
return boundary.error(useRouteError());
}

export const headers = (headersArgs) => {
return boundary.headers(headersArgs);
};

Anchor to Step 3: Update App Home pageStep 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:

  • An empty state pattern is used to display the empty state before merchant can view their pre-order or TBYB options.
  • The page component 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:

app/routes/app._index.jsx

import { useNavigate } from "react-router";

export default function Index() {
const navigate = useNavigate();

return (
<s-page>
<ui-title-bar title="Pre-orders">
<button variant="primary" onClick={() => navigate("/app/create")}>
Create pre-order
</button>
</ui-title-bar>

<s-section accessibilityLabel="Empty state section">
<s-grid gap="base" justifyItems="center" paddingBlock="large-400">
<s-box maxInlineSize="200px" maxBlockSize="200px">
<s-image
aspectRatio="1/0.5"
src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
alt="A stylized graphic of four characters, each holding a puzzle piece"
/>
</s-box>
<s-grid
justifyItems="center"
maxBlockSize="450px"
maxInlineSize="450px"
>
<s-heading>Start creating pre-orders</s-heading>
<s-paragraph>
Pre-orders enable customers to purchase products with deferred
payments or deliveries.
</s-paragraph>
<s-stack
gap="small-200"
justifyContent="center"
padding="base"
paddingBlockEnd="none"
direction="inline"
>
<s-button
variant="primary"
aria-label="Add a new pre-order"
onClick={() => navigate("/app/create")}
>
Create pre-order
</s-button>
</s-stack>
</s-grid>
</s-grid>
</s-section>
</s-page>
);
}

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

deferred purchase option app homepage

Anchor to Next stepsNext steps

Was this page helpful?