We recommend having experience modifying liquid templates before attempting this modification.

In the event you need to make edits within the PERCS components ie. add buttons, links or modify css.

Edit components in a tokengated discount or exclusive access with unlimited access per token campaign

There are several ways to add these changes one way is to add a custom liquid block in the main-product.liquid and pasting the script in that. The other way is editing the main-product.liquid file directly. Always validate that the changes are appearing as expected.

Move discount box to the left Side

<!-- moves discount code component to the left side -->
<script> 
  window.addEventListener('DOMContentLoaded', (event) => {
  	document.querySelector("nft-connect").shadowRoot.querySelector("style").insertAdjacentHTML("afterEnd", "<style> #wrapper { left: 20px  } </style>")
	})
</script>

Move discount box up

<aside> 💡 You can change the height moved by editing the value of { bottom: 250px }

</aside>

<!-- moves discount code component up -->
<script> 
  window.addEventListener('DOMContentLoaded', (event) => {
      document.querySelector("nft-connect").shadowRoot.querySelector("style").insertAdjacentHTML("afterEnd", "<style> #wrapper { bottom: 250px  } </style>")
    })
</script>

Inserting a button in the shadow DOM PERCS gate component

<aside> 💡 This can be used to insert a button to the Token Gate for exclusive products. In this example the button will link to a donation page

</aside>

<script>
    var donateButton = "<a href='{{Enter URL}}' class='cta' style='margin: 15px 0px;
      text-decoration: none; border: 2px solid var(--brand-color);
      background-color: white;color: var(--brand-color);
      'target='_blank'>{{Enter Text}}</a>";
      window.addEventListener('DOMContentLoaded', (event) => {
      var el = document.querySelector("nft-connect").shadowRoot.querySelector(".content");
      el.insertAdjacentHTML('beforeend', donateButton);
    });
    </script>

Enter your values for:

{{Enter URL}}

{{Enter Text}}