Customizing icon/button to launch discount modal

Background

You have a discount campaign and you would like to customize the way users access their discount campaigns to match your branding.

Default Setting

The default method to launch the discount modal is when the user clicks on a floating gift icon on the bottom right of the product page.

Branding Options

The default setting can be replaced by any html component the user clicks such as an image or button that can either be floating or embedded. Here are some examples:
Floating Icon such as the leisure project icon here
Button with customized text such as the Spottie Wifi campaign here

Pseudocode

Below is the pseudocode for the customized discount launcher which contains four code blocks

The first block must be included and it checks to see if a discount tag has been added
The second block runs if the product does have an active discount campaign
The third block defines the html object the user would click on to launch the discount modal
This is the part that will be customized to match the store’s branding
The fourth block launches the discount modal when the user clicks on the object defined in the third block

Code Example

<!-- PERCS block START: This is for the PERCS Engage Discount launcher. -->

<!-- This first block must be added. It checks to see if a discount tag has been added to the product -->
{% liquid
    assign percDiscount = false
    for tag in product.tags
      if tag contains 'perc: discount'
        assign percDiscount = true
      endif
    endfor
  %}

<!-- This second block only runs if a tokengated discount campaign is active on the product-->
{% if percDiscount %}

    <!-- This third block defines what is to be clicked on to launch the discount modal-->
    <!-- the code onclick="showModal() must be added to the style-->
    <button class="whym-tmti-drawer-trigger-button product-form__submit button button--full-width button--secondary" style="margin-top: 8px;"  onclick="showModal()"">
      Claim NFT Discount
    </button>

    <!-- This fourth block launches the discount modal when user clicks on an html component with the onclick="showModal() style added to it-->
    
    <script>
      function showModal() {
        if (window.PERCS) {
          window.PERCS.openProductModal({{product.id}})
        }
      }
    </script>

{% endif %}
  <!-- PERCS block END: This is for the PERCS Engage Discount launcher. END -->

Getting Started

The default product template would need to be edited, below is one way of doing so
From the Shopify admin click on Online Store
Click on the Customize button on the current live theme
Click on the top drop down with the Home Page value and select Products

Select Default Product or equivalent, changes made here must cover all products that will have a discount campaign on them
Under Product information click Add block and select </> Custom liquid
Click on the just created Custom liquid block and paste the code snippets from one of the below sections
Click on the Save button on the top right

Floating button (FAB) with custom image option

Note that you should email builders@getpercs.com with your store URL and a request to remove the default "gift" FAB when you've added your custom FAB

In this example change the image link on line 36, <ENTER IMAGE URL HERE>, to the image link of your choosing.

{% liquid
    assign perc = false
    assign hideCart = false
    assign percCheckout = false
    assign percDiscount = 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
      if tag contains 'perc: discount'
        assign percDiscount = true
      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 %}

    {% if percDiscount %}
      <style>
        .fab {
          position: fixed;
          bottom: 22px;
          right: 22px;
          width: 56px;
          height: 56px;
          border-radius: 50%;
          background-color: white;
          z-index: 10;
        }

      </style>

      <div class="fab" onclick="showModal()">
        <!-- change icon below -->
        <img width="110px" height="55px" src="Add your image url here"" />
      </div>
    
      <script>
        function showModal() {
          //alert('Image clicked!');
          if (window.PERCS) {
            window.PERCS.openProductModal({{product.id}})
          }
        }
      </script>
    {% endif %}

    <script type="text/javascript" src="https://engage.getpercs.com/store-nft-connect.js?shop={{ shop.permanent_domain }}"></script>
  </div>
{% endif %}
  <!-- PERCS block END: This is for the PERCS Engage Discount launcher. END -->

Embedded button option

Note that you can have this button and the default floating gift icon as launchers for the discount modal. Alternatively, you can email builders@getpercs.com with your store URL with a request to remove the default “gift” FAB

The inline button should match your primary or secondary button from your theme. If this does not occur, reach out to builders@getpercs.com for support.

In this example change the text in line 19 to customize the button text

<!-- PERCS block START: This is for the PERCS Engage Discount launcher. -->

<!-- This block must be added. It checks to see if a discount tag has been added to the product -->
{% liquid
    assign percDiscount = false
    for tag in product.tags
      if tag contains 'perc: discount'
        assign percDiscount = true
      endif
    endfor
  %}

    <!-- This block only runs if a tokengated discount campaign is active on the product-->
    {% if percDiscount %}

    <!-- This block defines what is to be clicked on to launch the discount modal-->
    <!-- the code onclick="showModal() must be added to the style-->
    <button class="whym-tmti-drawer-trigger-button product-form__submit button button--full-width button--secondary" style="margin-top: 8px;"  onclick="showModal()"">
      Claim NFT Discount
    </button>

    <!-- This block launches the discount modal when user clicks on an html component with the onclick="showModal() style added to it-->
    
    <script>
      function showModal() {
        
        if (window.PERCS) {

          window.PERCS.openProductModal({{product.id}})
        }
      }
    </script>

{% endif %}
  <!-- PERCS block END: This is for the PERCS Engage Discount launcher. END -->

Updated on: 06/12/2024