Making the Most of NFTs on Shopify
At Shopify Summer '22 Edition, the token gating feature was announced.
While it would be easy to test this feature with any random NFT, we decided to go a step further and build a StoreHero Dapp to manage StoreHero NFTs, then use those StoreHero NFTs to try out token gating.
On top of that, we also set it up so that StoreHero NFTs can be minted (sold) directly through Shopify.
If you only want to see how token gating actually works, feel free to skip the first half.
This article will not cover detailed explanations of blockchain-related terminology.
Building the StoreHero Dapp
Learning Smart Contracts
First, smart contracts use a specialized language called Solidity.
While it shares many similarities with regular web programming, there are also quite a few differences, so some study time is required.
I started by going through CryptoZombies, a site where you can learn the basics of smart contracts.
Once I had the basics down, I wanted to learn from a real live project, so I read the source code of Nouns, a Dapp recommended by Satoshi Nakajima — the engineer famous for creating Windows 95.
By their nature, Dapps typically have open-source code, making them very easy to learn from.
Implementing the Smart Contract
For the implementation, I referenced the Nouns codebase as a foundation, though since Nouns is a feature-rich Dapp, I used a heavily simplified version of it.
Since the goal was simply to get something working, this is a very rough Dapp.
Additionally, since gas fees on the Ethereum chain are high and make it difficult to experiment freely in production, I used the Polygon chain instead. The services used during development were as follows.
- HardHat (Solidity development environment)
- Alchemy (blockchain infrastructure provider)
- Pinata (a service for storing NFT metadata off-chain via P2P rather than on your own server)
First Production Deployment (Failed)
Smart contracts cannot be modified after deployment, even if there are bugs in the code.
While the goal was just to test things out, I was a little nervous when deploying to production.
I did some testing on a test chain and in a local environment before the production deployment, but sure enough, there were bugs.
I had originally prepared 4 NFTs, but due to the bug, only 2 could be minted.
What surprised me even more was that a complete stranger minted the second NFT.
The minting cost was set to less than 1 yen, but it was a discovery that just by deploying to the Polygon chain, someone out there would find it and mint it.
Apparently, that person was selling the minted NFT on OpenSea. (laughs)
Second Production Deployment
I fixed the bug afterward, but since a deployed smart contract cannot be modified, a new one had to be deployed.
It feels a bit untidy to have the old code and NFTs still lingering while deploying a new one, but there's nothing to be done about it. The code deployed this time is working correctly so far.
Modifying the Shopify Product Page to Enable NFT Sales
Shopify has announced an NFT sales feature as a beta. Stores on the Shopify Plus plan can apply and, if they meet certain criteria, gain access to this beta.
However, since I couldn't try the beta right away, I modified the product page to enable NFT minting instead.
This was just an experiment, but if you're looking to launch NFTs for general sale, the implementation and maintenance involved is quite substantial, so I wouldn't particularly recommend this approach.
Here's what I did:
- Create a new product page template specifically for NFT sales pages.
- Edit the "Add to Cart" button so that the text and action change depending on the status: "Connect Wallet," "Purchase NFT," "Processing Purchase," "Purchase Complete," etc.
- Write code using web3.js to enable wallet connection (MetaMask in this case) and to send payment to the Dapp for minting.
The implemented code has a lot of hardcoded values and is written somewhat sloppily, but I'm publishing it in case it's useful to someone (it's just the JS portion). Please do not use it for actually selling NFTs to the general public.
Here is a video of it in action.
Trying Out Token Gating
After all that preamble, here's the main topic: token gating.
I looked into how to use it, but I couldn't find API documentation for implementing this feature, so it seems that for now, only a limited set of app partners have been given early access to build apps for it.
I tried several of the available apps, but many of them didn't work properly, and there were few that functioned reliably. On top of that, since I was using the Polygon chain rather than the Ethereum chain, my options were even more limited.
Among them, the app called Shopthru worked well, so I used it to verify the functionality.
I configured it so that only people holding a StoreHero NFT can purchase certain products.
Here is a video of the test in action.
What this app was doing was simply hiding the "Add to Cart" button on the front end — it was not restricting purchases on the Shopify backend side.
That's not really a practical problem in itself, but it did make me curious about what Shopify specifically supports on its end for the token gating feature, and what app developers need to build themselves.
Impressions After Exploring Everything
Since smart contracts cannot be modified once deployed, I felt that building your own Dapp and selling NFTs requires a serious level of commitment.
Also, the Dapp and NFT ecosystem is currently being used largely as a marketing strategy riding on buzzwords — and that's fine in its own way — but using it in a truly meaningful way is extremely challenging and requires a fundamental shift in thinking.
The model use case for Dapps is something like Bitcoin's design: specifically, code — not people — defines and governs all the rules, and the actions participants take within those rules, driven by incentives, ultimately contribute to the growth of the entire system.
Having to define all of that at the initial code design stage is genuinely difficult.
Given the high barrier to entry, I'm somewhat skeptical about whether it will become mainstream, but as Masayoshi Son said at a SoftBank shareholders' meeting, "Going against evolution leads to ruin" — so I plan to stay in the camp that assumes widespread adoption.