<aside> ‼️ This document is outdated. Please refer to the latest version here

</aside>

<aside> 💡 If you are running a campaign we recommend testing things out a few days before your campaign. This will give our team time to help if your run into any issues. Feel free to reach our to our [email protected] email.

</aside>

Table of Contents

Installation (approx. 5 minutes or less)

To install our plugin to your Shopify store go to: https://apps.shopify.com/perc-engage

If you are having issues please reach out to [email protected]

Store settings

You are able to set some default values in PERCS Shopify Plugin to make it easier when setting up multiple campaigns.

Add your PERCS Shopify Plugin code snippets in your theme

For your campaigns to work PERCS Shopify Plugin requires that product liquid file include this code snippet. We recommend having a Online Store 2.0 theme.

1. From the Shopify Stores Liquid Templates locate the main product page (typically main-product.liquid). This is where the “Add to Cart” or “Buy Now” CTA exists.
2. Add this snippet to the that page Note: This snippet works in most cases but if the template is too customized we will need to look at how to properly add it in.

Place this script at the top of your main-product.liquid page. This looks at the product tags for perc campaigns and applies campaign types on a product page. The nft-connect property selector is a class that gets hidden/shown when the gate campaign loads.

```html
{% 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 %}
```

**Optional:** Wrap html elements you want to hide with the snippet below. **Note:** Test the UI Gate with a valid token to make sure that all the elements appears as expected locked and unlocked

```html
<!--PERCS ENGAGE: Access Gate - START -->	 
<div class="perc_product-form">
</div>  
<!--PERCS ENGAGE: Access Gate - END -->	
```

Depending on your Shopify template you will need to find the product.liquid and modify it.

![percs_engage_add_theme_snippet.gif](<https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8358e8ed-4312-4792-ba89-ce6eefe64275/percs_engage_add_theme_snippet.gif>)

3. Save and Verify that it loads correctly by using web inspect the product webpage and search for nft-connect it will list the product id

Note: Whenever you save or enable/disable a campaign it creates a file called nft-connect.js that the application uploads to the current live theme assets folder. This has some campaign information.

Known Limitations of Snippet: