How To Create A Tokengated Experience On Shopify Using Thirdweb

Intersecting Blockchain & E-Commerce

Two of the fastest growing industries over the past few years have been blockchain and e-commerce. And the intersection between both industries is growing larger everyday.

In e-commerce, an increasing amount of brands have been providing value to their customers by prioritizing their online experience, primarily through Shopify, and have been giving them more personalized, creative experiences year after year.

In blockchain, the ecosystem has gone through its ups and downs, but what stayed true throughout is the rate of innovation when it comes to building. By now many of you have probably heard of NFTs (non-fungible tokens) and some notable projects around NFTs like NBA Top Shot, Bored Ape Yacht Club, Doodles, Cryptopunks, Anata, Axie Infinity, Azuki, and more.

And for the past few years, the primary focus around NFTs like these has been around the creation and distribution of these digital assets, the community building around them, and the level of insights one can draw from them. Projects like Thirdweb, SudoSwap, OpenSea, Dune, Definitive, Abacus, and more have all laid down the infrastructure needed to keep the space growing at the pace it requires.

Now that the foundation has been developed (and is still being developed) and good projects have survived while bad projects have withered out, we're now seeing new use cases for NFTs arise.

One interesting area we look at is how larger, more established brands are entering the space and how existing NFT projects are keeping their communities engaged and retained. Brands like Starbucks, NBA, NFL, Adidas, Nike, 100 Thieves, Kith, and more have all entered the space to better interact and serve their customers.

At Lazer, one of the most promising use-cases we're observing, which live at the intersection of the two industries, is through tokengated commerce experiences.

What is a tokengated experience and why is it important?

To best explain tokengated experiences, let's look at the Kith and Invisible Friends NFT tokengated commerce partnership.

In May 2022, Kith announced a partnership with the Invisible Friends NFT project where the goal was to create an experience that would bridge the the digital and physical spaces through a collection of special NFTs and grant Invisible Friends' holders unique and exclusive access to upcoming Kith launches.

Simply put, if you owned an Invisible Friends NFT, you would get early access to special Kith products and collections before the general public.

And the way brands, like Kith, restrict these experiences to specific NFT holders is by tokengating those specific pages and products on their website.

So when you visit one of these "tokengated" storefronts, the only way you can access the product is by connecting your crypto wallet to the page, and if the storefront sees that your wallet owns the appropriate NFT upon connection, then it would unlock the exclusive content/products.

Tokengating also comes with some benefits including:

• Additional security. For example, information stored via tokengating is only accessible after a user has proven their identity and permission to access that information.
• Easy-to-use. The process for users to access exclusive content is simple and fast, as users will have already linked their verified credentials to the tokengated site.
• Cost-effective. Tokengating has low overhead costs due to its simplicity.

Note, tokengating doesn't only apply to NFTs. It can also be applied to crypto tokens as well, where the gate can require the connecting wallet to hold a certain number of tokens.

How to create a tokengated experience?

With tokengated experiences becoming more utilized by e-commerce brands on Shopify, let's dive into what is involved to create a simple tokengated experience for your Shopify store.

In the following example, we're going to assume you haven't created an NFT yet, so we're first going to create one using Thirdweb. For context, Thirdweb offers a full stack of useful developer tools including pre-built and audited smart contracts, SDKs, and dashboards to help developers create, deploy, and manage their web3 apps.

Special thanks to Azim from Lazer for putting together this next guide ❤️

First, let's create an NFT using Thirdweb

1. Navigate to the Thirdweb dashboard and connect your wallet

2. Click on Deploy new contract in order to create your NFT

3. Select the Edition module

4. Fill in the contract metadata you want for your NFT contract, and click on deploy

4. Your NFT contract should now be defined, so navigate to the NFTs section and copy the contract address, which starts with 0x, and keep it for later. Then click on the + Mint button

5. Fill out the form which defines the actual NFT and click on the Mint NFT button

Congrats! Your NFT is now minted and in your wallet.

Second, add a tokengate to our Shopify storefront

Now that we've defined our NFT, and have one in our wallet, let's go ahead and add a basic pop-up modal to our Shopify storefront.

1. In your Shopify Admin portal, navigate to the Themes section, click on Actions and then click on Edit code in the dropdown.

2. Add the following code in your theme.liquid file and click save. Note, when you add this code, change the data-contract-address, data-desired-chain-id to the values that match the contract deployed in the previous steps. You can also change the data-title, data-description, and data-image field to be whatever you want. These fields will be reflected on the tokengate modal.

Note: this is a simple and basic version of tokengating on Shopify. It doesn't consider a few edge cases, but the hope here it to get you started so you can elaborate on the experience :)For a deeper dive into the code required and how the <script> tag was developed, check out:https://github.com/LazerTechnologies/lazer-thirdweb-shopify-token-gating

3. Navigate to any product page on your Shopify store to see the token gate!

‍

Moving forward into the future

There we go! We're now able to offer tokengated commerce experiences on our Shopify storefronts to interact with customers and NFT communities in an engaging, novel manner.

With these experiences becoming more widespread amongst the e-commerce ecosystem, there will undoubtedly be more opportunities and insights that arise where we can further engage our communities.

For brands that are already diving in, they can see how these token-holders engage with their products separately from the rest. And with the activity of these audiences being public on the blockchain, it allows brands to discover new opportunities to collaborate with other retail brands and blockchain projects.

That's it!

If you have any questions throughout, feel free to send me a message through Twitter or reach us by email at founders@lazertechnologies.com.

At Lazer, we've helped some of the best brands navigate this space, such as 100 Thieves, Dapper Labs, Shopify, and more, so if you're interested in us helping you with this as well, send us an email!

Please share with anyone you feel may find value from it as well 🤗