Skip to main content

How do I add a goal bar to the Donation (V2) page?

The older version of donation pages had a goal bar (a.k.a. thermometer) to display a donor's impact on our organization's fundraising goals. The updated donation pages are awesome, but I miss this feature. How do I add it to the new page type?

Official response from

UPDATE: You can now modify the code for your donation v2 pages to be able to set both donation and donor goals on any page going forward! 

These features are also now available on donation v2 pages for all public themes by default. 



You can still add a goal bar to the Donation (V2) type pages, but you'll need to hard code it into the template level. To set a goal for your page, you'll need to create a new variable. In the example code below, I called my variable "donationGoal" and set my goal to 1000. If you are using a currency other than USD, you will want to change '$' to the appropriate monetary symbol. 

The following code will create a donation goal bar for the donation amount collected on a Donation (V2) page:

 

{% assign thermo_width = 50 %}
{% assign donationGoal = 1000 %}
{% assign donationsPercentOfGoal =  page.donations_amount_format | remove: '$' | remove: ',' | divided_by: donationGoal %}
<div id="donation-goal-bar" style="padding: 10px;">
<div class="clearfix">
<h3 style="text-align: center; padding-bottom: 20px;">Donation Goal</h3>
    <div class="progress" style="width: {{ thermo_width }}%;">
        <div class="bar bar-success" style="width: {{ donationsPercentOfGoal | times: 100 }}%">
            {% if page.donations_count < 1 %}
                 <div class="bar-text">JUST STARTED</div>
            {% else %}
                 <div class="bar-text">{{ page.donations_amount_format }} raised</div>
            {% endif %}
        </div>
    </div>   
<div class="bar-goal">GOAL: ${{ donationGoal }}</div>
</div>
</div>

 

 

If you would like to create a donor goal bar, you could use this code on the Donation (V2) page:

{% assign donorGoal = 10.00 %}
{% assign numberOfDonors = page.donations_count %} 
{% assign donorProgressBar =  numberOfDonors | remove: ',' | divided_by: donorGoal %}
<div id="donor-goal-bar" style="padding: 10px;">
   <h3 style="text-align: center; padding-bottom: 20px;">Donor goal</h3>
     <div class="clearfix">
       <div class="progress" style="width: {{ thermo_width }}%;">
         <div class="bar bar-success" style="width:{{ donorProgressBar | times:100 }}%;">
         {% if page.donations_count < 2 %}
            <div class="bar-text">JUST STARTED ({{ numberOfDonors }} donor)</div>
         {% else %}
            <div class="bar-text">{{ page.donations_count }} donors</div>
         {% endif %}
         </div>
       </div>

    <div class="bar-goal">GOAL: {{ donorGoal | round }} donors</div>  </div>
</div>

 

To adjust the goals, you would need to change the value for the "donationGoal" and the "donorGoal" variables. For example, if I wanted to change my donation goal from $1000 to $10,000, I would change the "donationGoal" from "1000" to "10000".

Share this post

Showing 3 reactions

How would you tag this suggestion?
Please check your e-mail for a link to activate your account.