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 ui-nav-menu 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 { json } from "@remix-run/node";
import { Link, Outlet, useLoaderData, useRouteError } from "@remix-run/react";
import { boundary } from "@shopify/shopify-app-remix/server";
import { AppProvider } from "@shopify/shopify-app-remix/react";
import polarisStyles from "@shopify/polaris/build/esm/styles.css?url";
import { authenticate } from "../shopify.server";

export const links = () => [{ rel: "stylesheet", href: polarisStyles }];

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

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

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

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

// Shopify needs Remix 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.
  • 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:

app/routes/app._index.jsx

import { Page, Text, Card, EmptyState, BlockStack } from "@shopify/polaris";
import { useNavigate } from "@remix-run/react";

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

return (
<Page>
<ui-title-bar title="Pre-orders">
<button variant="primary" onClick={() => navigate("/app/create")}>
Create a pre-order
</button>
</ui-title-bar>
<BlockStack gap="500">
<Card>
<EmptyState
heading="Create a pre-order"
image="/images/empty-subscriptions-list-state.png"
>
<Text as="p" variant="bodyMd">
Pre-orders enable customers to purchase products with deferred
payments or deliveries
</Text>
</EmptyState>
</Card>
</BlockStack>
</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?