Making Shopify work with UK Gift Aid

At the Men’s Health Forum, we’ve been using Shopify for a while now and we really love it.

They have a great value non-profit rate (if you ask nicely). It’s great for handling trading. It’s great for handling digital downloads. All we needed was for it to handle donations and we were done!

The good news is that there’s a pretty straightforward way of doing it by using Shopify’s approach to collecting customisation information – as outlined here.

To make a Shopify product page work for donations we wanted to do three things:

  • Ask about Gift Aid
  • Remove the quantity selector
  • Put the description above the area where people select the donation

You can do all of this by working your way through the customisation page – with a few tweaks along the way.

  1. Create a new template for donations
    Take the same approach as Shopify outline for customisable products – although I called my page donation instead of customizable.
  2. Add customisable form fields that ask about Gift Aid.
    The code I used for this was:

    <div>
         <h3>Gift Aid</h3>
         <p><strong>Boost your donation by 25p of Gift Aid for every £1 you donate. </strong>Please treat as Gift Aid donations all qualifying gifts of money made: </p>
         <p><input type="checkbox" id="giftaid-today" name="properties[Include Gift Aid made on donations today]" value="Yes"/> <label class="inline" for="giftaid-today">Today</label></p>
         <p><input type="checkbox" id="giftaid-p4y" name="properties[Include Gift Aid made on donations in the past 4 years]" value="Yes"/> <label class="inline" for="giftaid-today">In the past 4 years</label></p>
         <p><input type="checkbox" id="giftaid-future" name="properties[Include Gift Aid made on donations in the future]" value="Yes"/> <label class="inline" for="giftaid-today">In the future</label></p>
         <p id="taxstatement"><small>I confirm I have paid or will pay an amount of Income Tax and/or Capital Gains Tax for each tax year (6 April to 5 April) that is at least equal to the amount of tax that all the charities or Community Amateur Sports Clubs (CASCs) that I donate to will reclaim on my gifts for that tax year. I understand that other taxes such as VAT and Council Tax do not qualify. I understand the charity will reclaim 28p of tax on every £1 that I gave up to 5 April 2008 and will reclaim 25p of tax on every £1 that I give on or after 6 April 2008.</small></p>
    </div>

    The relatively long name descriptors are needed to make the shopping cart and payment pages look sensible when your visitors check out.

  3. Remove the quantity selector
    Just replace the selector code with a hidden input field. Specifically, replace:

    <div class="product-single__quantity{% unless settings.product_quantity_enable %} is-hidden{% endunless %}">
         <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
         <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector"/>
    </div>

    with

    <input type="hidden" id=Quantity" name="quantity" value="1" min="1" class="quantity-selector" />
  4. Add a bit of JavaScript to hide the Gift Aid text until needed.
    I added the following inside the final script tag:

    var countChecked = function() {
         var n = $( "input:checked" ).length;
         if( n == 0 ) {
              jQuery("#taxstatement").hide();
         } else {
              jQuery("#taxstatement").show();
         }                              
    };
    countChecked();
    jQuery( "input[type=checkbox]" ).on( "click", countChecked );
  5. Reorder the page until you have it how you want it.
    I moved:

    <div class="product-description rte" itemprop="description">
         {{ product.description }}
    </div>

    just below the form tag:

  6. Create a new product in Shopify as you would do normally, but select product.donation as the template suffix (in the bottom right of the page). The end result should look something like this.

Er. That’s it. Comments and suggested improvements welcome.

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.
This entry was posted in Charity, Gift Aid, Shopify. Bookmark the permalink.

1 Response to Making Shopify work with UK Gift Aid

  1. Hi Martin,

    I hope you are well! My name is Mike and I co-run the digital communications agency Add10.

    I’m commenting more as a thanks really as I came across the site after looking for gift-aid integration with Shopify. I actually used some of your code to create a new app that allows charitable organisations to create donation products and collect gift aid (by way of your cart checkbox). It also goes one step further by allowing charities the option of running a report and saving the results in an excel spreadsheet ready to send on. I’m hoping to find some smaller charities to help with developing the app a little further!

    Anyway thanks and hope it all goes well in Hampshire and with the Men’s Health Forum!

    Thanks,

    Mike

Get in Touch

Your email address will not be published. Required fields are marked *