How to Tokengate Content and Commerce on Shopify

  • Updated

Note: A Silver Subscription or higher is required to utilize Tokengating.

Note: This is an optional step in the process of creating an NFT. You can choose to skip over it if you prefer.

Note: Want to use our tokengating feature for third-party Solana NFTs that were minted elsewhere? No problem! Click HERE.

When creating an NFT in Single, you have the option to designate what content it will unlock within your store for fans when they hold that NFT in their wallet. This is also known as tokengating. There are many uses for this and the possibilities are extensive! A few examples include, but are not limited to:

  • Creating NFT holder exclusive merch drops
  • Allowing NFT holders to access/purchase content and products early
  • Creating exclusive video content that only NFT holders can access
  • Offering NFT holders exclusive discounts on merch

Note: Want to see exactly how to offer exclusive merch discounts to NFT holders by using the tokengating feature? Click HERE. (But make sure to finish reading this article first!)

The entire process of setting up tokengated content and commerce involves some configuration in both the Single app and Shopify. In this article, we'll cover both the Single and Shopify aspects of the process in their own sections. We will demonstrate a scenario in which we want to gate access of an exclusive shirt and vinyl so that only NFT holders can purchase them. Additionally, we will gate access to a particular page, which can contain exclusive content (behind the scenes photos, an artist blog with a comment section, etc.), in the store that we only want NFT holders to be able to view.

Note: Though most aspects of an NFT cannot be edited after it is published, the Utility section can be changed as many times as you want, even after the mint has ended! This allows you to continually update the content that it unlocks for fans who own it. For example, once you have sold out of an exclusive shirt that you have tokengated, you can remove it from the gated content list (click the trash can icon to the right of the content listing from the Utility page of the NFT) and add new content that will now be gated instead. This is also helpful in that it allows you to add additional gated content over time, which keeps things fresh and fans engaged.

 

Part 1: Single

Once you reach the Utility page while creating an NFT, click the "Select Items" button within the "Gated Access" section.

Screen_Shot_2022-10-04_at_11.13.38_AM.png

Next, select the type of content to be gated from the Content Type drop down menu.

Screen_Shot_2022-10-04_at_10.06.56_AM.png

After you have selected the content type, use the search bar to find the product, video, or page you want to tokengate.

Note: Carousel product images will not be displayed for tokengated content. Only the featured product image will display when you gate a product.

Note: Tokengating of only a specific product variant is not supported. You must gate the product and all variants of it.

Screen_Shot_2022-10-04_at_10.08.14_AM.png

Next, set the Required NFT Amount and Permitted Purchase Quantity fields (if you have selected Page as your content type, you will only be able to set the Required NFT Amount field), as well as the Discounts Allowed toggle:

The Required NFT Amount determines what quantity of the NFT fans need to be holding in order to access the Product or Page that is tokengated. For example: Say you want fans who hold just one of the NFT to only be able to access an exclusive shirt, but want fans who hold two or more of the NFT to have access to an exclusive vinyl as well. You could do this by setting the Required Amount field for the shirt to "1" and then the Required NFT Amount field for the vinyl to "2."

The Permitted Purchase Quantity field (only applicable if the content type is set to Product) determines the amount of that product a fan can purchase when they own the NFT. This is useful to prevent just a few people from buying out your exclusive tokengated products all at once and to ensure that all NFT holders have a fair chance to purchase them. For example, if you only want to allow NFT holders to purchase a maximum of two of the gated product you are setting up, you would change the Permitted Purchase Quantity field for that product to "2."

The Discounts Allowed switch (only applicable if the content type is set to Product) determines whether or not the product that is being tokengated will be eligible for discount codes. If you leave the switch off, the product will not be discountable in anyway. If you enable, discount codes will be applicable to the product. You can have a mixture of Discounts Allowed and non-Discounts Allowed products gated by the same NFT at once. Each product's discount eligibility is determined by its own Discounts Allowed switch.

If you have selected "Video" as your content type to add Video on Demand to your store, please see HERE for more information.

Screen_Shot_2022-10-04_at_10.23.59_AM.png

Finally, choose whether or not you want customers to be able to preview the tokengated content in your store by turning the Content Preview toggle on or off. If you are gating a product and turn this switch on, it means that fans who do not already own the NFT will still be able to see the product in your store, but will be unable to purchase it until they own the NFT. If you are gating a specific page in your store, it means that fans who do not already own the NFT will be able to go to the page, but will only see a prompt telling them that they need to purchase the NFT before they can access the content. 

Screen_Shot_2022-10-04_at_10.23.59_AM.png

If you want to add additional content to be tokengated by the NFT, click the "+ Add Item" button. For the purposes of this guide, we'll add an additional product and page. When you are done adding all of the content you want to be gated, make sure to click the "Save All" button.

Note: You can rearrange the order in which your gated content is displayed by dragging and dropping the content in the order you desire.

Screen_Shot_2022-10-04_at_10.27.47_AM.png

Once you have added all of your tokengated content, you can then customize the message your fans will see upon successfully transferring the NFT into their wallet. You can do this in the "Message" field of the "Transfer Successful Message" section of the page. This can be used to tell them to go check out what content and products they have unlocked with their purchase, using your own, personalized message! 

Screen_Shot_2022-10-04_at_10.29.23_AM.png

In addition to customizing the message that fans will see, you can also customize what the button they see along with the message will say. You can do this in the "Button Label" field of the "Transfer Successful Message" section. 

Note: You can also customize the URL to which this button will take fans when they click it by editing the "Button Link" field. However, by default this is set to take them to the Exclusives page that is automatically created in your store. Generally, it is best to leave this set to the default URL. We suggest that you only change this field if you are an advanced user and have a unique situation that needs to be addressed. 

Screen_Shot_2022-10-04_at_10.29.30_AM.png

For example, based on the text included above, here's what fans will see on the Transfer Successful landing page after claiming the NFT:

Screen_Shot_2022-05-16_at_2.54.47_PM.png

Once you have finished customizing the "Transfer Successful Message" section, make sure to click the "Save" button. 

Screen_Shot_2022-10-04_at_10.32.52_AM.png

Lastly, after you have selected all of your gated content and made any desired customizations, click the "Create Bundles" button at the bottom of the page to continue.

Screen_Shot_2022-10-04_at_10.33.03_AM.png

From here, you can choose to bundle your NFT and then finalize and publish it! This is all covered from start to finish in our Creating an NFT article.

 

Part 2: Shopify

In order to work around aspects of Shopify and tokengate content based on NFT holding status, it is required that Single move these gated pieces of content off of any sales channels. Don't worry, products will still be purchasable and pages and videos still viewable to customers that meet the NFT holder requirement! This is just how Single runs the show in the background. 👌

❗️IMPORTANT❗️

Do NOT add content that is tokengated back on to any sales channels. If you do so, content gating will cease to function. 

In addition to removing tokengated content/products from any sales channels in your store, Single also creates several pages that are used to power the content gating process. They are listed below:

Screen_Shot_2022-08-18_at_1.30.23_PM.png

  • Exclusives (previously named "NFT Global Landing"): A publicly facing page that you can add to your Navigation/Menus, etc. This page will display the current subscription of the customer, as well as all content they have unlocked for purchase or viewing in your store, based on said subscription. Gated content that is preview-able, but the customer does NOT have the appropriate NFT to unlock, will NOT be included on this page. 
  • Gated Content Entry: Strictly a utility page. This page ensures that the correct tokengated content displays with the associated NFT. This page is public, but does not need to be interacted with.
  • Gated Content List Entry: A page that displays all of the tokengated content that has been made preview-able for any specific NFT collection. This page is public, but does not need to be interacted with inside of your Shopify admin directly. However, it will be put it to use, as you’ll see in a bit.

    In summary, you do not need to pay attention to any of these pages inside your Shopify Admin besides the Exclusives page. That is the only one that you will want to consider adding directly to your navigation, menu, etc., as it serves as a hub for all of the content any particular customer has unlocked with their NFT ownership. The Gated Content List Entry page does come into play in order to display/preview what tokengated content is unlocked by each individual NFT in your store, but you will not directly add this page anywhere. Instead, there is a different way to go about this as we will cover below.

 

❗️IMPORTANT❗️

DO NOT delete or rename any of these pages, as it will break the content gating functionality. When you add a page to your navigation, it will allow you to give it a display name that people will see. Here, it is fine to use whatever DISPLAY name you want for the page. Just don't actually RENAME the pages.

 

Time to get creative! Now that know what's going on behind the scenes, let's set up our store to accommodate for the tokengated content. How you do this is very customizable and totally dependent on how you want your store to look and function. We leave these tools in your hands so that you can get things set up just how you envision them. Having said that, we'll take a look at a basic tokengated content example scenario below, to help get you going.

 

The "Exclusives" Page (previously named "NFT Global Landing")

Let's start by adding the Exclusives page to our store Navigation. By going to this page, customers can quickly see any unlocked, exclusive products that they have access to based on which NFTs they hold within their wallet.

To add this page to our store Navigation, from our Shopify Admin, we simply go to Online Store > Navigation > Menus > Select or Add Menu > Add Menu Item > Search for/Add "Exclusives" > Save Menu 

Note: For a more detailed explanation of how to edit and add to your Navigation, click HERE.

As you can see, there is now a link to the Exclusives page located in our main Navigation menu at the top of our store. We have chosen to have this link display as "Exclusive Content."

Note: While you must not change the ACTUAL name of the page, while adding the page to your Navigation/Menu, you change the name that will be displayed for it. This does not rename the page itself, just the actionable item/button that directs customers to it.

Screen_Shot_2022-05-17_at_11.10.23_AM.png

Upon clicking the "Exclusive Content" button (the Exclusives page) that's now in our Navigation/Menu, customers will be asked to log in with their Solana wallet. 

From there, they can click "Connect Wallet," select which type of Solana wallet they have, and login.

If the customer holds an NFT that unlocks tokengated content in the store, after logging in with their wallet, they will be able to access the exclusive content and view the gated page.

If they lack the required NFT to unlock the tokengated content, after logging in with their wallet, they will simply see a page stating that there is no exclusive content viewable to them at this time.

 

Individual NFT Tokengated Content Collections

This all looks great so far! However, wouldn't it be nice if customers had a way to see what content a particular NFT unlocked before purchasing it? Or if there was a way for customers who already own an NFT to quickly see what content a specific NFT has unlocked (as opposed to the Exclusives page, which shows ALL unlocked content from ALL of the NFTs held in a customer's wallet). This would be especially helpful if you were to add other NFTs to your store with varying tokengated content associated with them...

Well, remember how we said that the Gated Content List Entry page would come into play earlier? It is this page that will allow us to let customers see what content each particular NFT in your store unlocks, if you have the "Content Preview" switch enabled for your tokengated content (you can choose to leave this toggle turned off if you want to keep any content completely hidden/unknown to your customers until they have already purchased the associated NFT). Having said that, this page works behind the scenes and you will not be adding it directly to your Navigation like we did with the Exclusives page.

Let's take a look at how this works...

First, for the context of this demonstration, let's say we decide that we want to offer another, cheaper NFT that only unlocks the exclusive shirt, instead of the shirt, vinyl, and exclusive page. To do so, we'll create a second NFT in the Single app and set the Utility functions for it to only unlock the exclusive shirt (using the demonstrated process from earlier in this article). We'll name this one "Demo NFT 2" ("Demo NFT" was the name of the first one we created that unlocked all 3 pieces of content).

In this particular situation, we want to create a drop down menu in our Navigation called "NFT Content Collections." Then, within that drop down menu, we will have listings for "Demo NFT" and "Demo NFT 2." These listings will technically take customers to a version of the Gated Content List Entry page, but again, it is important to note that we are NOT adding this page to our Navigation in the same way we did with the Exclusives page. Instead, follow these steps:

Note: Click HERE to read more about creating drop down menus in Shopify

First, let's go back to the Navigation section in our Shopify Admin. From there, since we want to add it to the same main menu at the top of the store as we did earlier in this example, we'll click "Main Menu."

Screen_Shot_2022-05-17_at_1.04.13_PM.png

Next, we'll click "Add Menu Item." We'll name this new menu item "NFT Content Collections" and make it so that it doesn't link anywhere (we're just using this menu item as the drop down section for our individual NFT content display pages, so it doesn't need to link anywhere itself). We can do this by adding # in the link section.

Screen_Shot_2022-05-17_at_1.08.56_PM.png

Now, let's nest/add our individual NFT content display pages within the "NFT Content Collections" menu item we just created. We'll click "Add Menu Item" again and name it "Demo NFT." This time, though, instead of searching for an already existing page or location in the store within the Link field, we'll go back to the Single app. From there, we'll need to go to the NFT who's tokengated content display page we want to link to. We'll start with "Demo NFT."

Once we're viewing that NFT in the Single app again, we'll click the "View Gated Content Collection" button.

Screen_Shot_2022-05-17_at_1.12.57_PM.png

The page that opens is what we want to link to within our "Demo NFT" drop down menu item (again, this is technically the Gated Content List Entry page, but as stated earlier, we're adding it in a different, more indirect way here). We'll start by copying the URL from this page.

Screen_Shot_2022-05-17_at_1.14.21_PM.png

Now that we have our URL, we'll go back to Shopify, paste it into the Link field of the new menu item, and click the "Add" button.

Screen_Shot_2022-05-17_at_1.26.44_PM.png

Now we can drag the "Demo NFT" menu item into the "NFT Content Collections" menu item to nest it within and create a drop down menu. We will then repeat this process for "Demo NFT 2" by going to the Single app, grabbing the URL for the Gated Content Collection page of "Demo NFT 2," making a new menu item in Shopify called "Demo NFT 2," adding our URL to the Link field, and nesting it in our drop down menu called "NFT Content Collections."

Screen_Shot_2022-05-17_at_1.33.02_PM.png

After we're done, we'll make sure to hit the "Save Menu" button on the bottom right of the page.

Let's go check out our store and see what it looks like!

Screen_Shot_2022-05-17_at_1.34.36_PM.png

If a customer clicks on either menu item nested under "NFT Content Collections," they'll be taken to the tokengated content display page for that particular NFT. Here, they will be able to see the content that is unlocked by that specific NFT, whether or not they own the NFT already, but only if the "Content Preview" toggle (covered earlier in the "Part 1: Single" section of this article) is turned on for the content. If the "Content Preview" toggle is left off, customers who do not own the NFT already will not see a preview of the tokengated content when clicking on the content display page for that NFT. In that case, the gated content will not show up for the customer anywhere in the store until they own the correct NFT to unlock it.

This is what our NFT Content Collection pages look like when the "Content Preview" toggle is left on.

Demo NFT:

Screen_Shot_2022-05-17_at_1.37.02_PM.png

Demo NFT 2:

Screen_Shot_2022-05-17_at_1.42.19_PM.png

There are many options available that allow you to set this up how you like and customize your exclusive content in a way that suits your particular store. Get creative and experiment with different layouts, NFTs, content preview vs. non-content preview enabled content, etc.! For example, if you wanted to offer NFT holders exclusive, early access to a new merch product, you could tokengate that product behind the NFT up until the release date. At that time, you could then remove it from the gated content of the NFT, making it available to everyone. The possibilities are endless!

Note for advanced users: If you customize the templates for the pages utilized in the Utility/Gated Content Access features, it is highly recommended that you turn on "Developer Mode" within the Single app. This will ensure that any updates deployed by Single do not alter your customizations. If you do not do this, app updates could result in you losing any customizations you have made to the page templates.

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request