You can use tokengating to create exclusive access and unlockable discounts for your customer segments. Whether you want to reward your most loyal customers or another brand's token holders, this tutorial shows you how to create end-to-end tokengating experiences with Headless and Hydrogen storefronts. ## What you'll learn In this tutorial series, you'll learn how to use the Gates API to read gates on products, use a connected crypto wallet to check wallet contents against gates, and react accordingly. The end result is an end-to-end gated customer experience that applies discounts to the cart automatically using Shopify Functions. Before you start this tutorial, you first need to create gates using the Gates API, and build Shopify Function that applies a gated discount. Refer to the following tutorials for more information: - [Create gates in admin using Gates API](/docs/apps/build/blockchain/tokengating/build-a-tokengating-app/create-gates-admin) - [Creating a Shopify Function to apply a gated discount](/docs/apps/build/blockchain/tokengating/build-a-tokengating-app/create-gated-discount-function) ## Resources <div class="resource-card-grid"> <div> <a class="resource-card" href="https://github.com/Shopify/gated-hydrogen-example/" data-theme-mode=""> <div class="resource-card__indicator-container"><img src="/assets/resource-cards/github" data-alt-src="/assets/resource-cards/github-dark" aria-hidden="true" class="resource-card__icon themed-image"></div> <h3 class="resource-card__title"> Gated Hydrogen example </h3> <p class="resource-card__description">Explore an example repository that shows how we've implemented gated buying experiences in a Hydrogen storefront.</p> </a> </div> </div> ## Tutorial series Follow the tutorial series to go from a Hydrogen template to a tokengated buying experience. <div class="resource-card-grid"> <div> <a class="resource-card" href="/docs/apps/build/blockchain/tokengating/build-a-tokengated-storefront/start-building" data-theme-mode=""> <div class="resource-card__indicator-container"><img src="/assets/resource-cards/app" data-alt-src="/assets/resource-cards/app-dark" aria-hidden="true" class="resource-card__icon themed-image"></div> <h3 class="resource-card__title"> Tutorial 1: Get started </h3> <p class="resource-card__description">Install and configure blockchain packages, create gates and attach them to products.</p> </a> </div> <div> <a class="resource-card" href="/docs/apps/build/blockchain/tokengating/build-a-tokengated-storefront/save-wallet-to-session" data-theme-mode=""> <div class="resource-card__indicator-container"><img src="/assets/resource-cards/authentication" data-alt-src="/assets/resource-cards/authentication-dark" aria-hidden="true" class="resource-card__icon themed-image"></div> <h3 class="resource-card__title"> Tutorial 2: Save a connected wallet to session storage </h3> <p class="resource-card__description">Handle connection events from the <code class="text-highlight text-highlight--grey">@shopify/connect-wallet</code> package and store the connected wallet in cookies.</p> </a> </div> <div> <a class="resource-card" href="/docs/apps/build/blockchain/tokengating/build-a-tokengated-storefront/read-and-evaluate-gates" data-theme-mode=""> <div class="resource-card__indicator-container"><img src="/assets/resource-cards/coin" data-alt-src="/assets/resource-cards/coin-dark" aria-hidden="true" class="resource-card__icon themed-image"></div> <h3 class="resource-card__title"> Tutorial 3: Read and evaluate gates </h3> <p class="resource-card__description">Use the stored wallet and your product's gates to evaluate if a customer satisfies the requirements for the gate.</p> </a> </div> <div> <a class="resource-card" href="/docs/apps/build/blockchain/tokengating/build-a-tokengated-storefront/write-gate-context-to-cart-attributes" data-theme-mode=""> <div class="resource-card__indicator-container"><img src="/assets/resource-cards/resource" data-alt-src="/assets/resource-cards/resource-dark" aria-hidden="true" class="resource-card__icon themed-image"></div> <h3 class="resource-card__title"> Tutorial 4: Write gate context to cart attributes </h3> <p class="resource-card__description">Write an HMAC of the <code class="text-highlight text-highlight--grey">gateConfiguration.id</code> to the customer's cart attributes to enable validation using your Shopify Function at checkout.</p> </a> </div> </div>