Turn Your NationBuilder Donation V2 Page Into a Staged Donation Page

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

Demos

Mega-Theme Demo

Bootstrap Framework Demo

NOTE: The Mega-Theme demo is our customized version of the Donation V2 page. The Bootstrap Framework demo is the raw, uncustomized version. 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 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 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.