How do I install the PERCS Shopify Plugin?

Background

Welcome! You can install the PERCS NFT Gating app on a Shopify store via this link. Once you've installed our app from the Shopify app store, you will need to embed our code snippet in order to get campaigns made in our plug-in to show up on your page.

Adding PERCS snippet to product template

From your admin panel select “Online Store” → “Customize”
Double click on a product category that will be part of a tokengating campaign (typically default product)
Under Product information click on “+ Add block” → Custom liquid
Double click on the Custom liquid now created and paste the following code

<!-- PERC ENGAGE: BEGIN -->
  {% liquid
    assign perc = false
    assign hideCart = false
    assign percCheckout = false
    for tag in product.tags
      if tag contains 'perc:'
        assign perc = true
        if tag contains 'perc: access'
          assign hideCart = true
        endif
        if tag contains 'perc: checkout'
          assign percCheckout = true
        endif
      endif
    endfor
  %}
  {% if perc %}
  {% if hideCart %}
  <style>
    .product-form__buttons {
      display: none;
    }
  </style>
  {% endif %}
  <div>
    {% if percCheckout %}
    {% else %}
      <nft-connect
       product="{{product.id}}"
       variant="{{product.variants[0].id}}"
       selector=".product-form__buttons"
       ></nft-connect>
    {% endif %}

    <script type="text/javascript" src="https://engage.getpercs.com/store-nft-connect.js?shop={{ shop.permanent_domain }}"></script>
  </div>
  {% endif %}
  <!-- PERCS ENGAGE: END -->

Press “Save” and then on the top right and then “Exit” on the top left

Adding PERCS snippet to page template

From the Admin page access your theme via “Online Store” → “Actions”→ “Edit code”


Search for and open the store's equivalent of main-page.liquid
Add this snippet to the top of the file

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

Save your progress

All done! Recommended next steps:

Set-up and test your first tokengating campaign
Customize your default settings to match your brand
Experiment!

Updated on: 27/09/2024