Picket Docs
  • ๐Ÿ‘‹Welcome to Picket
  • Quick Start Guides
    • ๐Ÿš€Quick Start Guides
      • โš™๏ธStart Here: Setup
      • ๐Ÿ”Wallet Login
      • ๐Ÿช™Token Gating (Ethereum / EVM)
      • ๐ŸคบToken Gating (Solana)
      • ๐Ÿคนโ€โ™‚๏ธIncremental Token Gating
      • โ›”Restrict Access to Specific Wallets
      • ๐Ÿ”‘Working with Access Tokens
  • Reference
    • ๐ŸŽ“Concepts
      • ๐ŸŒŠAuth Flow
      • ๐Ÿ—ƒ๏ธConnect
      • โœ๏ธSignatures
      • ๐Ÿ”Authentication and Authorization
      • ๐ŸคนIncremental Authorization
      • ๐Ÿช™Access Tokens
      • ๐ŸงชTesting
      • โ‰๏ธErrors
      • โ›“๏ธSupported Blockchains
      • ๐ŸŒSupported Languages (Localization)
      • ๐ŸŽจModal Themes
      • ๐Ÿ’ฟOpen Source Web3 Client Libraries
    • ๐Ÿ“šLibraries and SDKs
      • Javascript Library - picket-js
      • React SDK - picket-react
      • Node.js Library - picket-node
      • Go Library - picket-go
      • Python Library - picket-python
    • ๐Ÿ”ฅIntegrations
      • ๐ŸŒˆPicket Authentication with RainbowKit
      • โšกSupabase
      • โ˜๏ธAmazon Cognito
      • ๐Ÿ›๏ธPicket Shopify App - Merchant Documentation
      • ๐Ÿ›’Picket BigCommerce App - Merchant Documentation
    • ๐Ÿ“–API Reference
      • Projects & API Keys
      • Auth
      • Chains
      • Wallets
      • Contracts
      • OAuth 2.0
  • ๐Ÿ•น๏ธTutorials
    • ๐ŸŒŽSign-In with Wallet (React)
    • ๐ŸฐToken Gated Photo Board (React)
    • ๐Ÿ”—Link a Wallet to a Web 2.0 Account
    • ๐ŸคIncremental Authorization (React)
Powered by GitBook
On this page
  • Overview
  • Installation
  • Setting Token Gated Discounts (Ethereum and other EVM Chains)
  • Setting Token Gated Exclusive Products
  • Storefront Theme Installation
  • Support
  1. Reference
  2. Integrations

Picket BigCommerce App - Merchant Documentation

Token gated commerce with a few simple clicks from your BigCommerce dashboard

PreviousPicket Shopify App - Merchant DocumentationNextAPI Reference

Last updated 2 years ago

Overview

Token gated products and discounts are common use cases of the Picket API. The Picket app on BigCommerce allows you to set up token gated discounts and token gated products from BigCommerce admin without the need for custom code.

Token Gated Discounts:

Token Gated Exclusive Products

Installation

Setting Token Gated Discounts (Ethereum and other EVM Chains)

Before you begin, make sure that you have the Picket app for BigCommerce installed on your store and open in the BigCommerce control panel.

  1. Add your Picket API Key to the BigCommerce Picket App

Copy your publishable key and paste it in the corresponding field in BigCommerce Picket App.

2. Select the tokens you would like to use for your token gate

For Ethereum and other EVM chains, this is done by putting the contract address of the tokens you'd like to use for your token gate into the contract address field.

3. Select how many tokens you want to require users to have

For NFT token gates this is most commonly set to 1. However, this is up to you.

4. Set the discount rate you'd like to give to users who have the token you require

5. Select any products that you'd like the discount to apply to for users who hold your chosen token.

Setting Token Gated Exclusive Products

Follow the same steps above for setting token gated discounts. However, instead of selecting products at the end as discount products within the "Token Gate Configuration by Product Section" within the BigCommerce control panel. Select products as exclusives with the checkboxes shown below:

Storefront Theme Installation

1. Modify Theme Code ๐Ÿ‘ฉโ€๐Ÿ’ป

To get started, we need to modify your BigCommerce's storefront theme files.

  1. From your BigCommerce control panel, go to Storefront > Themes. If you have multiple stores, your storefront theme will be under the Channel Manager.

  2. Click Edit Theme.

    1. If you are using the default BigCommerce theme, you'll have to Copy your theme before you will be able to edit it.

Once you've opened up the theme editor (Page Builder), click Theme Styles > Edit Theme Files

2. Start Adding Picket HTML Snippets โœ‚

Once you've opened up the Storefront theme file editor, you'll see several directories

For this guide, we are going to modify the following files

  • /templates/components/products/add-to-cart.html

  • /templates/components/products/price.html

  • /templates/components/products/price-range.html

  • /templates/components/products/card.html

  • /templates/components/products/product-view.html

  • /templates/components/products/custom-fields.html

  • /templates/pages/cart.html

Here are references to the components will copy-paste into the files listed above

add-to-cart.html
<!-- Picket Success Message Container -->
<div 
    style="margin: 8px 0; display: none; align-items: center;" 
    data-picket="success-container"
    {{#any product.custom_fields name="picket_discount" value="true"}}
    data-picket-discount='true'
    {{/any}}
    {{#any product.custom_fields name="picket_exclusive" value="true"}}
    data-picket-exclusive='true'
    {{/any}}        
  >
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20" class="picketPurpleColor">
    <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" />
  </svg>
  <span style="margin-left: 8px; line-height: normal;" data-picket="success-message">
    You're saving 15% as a token holder
  </span>
</div>
<!-- Picket Verify Token Ownership Button -->
<button type="button" class="button picketButton" style="display: none;" data-picket="login" sty>
Verify Token Ownership
</button>
price.html
<!-- Add Price Information for Picket to Modify  -->
<div data-picket='price-container' 
     {{#if page_type '===' 'product'}}
     data-picket-product-id="{{product.id}}"
     {{else}}
     data-picket-product-id="{{id}}"
     {{/if}}
     data-picket-product-price="{{price.without_tax.value}}"
     {{#if price.saved}}
     data-picket-product-price-saved="{{price.saved.value}}"
     {{/if}}
     class="price-section price-section--withoutTax"
    >
    <span class="price-label" {{#if price.non_sale_price_without_tax}}style="display: none;"{{/if}}>
        {{theme_settings.pdp-price-label}}
    </span>
    <span class="price-now-label" {{#unless price.non_sale_price_without_tax}}style="display: none;"{{/unless}}>
        {{> components/products/price-label
            label_value=theme_settings.pdp-sale-price-label
            fallback=(lang "page_builder.pdp-sale-price-label")
        }}
    </span>
    <!-- Track Regular Price, so Picket can Strikethrough on Token Discount  -->
    <span data-picket='price-regular-amount' data-product-price-without-tax class="price price--withoutTax{{#if price.with_tax}} price-section--minor{{/if}}">{{price.without_tax.formatted}}</span>
    {{#if price.with_tax}}
        <abbr title="{{lang 'products.excluding_tax'}}">{{lang 'products.price_without_tax' tax_label=price.tax_label}}</abbr>
    {{/if}}
  <!-- Show Token Holder Discounted Price (If Applicable)  -->
    <span 
      data-picket="price-discount-container" 
      style="display: none; margin: 4px 0; align-items: center;"
      >
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 27 27" fill="currentColor" style="color: var(--picket-purple);">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M0.0883789 13.5C0.0883789 25.401 12.1676 31.4412 19.095 23.0923C23.5363 17.763 23.5363 9.23694 19.095 3.90849C12.1679 -4.44045 0.0883789 1.59978 0.0883789 13.5008V13.5ZM24.4243 22.3816H20.8722C19.4515 24.336 17.6743 25.9337 15.5429 27C19.2732 27 22.1158 25.4011 24.4246 22.3816H24.4243ZM26.733 16.6979H23.0027C22.6473 18.4739 22.1146 20.0729 21.4038 21.3162H24.9559C25.844 20.0727 26.3766 18.4739 26.732 16.6979H26.733ZM20.871 4.61859H24.4232C22.1144 1.59891 19.2721 0.000244141 15.5415 0.000244141C17.673 1.06653 19.4492 2.66439 20.8708 4.61859H20.871ZM23.0026 10.3024H26.7329C26.3774 8.52628 25.8448 6.92736 24.9568 5.50662H21.4047C22.1155 6.92728 22.6481 8.5263 23.0036 10.3024H23.0026ZM23.1797 11.1904V15.8088H26.9101V11.1904H23.1797Z" fill="currentFill"/>
      </svg>
      <span style="padding-left:8px;" class="price-item price-item--regular" data-picket="price-discount-amount"></span>
</span>
</div>
honents
card.html
<!-- Show Token Exclusive Badge for Applicable Products -->
{{#any custom_fields name="picket_exclusive" value="true"}}
  <div data-picket="token-exclusive" class="card-text" style="width: fit-content; color:white; background-color: var(--picket-purple); border: none; border-radius: 12px; padding: 2px 8px;">
    Token Exclusive
  </div>
{{/any}}
product-view.html
<!-- Picket: Show Token Exclusive Badge if Applicable -->
{{#any product.custom_fields name="picket_exclusive" value="true"}}
<div data-picket="token-exclusive" style="display: inherit;margin: .5rem 0rem;color: white;background-color: var(--picket-purple);border: none;border-radius: 12px;padding: 4px 8px;width: fit-content;">
  Token Exclusive
</div>
{{/any}}
custom-fields.html
{{#each product.custom_fields}}
<!-- Picket: Do not Display Picket Metadata Custom Fields -->
{{#contains name "picket_"}} {{else}}
<dt class="productView-info-name">{{name}}:</dt>
<dd class="productView-info-value">{{{value}}}</dd>
{{/contains}} {{/each}}

Now we can start modifying the theme's existing files to enable token gating.

3. Token Gate Products ๐ŸŒ‰

The first step in enabling token gating is to allow users to verify token ownership. To do this, we want to place an a Verify Token Ownership button near any "Add to Cart" buttons.

Place this snippet on product pages above payment buttons like "Add to Cart", "Buy Now", etc.

    <!-- Picket Success Message Container -->
    <div 
        style="margin: 8px 0; display: none; align-items: center;" 
        data-picket="success-container"
        {{#any product.custom_fields name="picket_discount" value="true"}}
        data-picket-discount='true'
        {{/any}}
        {{#any product.custom_fields name="picket_exclusive" value="true"}}
        data-picket-exclusive='true'
        {{/any}}        
      >
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20" class="picketPurpleColor">
        <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" />
      </svg>
      <span style="margin-left: 8px; line-height: normal;" data-picket="success-message">
        You're saving 15% as a token holder
      </span>
    </div>
    <!-- Picket Verify Token Ownership Button -->
    <button type="button" class="button picketButton" style="display: none;" data-picket="login">
    Verify Token Ownership
    </button>

Now users are able to verify token ownership! If you are looking at a token exclusive or discounted product, you should see a button like this

Next, we need to prevent users who don't hold the required tokens from adding token holder exclusive products to their cart.

To prevent users from purchasing exclusive products, we remove the payment buttons until the user has verified that they hold the necessary tokens. We do this by conditionally adding style="display: none;" and data-picket="payment-buttons-container" if the product is a token holder exclusive.


<!-- Hide Add to Cart Button by Default if Item is a Token Exclusive  -->
<div 
    class="add-to-cart-buttons"
    {{#any product.custom_fields name="picket_exclusive" value="true"}}
    style="display: none;"
    data-picket-exclusive='true'
    {{/any}}
    data-picket='payment-buttons-container'
    >
{{#if add_to_cart_url }}
<!-- Hide Quick Add to Cart Button if Item is Exclusive -->
{{#any custom_fields name="picket_exclusive" value="true"}}
{{else}}
    <a href="{{add_to_cart_url}}" data-event-type="product-click" data-button-type="add-cart" class="button button--small card-figcaption-button">{{lang 'products.add_to_cart'}}</a>
    <span class="product-status-message aria-description--hidden">{{lang 'category.add_cart_announcement'}}</span>
{{/any}}    
{{/if}}

For token holder exclusive products, the payment buttons should be hidden, so you only see the verify token ownership button, like this

We now have token gated products! Next let's improve the user experience by showing which products are token gated and/or eligible for token holder discounts.

4. Display Token Holder Exclusive Badge ๐Ÿชช

We want to indicate to users which products are exclusive to token holders. Similar to how we indicate which items are on sale, we are going to show a badge next to the price of products that are exclusive to token holders.

<!-- Show Token Exclusive Badge for Applicable Products -->
{{#any custom_fields name="picket_exclusive" value="true"}}
  <div data-picket="token-exclusive" class="card-text" style="width: fit-content; color:white; background-color: var(--picket-purple); border: none; border-radius: 12px; padding: 2px 8px;">
    Token Exclusive
  </div>
{{/any}}

Next, we'll add the same badge with slightly different styling to the product page

<!-- Picket: Show Token Exclusive Badge if Applicable -->
{{#any product.custom_fields name="picket_exclusive" value="true"}}
<div data-picket="token-exclusive" style="display: inherit;margin: .5rem 0rem;color: white;background-color: var(--picket-purple);border: none;border-radius: 12px;padding: 4px 8px;width: fit-content;">
  Token Exclusive
</div>

Once inserted, you'll see a badge next to the price of token holder exclusive products, like this

Next, we'll show the discounted price for products that are discounted for token holders.

5. Display Token Holder Discount Price ๐Ÿท

There are a few steps to showing the discounted product price for token holders. First, we are going to find the <div>s that contain the price displayed in our shop. Second, we will display the discounted price for token holders. And finally, we'll mark the regular price with a data attribute, so we can cross it out for users who hold the necessary tokens.

Find the container around the price displayed in your shop. In all relevant containers, add data-picket="price-container" to the container element

<!-- Add Price Information for Picket to Modify  -->
<div data-picket='price-container' 
   {{#if page_type '===' 'product'}}
   data-picket-product-id="{{product.id}}"
   {{else}}
   data-picket-product-id="{{id}}"
   {{/if}}
   data-picket-product-price="{{price.without_tax.value}}"
   {{#if price.saved}}
   data-picket-product-price-saved="{{price.saved.value}}"
   {{/if}}
   class="price-section price-section--withoutTax"
  >

Within the price container, we are going to display the discounted price that token holders pay

<!-- Show Token Holder Discounted Price (If Applicable)  -->
<span 
  data-picket="price-discount-container" 
  style="display: none; margin: 4px 0; align-items: center;"
  >
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 27 27" fill="currentColor" style="color: var(--picket-purple);">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.0883789 13.5C0.0883789 25.401 12.1676 31.4412 19.095 23.0923C23.5363 17.763 23.5363 9.23694 19.095 3.90849C12.1679 -4.44045 0.0883789 1.59978 0.0883789 13.5008V13.5ZM24.4243 22.3816H20.8722C19.4515 24.336 17.6743 25.9337 15.5429 27C19.2732 27 22.1158 25.4011 24.4246 22.3816H24.4243ZM26.733 16.6979H23.0027C22.6473 18.4739 22.1146 20.0729 21.4038 21.3162H24.9559C25.844 20.0727 26.3766 18.4739 26.732 16.6979H26.733ZM20.871 4.61859H24.4232C22.1144 1.59891 19.2721 0.000244141 15.5415 0.000244141C17.673 1.06653 19.4492 2.66439 20.8708 4.61859H20.871ZM23.0026 10.3024H26.7329C26.3774 8.52628 25.8448 6.92736 24.9568 5.50662H21.4047C22.1155 6.92728 22.6481 8.5263 23.0036 10.3024H23.0026ZM23.1797 11.1904V15.8088H26.9101V11.1904H23.1797Z" fill="currentFill"/>
  </svg>
  <span style="padding-left:8px;" data-picket="price-discount-amount"></span>
</span>  

Once this snippet is inserted, we should see the discounted price displayed below or next to the original price

Lastly, we are going to mark the regular price with a data-picket="price-regular-amount" . This allows us to strikethrough the regular price once a user has verified token ownership.

<!-- Track Regular Price, so Picket can Strikethrough on Token Discount  -->
<span data-picket='price-regular-amount' data-product-price-without-tax class="price price--withoutTax{{#if price.with_tax}} price-section--minor{{/if}}">{{price.without_tax.formatted}}</span>

Amazing! Once a user verifies token ownership, they will automatically have the discount code applied at checkout to the relevant products and will see the new prices like this

6. Show Token Discount Message in Cart ๐Ÿ’Œ

Finally, we want to show users that have successfully verified ownership that they will have a discount applied at checkout to any eligible products.

To add the cart message, find the code that displays the checkout button on the cart page

<!-- Picket: Show Message in Cart if Discounts Have Been Applied -->
<div
  class="picketCartMessage"
  data-picket="cart-message-container"
  style="display: none"
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 27 27"
    fill="currentColor"
    style="color: var(--picket-purple)"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M0.0883789 13.5C0.0883789 25.401 12.1676 31.4412 19.095 23.0923C23.5363 17.763 23.5363 9.23694 19.095 3.90849C12.1679 -4.44045 0.0883789 1.59978 0.0883789 13.5008V13.5ZM24.4243 22.3816H20.8722C19.4515 24.336 17.6743 25.9337 15.5429 27C19.2732 27 22.1158 25.4011 24.4246 22.3816H24.4243ZM26.733 16.6979H23.0027C22.6473 18.4739 22.1146 20.0729 21.4038 21.3162H24.9559C25.844 20.0727 26.3766 18.4739 26.732 16.6979H26.733ZM20.871 4.61859H24.4232C22.1144 1.59891 19.2721 0.000244141 15.5415 0.000244141C17.673 1.06653 19.4492 2.66439 20.8708 4.61859H20.871ZM23.0026 10.3024H26.7329C26.3774 8.52628 25.8448 6.92736 24.9568 5.50662H21.4047C22.1155 6.92728 22.6481 8.5263 23.0036 10.3024H23.0026ZM23.1797 11.1904V15.8088H26.9101V11.1904H23.1797Z"
      fill="currentFill"
    />
  </svg>
  <div
    style="margin-left: 8px; line-height: normal"
    data-picket="cart-message"
  >
    You are saving 15% on eligible items as a token holder
  </div>
</div>

And that's it! For users that have verified token ownership, they'll see a message like this

7. Done ๐ŸŽ‰

And that's it! You are all done. You have enabled token gated products with an awesome user experience all controllable from an admin panel.

Support

Enabling token gated discounts allows you to set discounts that can only be applied by users who hold the NFT or other token that you specify. You can do this on a product by product basis. You also can choose to require NFTs or tokens on any of the that Picket supports.

Enabling token gated exclusive products allows you to set products as exclusives that can only be purchased by users who hold the NFT or other token that you specify. You can do this on a product by product basis. You also can choose to require NFTs or tokens on any of the that Picket supports.

You can install

Your Picket API key is located in your and is listed under publishable key.

If you don't know the contract address of the tokens you'd like to use for your token gate, you can find it for Ethereum and othfer EVM based chains by searching for your desired NFTs or other tokens .

This guide is based off of the . The installation process involves the same steps for every theme, but the location of the them files and html you need to modify will differ.

Once you've configured your token gated exclusive and discounted products, you need to make it visible within your BigCommerce Storefront theme. Like many other BigCommerce apps, this requires modifying the theme files, adding additional html templates, and adding data-picket attributes to existing elements.

We'll walk you through each step in the process below, but if you get stuck or run into issue, don't hesitate to reach out to .

Checkout if you run into issues

This guide uses . The names of files and where you add additional token gating markup will differ between themes, but the concept and components will remain the same.

In the , we want to add this code to the templates/components/products/add-to-cart.html file right above to the add to cart buttons near

In the this snippet should be place in templates/components/products/add-to-cart.html near the bottom of file on the <div class="add-to-cart-buttons"> on

Depending on your storefront theme, you may have to add this logic to multiple places. In the , you only need to add it to one more place. There is also an add to cart button that shows on hover on the product browsing page. Let's hide that for products that are token holder exclusives

In the this snippet should be place in templates/components/products/card.html in the {{#if add_to_cart_url }} section between

Add the following components to wherever your theme displays badges next to the product title. For the , there are two locations we want to display token exclusive badges: the product card previews and the product page. First we'll add it to the product card previews

In the this snippet should be place in templates/components/products/card.html above the {{#if brand.name}}section between

In the this snippet should be place in templates/components/products/product-view.html below the product brand {{#if brand.name}}section between

In the this snippet should be place in templates/components/products/price.html to replace the <div class="price-section price-section--withoutTax">section on

In the this snippet should be place in templates/components/products/price.html after

In the this element is in templates/components/products/price.html on

In the this snippet should be placed in templates/pages/cart.html after {{{region name="cart_below_totals"}}}

Need help setting up your token gated products and discounts? If you have any trouble with these instructions or just have a few questions, we're here to help. Email us at or with a member of our engineering team for more hands on realtime help.

๐Ÿ”ฅ
๐Ÿ›’
chains
chains
Picket from the BigCommerce App Store
Picket dashboard
here
v6.7.0
BigCommerce Cornerstone theme
handlebar
team@picketapi.com
BigCommerce's documentation
Cornerstone v6.7.0
Cornerstone v6.7.0
line 43
v6.7.0 Cornerstone theme,
line 45
v6.7.0 Cornerstone theme
v6.7.0 Cornerstone theme,
lines 103-106
v6.7.0 Cornerstone theme
v6.7.0 Cornerstone theme,
lines 122-123
v6.7.0 Cornerstone theme,
lines 102-103
v6.7.0 Cornerstone theme,
line 72
v6.7.0 Cornerstone theme,
line 85
v6.7.0 Cornerstone theme,
line 82
v6.7.0 Cornerstone theme,
on line 30
team@picketapi.com
find some time for a zoom call
Token Gated BigCommerce Storefront
Cart Discount Message