Skip to main content

Can I show somewhere a progress bar with number of donors from multiple donation pages?

Hi there, I am trying to set up a crowdfunding style set up in my nation where people can donate 501c3 or 501c4, whether one time or monthly. Because of how the donation pages are set up that means having 4 separate donation pages to offer those combinations. Which is fine. However I would really like to have a progress bar showing how close we are in number of donors aggregating all 4 pages, is that possible? Like if I made them all subpages of a page with a progress bar would it show them all? Thanks!

Official response from

Hey Kevin - Unfortunately that won't do it. There is no built-in way to display the results of multiple donation pages in one progress bar. However, it is possible with some custom coding using Liquid and HTML.

It sounds like you want to measure the number of total donors on your site rather than just the number of donors on one page. If so, the Liquid variable {{ settings.donors_count }} will be helpful here. Your donation page's Template probably has a snippet of code in it that looks like this:

<div class="clearfix">
{% if page.donations_count < 2 %}
<div class="bar-text bar-text-null">JUST STARTED</div>
{% else %}
<div class="bar-text">{{ page.donations_count }} donors</div>
{% endif %}
<div class="bar-goal">{{ page.donation.donor_goal }} donors</div>
<div class="progress" style="width: {{ thermo_width }}%;">
<div class="bar bar-success" style="width: {{ page.donation.percent_of_donor_goal | times:100 }}%;">
</div>
</div>
</div>

However, you can change it to this:

<div class="clearfix">
{% if page.donations_count < 2 %}
<div class="bar-text bar-text-null">JUST STARTED</div>
{% else %}
<div class="bar-text">{{ settings.donors_count }} donors</div>
{% endif %}
<div class="bar-goal">{{ page.donation.donor_goal }} donors</div>
<div class="progress" style="width: {{ thermo_width }}%;">

{% capture bar_width %}{{ settings.donors_count | divided_by: page.donation.donor_goal }}{% endcapture %}
<div class="bar bar-success" style="width: {{ bar_width | times:100 }}%;">
</div>
</div>
</div>

Share this post

Showing 1 reaction

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