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] (/docs/apps/selling-strategies/purchase-options#shopifys-principles).
  • 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 s-app-nav 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:

  • EmptyState is used to display the empty state before merchant can view their pre-order or TBYB options.
  • s-page 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?