Start building a tokengated storefront

In this tutorial, you'll learn how to do the following:

• Create gates using GraphQL Storefront API. These gates define which segments of customers receive exclusive discounts.
• Enable wallet connection on your custom storefront using connect wallet components.

• You've completed the Hydrogen getting started tutorial with a Demo Store example project.
• You've enabled the unauthenticated_read_gates access scope for your storefront. Learn how to manage permission scopes for Hydrogen.
• You've completed the Create gates and Create gated discount function tutorials from the Build a tokengating app tutorial series.

In a terminal, run the following command to install additional packages. These packages help to create a uniform experience between Shopify, your custom storefront, and the blockchain.

Additional configuration is required to begin using the @shopify/connect-wallet functionality. To learn more about @shopify/connect-wallet, refer to the Blockchain component reference.

In this step, you'll create a config file that defines which Remote Procedure Call (RPC) providers you want to use to query against the blockchain, as well as the chains that you want to use.

1. Retrieve the projectId for your WalletConnect app by opening the WalletConnect dashboard and navigating to your project.

2. In your project's root folder, create a new file called connect-wallet-config.js.

3. Add the following code:

1. Open your /app/root JSX or TSX file.

2. Add the following import statements:

3. Add the connectWalletStylesheet and tokengateStylesheet stylesheets to your links function.

4. Wrap the Layout component with WagmiConfig and ConnectWalletProvider components.

   The WagmiConfig component manages configuration for all hooks used by the @shopify/connect-wallet package. Read more about WagmiConfig.

   The ConnectWalletProvider component is a React Context provider for managing your configured wagmi connectors, connected wallet state, Ethereum Name Service (ENS), and wallet connection interactions.

Create a gate and attach it to a product by using the tokengating app you built by following the Build a tokengating app tutorial series.

Optionally, you can use the Shopify GraphiQL app to create a gate and attach it to a product using the Admin API gateConfigurationCreate mutation. The following steps detail the mutations needed to create a gate and attach it to a product.

For this tutorial, create a gate with two different metafields: reaction and requirements.

• reaction: Determines the effect unlocking the gate has on the customer's shopping experience. Valid values are discount or exclusive_access. These values are defined in the @shopify/tokengate package.

• requirements: Defines what the customer needs to have to unlock the gate. The syntax for requirements is defined in the @shopify/tokengate package. Reference the following example for a valid configuration:

The value in the createGateConfiguration metafields is a stringified JSON value. You can use an online tool to stringify your JSON input before running your mutation.

After you've created the gate, you can attach it to your product using the product's GID.

Run the Admin API metafieldStorefrontVisibilityCreate mutation to expose your new metafields to the Storefront API. Until you run the mutation, the values defined in your metafields can't be read.

Ensure that you use the unstable version of the Admin API as GATE_CONFIGURATION isn't a valid MetafieldOwnerType as of 2023-07.

You'll need to run the mutation twice, once for reaction, and once for requirements.

Make sure to replace the namespace value with your own namespace.

• Save a connected wallet to session storage