Staged NationBuilder Donation V2 Page

This tutorial explains how to add staged donation functionality to the NationBuilder Bootstrap framework and Aware public theme, and can be easily applied to the other public themes as well.

Last Updated November 1st, 2018


Demos

Mega-Theme Demo

Bootstrap Framework Demo

Aware Public Theme Demo

NOTE: The Mega-Theme demo is our customized version of the Donation V2 page. The Bootstrap framework and Aware public theme demos are the raw, uncustomized versions. If you're interested in our Mega-Theme version or having us set this up for you, feel free to get in touch.


Installation Steps

NOTE: If you're using a custom donation page template, this will overwrite your current donation page.

Download the Boostrap Framework Conversion Kit

Download the Aware Public Theme Conversion Kit


1. Download the conversion kit via the link above, and unzip the archive.

2. In control panel go to Website and select the site you wish to modify.

3. Click on Theme.

4. If you already have a custom theme, select Current custom theme. Otherwise, select New custom theme and make sure you select Start with Bootstrap framework or are cloning the Aware public theme before creating the theme.

5. Select Files and upload the stylesheet, template, and scripts included in the unzipped directory created in step 1 (_staged-donations.scss, jquery.ui.effect-slide.min.js, jquery.ui.effect.min.js, pages_show_donation_v2_wide.html, staged-donations.js).

6. Select the Templates and open layout.html.

Add the following before the </head> tag on line 17, and save and publish:

<script type="text/javascript" src="jquery.ui.effect.min.js"></script>
<script type="text/javascript" src="jquery.ui.effect-slide.min.js"></script>
<script type="text/javascript" src="staged-donations.js"></script>

It should look like this when you are done (NOTE: Lines 35-39 are all you're concerned with in the below image, and your line numbers will probably be slightly different.):

7. Click Save and publish changes. Return to Templates, and open theme.scss. Add the following below "Donation v2 page" on lines 421-422, and Save and publish changes:

@import "staged-donations";

NOTE: The shortcode should go on its own line in between the horizontal line of dashes and ".page-pages-show-donation-v2-wide", like so:

8. Staged donations should now be enabled on your Donation V2 pages.

Get In Touch

We are located in Austin, TX (Central Time).