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.