Match Giving: Show/Hide rows when Match Giving is on

This guide walks you through how to set up rows on your campaign page that will only appear when Match Giving is active. This lets you customise what supporters see during your match period, creating a more dynamic Giving Tuesday campaign experience.

Step 1: Add the Match Giving Calculator

To activate this feature across your campaign, you’ll need to place the Match Giving Calculator block in your footer. This ensures the calculator is loaded on every page.

1

Go to Pages → Header & Footer.

2

Add the Match Giving Calculator block to the footer.

3

Remove the block’s heading so it isn’t visible to supporters.

4

Enable Hide When Inactive.

Once added, the calculator will detect when Match Giving is on, triggering your show/hide rules.

Step 2: Add Rows With Custom Classes

Next, decide which rows you want to show or hide depending on whether Match Giving is active.

1

Create (or duplicate) the row you want to show when Match Giving is active.

2

Go to the row’s Advanced settings → Attributes.

3

Add the custom class match--active.

4

Create (or duplicate) the row you want to show when Match Giving is inactive.

5

Add the custom class match--inactive.

When Match Giving is toggled on, any row with match--active will appear. When it’s off, rows with match--inactive will be displayed instead.

Step 3: Apply the CSS Code

Now you’ll need to add a small piece of custom CSS to make the show/hide functionality work. In the page builder, click the paint brush icon in the top bar to open the Custom CSS editor, paste the code below, and then click Save Changes.

// MATCH GIVING - Activated when match giving is on (via Calculator block)
.page--is-client.page {
  &:not(:has(.matched-giving-calculator__heading--active)) {
    .match--active {
      display:none;
    }
  }
}
.page--is-client.page {
  &:has(.matched-giving-calculator__heading--active) {
    .match--inactive {
      display:none;
    }
  }
}

Summary

By combining the Match Giving Calculator, custom row classes, and this CSS snippet, you can control which rows display when Match Giving is live. This allows you to create powerful, time-sensitive messages and banners that appear exactly when you need them.

Cannot find the answer you are after? Be sure to try AI Answers (bottom-right), or head over to Raisely School to view course modules to aid your learning. You can even leave us comments, suggesting new content ideas 🤯