This is the first part of a tutorial series for building a tokengated storefront. Read the overview section before starting this tutorial.
What you'll learnAnchor link to section titled "What you'll learn"
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.
RequirementsAnchor link to section titled "Requirements"
- You've completed the Hydrogen getting started tutorial with a Demo Store example project.
- You've enabled the
unauthenticated_read_gatesaccess scope for your storefront. Learn how to manage permission scopes for Hydrogen.
- You've completed the Create gates and Apply discount tutorials from the Build a tokengating app tutorial series.
Step 1: Install blockchain packagesAnchor link to section titled "Step 1: Install blockchain packages"
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.
Step 2: ConfigurationAnchor link to section titled "Step 2: Configuration"
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.
Configure the connect-wallet packageAnchor link to section titled "Configure the connect-wallet package"
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.
In your project's root folder, create a new file called
Add the following code:
Root route updatesAnchor link to section titled "Root route updates"
/app/rootJSX or TSX file.
Add the following import statements:
tokengateStylesheetstylesheets to your
WagmiConfigcomponent manages configuration for all hooks used by the
@shopify/connect-walletpackage. Read more about WagmiConfig.
Step 3: Create a gate and attach it to a productAnchor link to section titled "Step 3: Create a gate and attach it to a product"
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.
Create the gate configurationAnchor link to section titled "Create the gate configuration"
For this tutorial, create a gate with two different metafields:
reaction: Determines the effect unlocking the gate has on the customer's shopping experience. Valid values are
exclusive_access. These values are defined in the
requirements: Defines what the customer needs to have to unlock the gate. The syntax for requirements is defined in the
@shopify/tokengatepackage. Reference the following example for a valid configuration:
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.
Attach the gate to a productAnchor link to section titled "Attach the gate to a product"
After you've created the gate, you can attach it to your product using the product's GID.
Expose metafields in the Storefront APIAnchor link to section titled "Expose metafields in the Storefront API"
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
Make sure to replace the
namespace value with your own namespace.