Create gates in the Shopify admin

In this tutorial, you'll use Node.js, React, Shopify App Bridge and Polaris components to create an admin app and use Gates API to create gates.

The admin app has two pages:

• Tokengates index: Uses the Polaris List component to display previously created tokengates.
• Tokengate form: Enables merchants to create a new tokengate with a name, a discount, unlocking token addresses, and a list of products to be gated.

The backend consists of a Node.js Express app that leverages the Gates API to create, update, and delete gate configurations and gate subjects.

• You've created a Partner account.
• You've created a development store that uses generated test data.

• You've created an app that uses the Express.js app template and Shopify CLI.

  You can create a new app using the Express.js app template by running the following command:

You can view and test your frontend components in the Shopify admin as you build them. After you've created an app, navigate to your app's directory and start your local server to build and preview your app:

The form enables merchants to:

• Define an exclusive discount
• Define segments by adding token collections
• Apply tokengates to products

You need to install @shopify/react-form to your required packages. We use this to manage React forms by providing custom hooks.

The form submits the form data to the Gates API to create a new gate.

1. In the /web/frontend/pages directory, create a new file called CreateTokengate.jsx. The app boilerplate code comes with automatic routing, where a new route is created when a file is added to this directory.

2. Add the following code to the file:

1. In the /web/frontend/components directory, create a new file called TokengatesResourcePicker.jsx.

2. Add the following code to the file:

The list component fetches the gates from the Gates API.

1. In the /web/frontend/components directory, create a new file called TokengatesList.jsx.

2. Add the following code to the file:

Import the TokengatesList component and include the component markup in your index page.

1. Open /web/frontend/pages/index.jsx.

2. Replace your code with:

3. In the browser, view your development store. After this step, your form should look like this:

   

Now that you have created the frontend, you need to request additional scopes for your app to interact with gates. After, add the backend to create discounts, create, retrieve and delete gates.

1. In /shopify.app.toml, update the existing scopes.

2. Modify the existing scopes declaration to add the read_gates, write_gates, read_discounts, and write_discounts scopes.

3. Deploy your updated configuration to Shopify:

4. Start your development server. If your server is already running, restart it.

5. View your app again in your store admin. If prompted for an app update that applies the new scopes, then accept the update.

The Gates API is available in the unstable API version. Configure the Shopify API client to use the unstable API version.

1. Open /web/shopify.js

2. Set the shopify configuration key apiVersion to unstable.

1. Create a new directory /web/api/, and inside create a new file called constants.js.

2. Add the following code to the file:

3. In the /web/api directory, create a new file called create-discount.js.

4. Add the following code to the file:

In the last part of this tutorial series, after deploying your function to apply the gate discount, you'll come back to fill in YOUR_FUNCTION_ID.

1. In the /web/api/ directory, create a new file called create-gate.js.

2. Add the following code to the file:

1. In the /web/api/ directory, create a new file called retrieve-gates.js.

2. Add the following code to the file:

3. In the /web/api/ directory, create a new file called delete-gate.js.

4. Add the following code to the file:

The app uses authenticated endpoints to create, update, delete, and view the gates. You'll import the helpers createGate, retrieveGates, and deleteGate that you created in the previous steps, and call those endpoints with a GET and POST request.

1. Open /web/index.js.

2. Replace the code with:

The admin UI to create tokengates is complete. Try it out by entering details in the form and pressing create. The gate should be created and included in the tokengate list.

To ensure later steps in this tutorial are successful, make sure to:

• Input token addresses in the Segments field that you have access to
• Select at least one product when creating a tokengate
• Not leave the discount or name fields blank

• If you're using a custom storefront built using Hydrogen or the Headless channel, then follow the build a tokengated storefront tutorial series.
• If you plan to integrate your app with a regular storefront, then show gates on the storefront using a theme app extension.