Create exclusive access to a product with limited redemption per NFT

Background

Exclusive access to a product with limited redemption per NFT can be used to giveaway a product or limit access to it a set number of times per NFT. There are three main parts to creating this campaign

Remove the product from active sales channels
Create the tokengating campaign using the PERCS NFT Gating Plug-in
Create a landing page where users can redeem their NFT(s) for access to the product


More information such as a FAQ and support for this type of campaign can be found in this doc

Why create this campaign this way?

While this is the most complicated campaign to create using PERCS, there is support available via builders@getpercs.com. After the first campaign, most clients do not need assistance creating the second campaign. The challenge is worth it since it provides security that ensures that only the users on the allow-list can access the utility. This has been used by brands such as Robert Mondavi Winery to give away $3500 bottles of wine to their NFT holders without a fraudulent claim.

Remove the product from all sales channels

Doing these steps will remove the possibility of someone forcing the product into a cart

From the Product screen ensure that the “Product status” is set to “Active”
Under Product status click “__Manage__”

Click Deselect all

Click Save

Create the tokengating campaign using the PERCS NFT Gating Plug-in

Under the Campaigns section click the Add campaign button
Enter the name of your campaign - it's recommended to add unique info such as date of creation
For campaign utility under the PERCS section select:
Access exclusive products for Type
Set Limit for Campaign redemption limit Note that the value selected will be how many products will be given per NFT which can not be changed by the user, ie if the value is five, the user will redeem one NFT for five versions of the product
Select the Products included in this campaign, more info in this doc
Select the Audiences included in this campaign, more info in this doc
Configure Pop-up UI, more info in this doc
Click the Save button

Create a landing page where customers can redeem their NFT(s) for access to a product

If this line of code below doesn’t already exist in main-page.liquid, include this line by pasting it at the top of the main-page.liquid

html <script type="text/javascript" src="https://engage.getpercs.com/store-nft-connect.js?shop={{ shop.permanent_domain }}"></script>

More information on how to do so can be found in this doc in the section titled Adding PERCS snippet to page template

Create Landing Page
Shopify encodes code snippets so it may not appear if you copy and paste the code from the Shopify page. It's highly recommended to keep a copy of all code snippets used on a local html file saved to your computer

From the Shopify admin navigate to the Pages section of the Shopify Dashboard
Click on the Add a Page button at the top right
Click the <> button - Show HTML


If the product does not have any variants (size, color, material, etc) follow the next set of instructions otherwise scroll to the section titled ""Product with multiple variants""

Product with no variants

Paste the following code snippet:

<!--PRODUCT WITH NO OPTIONS -->

<h2>{{INSERT PRODUCT NAME OR MESSAGING}}</h2>

<!--PRODUCT IMAGE --> 
<img src="{{INSERT LINK TO IMAGE URL}}" style="width: 50%;" /> 

<!--PRODUCT INFO --> 
<nft-buy-button id="nftBuyButton1" product="{{INSERT PRODUCT ID}}" 
variant="{{INSERT VARIANT ID}}">
<div><span class="label">Redeem with NFT</span></div>
</nft-buy-button>

Replace the following in the pasted html code with the appropriate values:

{{INSERT PRODUCT NAME OR MESSAGING}}
{{INSERT LINK TO IMAGE URL}}
{{INSERT PRODUCT ID}}
{{INSERT VARIANT ID}}

You can obtain the Product ID and Variant ID by following the instructions in the section titled Get Product ID and Variant ID below

Product with multiple variants

Post the following code snippet:

<!--PRODUCT WITH OPTIONS -->
<h2>

    {{INSERT PRODUCT NAME OR MESSAGING}}
</h2>

<!--PRODUCT IMAGE --> 
<img src="{{INSERT LINK TO IMAGE URL}}" style="width: 50%;" /> 
    
<!--PRODUCT 2 - The SELECT element.-->
<select id="product2VariantSelector" onchange="show(this, nftBuyButton2)">
</select>
<!--PRODUCT 2 - Redeem with NFT -->
<nft-buy-button id="nftBuyButton2" product="{{INSERT Product ID}}">
    <div>
        <span class="label">Redeem with NFT</span>
    </div>
</nft-buy-button>
<!--PRODUCT 2 - Redeem with NFT -->


<!-- Use this to debug -->
<p id="msg"></p>

<script>
    function populateSelect(variants, ele, nftBuyButton) {
        for (var i = 0; i < variants.length; i++) {
            // SELECT FIRST ITEM
            if (i == 0) {
                nftBuyButton.setAttribute("variant", variants[i]['id']);
            }
            // POPULATE SELECT ELEMENT WITH JSON.
            ele.innerHTML = ele.innerHTML +
                '<option value="' + variants[i]['id'] + '">' + variants[i]['public_title'] + '</option>';
        }
    }

    function show(ele, formSelector) {
        // GET THE SELECTED VALUE FROM <select> ELEMENT AND SHOW IT.
        var msg = document.getElementById('msg');
        msg.innerHTML = 'Selected Variant: <b>' + ele.options[ele.selectedIndex].text + '</b> </br>' +
            'ID: <b>' + ele.value + '</b>';

        console.log("SELECTED", formSelector)
        var nftBuyButton = document.getElementById(formSelector);
        formSelector.setAttribute("variant", ele.value);
    }
  // THE JSON VARIANT ARRAY.
  // You get this from the products preview page html code as in the variant-radios script json
      // REPLACE the draft product variants with your campaign product variants

  

      
    var product2 = [ 
{{INSERT VARIANT ID}} ]

    populateSelect(product2, product2VariantSelector, nftBuyButton2)
    
</script>

<!--Cart FORM -->
<form method="post" action="/cart/add" id="product-form-installment" accept-charset="UTF-8"
    class="installment caption-large" enctype="multipart/form-data">
    <input type="hidden" name="form_type" value="product">
    <input type="hidden" name="utf8" value="✓">
    <input type="hidden" name="id" value="">
</form>

Replace the following in the pasted html code with the appropriate values:


{{INSERT PRODUCT NAME OR MESSAGING}}
{{INSERT LINK TO IMAGE URL}}
{{INSERT PRODUCT ID}}
[
{{INSERT VARIANT ID}} ]

You can obtain the Product ID and Variant ID by following the instructions in the section titled Get Product ID and Variant ID below. For variant ID replace [
{{INSERT VARIANT ID}} ] with the copied code in step 8 below from the [ symbol to the ] symbol and include the square brackets

Get Product ID and Variant ID

From the Shopify admin click on the Products tab
Select the product that will included in this campaign
Click the Preview button
Open the console by right clicking on the screen and selecting inspect from the dropdown menu
Make sure you're in the Elements tab and search by pressing CTRL+F in Windows and Command+F in MacOS
Search for "var meta"
Triple click on var meta to select the entire code block
Right click to copy the block and paste it in your preferred text editor

Updated on: 31/01/2024