Getting Started

This tutorial will show you how to create customized NFT based checkout button in your shopify store.

Step1: In your Shopify Store, go to Online Store on the left tab

Step2: Under Themes, click on Customize (green)

Step3: Click on any product to get to the checkout page

Step4: Go to the left panel, click on add block under Product Information section and

choose custom liquid on the right panel

Step5: Enter the following code to the section and save

Note that the name of the buy and add-to-cart button might vary from theme to theme, for example in some themes the add to cart button might be named product-form__cart-submit.

Contact us if you encounter any issue editing the theme.

{% comment %}
#######################Start ProtoL Block#######################
{% endcomment %}
 <div>
  <script>
    const redirectToProtoLVerifier = () => {
      window.open(
        `https://app.protol.xyz/token-validator?shop=${window.Shopify["shop"]}&productId=${window.ShopifyAnalytics?.meta?.product["gid"]}`
      );
    };
  </script>
  {% if product.available == true %}
    {% for tag in product.tags %}
      {% if tag == "protol_nft_discount_tag" %}
        <div style="border: 2px solid #757575;cursor: pointer;" onclick="redirectToProtoLVerifier()">
          <div style="background:#ffffff;padding: 0.5rem 0.8rem;display: flex;flex-direction: column;justify-content: center;align-items: center;cursor: pointer;">
            <p style="color:#757575;margin-top: 0.3rem;margin-bottom: 0.5rem;cursor: pointer;text-align: center;">Verify NFT to claim discount</p>
          </div>
        </div>
      {% else if tag == "protol_nft_exclusive_tag" %}
        <div style="border: 2px solid #757575" onclick="redirectToProtoLVerifier()">
          <div style="background:#ffffff;padding: 0.5rem 0.8rem;display: flex;flex-direction: column;justify-content: center;align-items: center;cursor: pointer;">
            <p style="color:#757575;margin-top: 0.3rem;margin-bottom: 0.5rem;cursor: pointer;text-align: center;">Connect Wallet</p>
          </div>
          <script type="text/javascript">
            const paymentButtons = document.getElementsByClassName("shopify-payment-button");
            const addToCartButtons = document.getElementsByClassName("product-form__cart-submit");

            for (let i = 0; i < paymentButtons.length; i++) {
                paymentButtons[i].remove();
            }
            for (let i = 0; i < addToCartButtons.length; i++) {
                addToCartButtons[i].remove();
            }
          </script>
        </div>
      {% endif %}
    {% endfor %}
  {% endif %}
</div>
{% comment %}
#######################End ProtoL Block#######################
{% endcomment %}

All set, then after creating token gate rules on our site, you will be able to see the wallet based checkout buttons.