Add Donation Block to Theme

Once you have created a Campaign Donation Block campaign, the next step is to add it to your Shopify theme so customers can view and donate from your storefront.

Open Theme Customization

• Navigate to: Shopify Admin → Online Store → Themes
• Click Customize on your active theme.
• The Shopify Theme Editor will open.

Add the Donation Block

In the left sidebar:

• Click Add Section or Add Block
• Open the Apps tab
• Select Donation Campaign

The donation campaign block will now be inserted into the selected page.

Configure the Donation Campaign Block

After adding the block, the settings panel appears on the right side.

Campaign ID

• Paste the Campaign ID that was generated when creating the donation campaign.
• The block automatically loads all campaign information associated with that ID.

Display Style

Choose how the donation campaign appears on the storefront.

Available options:

• Inline Donation Box

The donation form is displayed directly on the page without opening a popup.

Popup Button Text

• Enter the button label that customers will see.
• Example:
• Donate Now
• This text is only used when the selected display style includes a popup button.

Donation Box Width

Choose the width of the donation form.

Available options:

• Small Width
• Medium Width
• Full Width

This only changes the layout of the donation box.

Color Customization

• Customize the appearance of the donation block to match your store branding.

Section Background

• Changes the background color of the entire donation section.

Donation Form Background

• Changes the background color of the donation form.

Heading Color

• Controls the campaign title color.

Description Text Color

• Changes the campaign description color.

Border Color

• Changes borders around cards, buttons, and input fields.

Button & Active Amount Color

Changes:

• Donate button background
• Selected donation amount button

Button Text Color

• Changes the text color displayed inside buttons.

Preset Amount Background

• Changes the background color of preset donation amount buttons.

Preset Amount Text Color

• Changes the text color of donation amount buttons.

Input Background

• Changes the background of the donation amount input field.

Input Text Color

• Changes the text color inside the donation amount input.

Progress Bar Color

• Changes the fundraising progress bar color.

Progress Background

• Changes the remaining progress track color.

Custom CSS

• Add custom CSS to further customize the donation block’s appearance, if required.

Add Donation Progress Block

• Click Add Block → Apps → Donation Progress.
• This block displays a live summary of your fundraising campaign.

Settings

Campaign ID

• Paste the Campaign ID.

Summary Card Width

Choose the layout width.

Options:

• Full Width (100%)
• Medium Width
• Compact Width

Color Customization

Customize:

• Card Background
• Stats Card Background
• Heading Color
• Secondary Text Color
• Border Color
• Progress & Highlight Color

Custom CSS

• Add custom styling if needed.

Add Donor Wall Block

• Click Add Block → Apps → Donor Wall.
• The Donor Wall displays recent donors and recognizes community contributions.

Settings

Campaign ID

• Paste the Campaign ID.

Wall Width

Choose the display width.

Options:

• Full Width
• Medium Width
• Compact Width

Wall Heading

• Customize the heading displayed above the donor list.

Example:

• Donor Wall

Wall Description

Enter a short description.

Example:

Amazing people supporting this campaign.

Number of Donors

Choose how many recent donors should be displayed.

Show Donation Amount

• Enable this option to display each donor’s donation amount.
• Disable it to keep donation amounts private.

Show Donation Time

• Enable this option to display when each donation was made.

Color Customization

Customize:

• Wall Background
• Donor Card Background
• Heading Color
• Secondary Text Color
• Border Color
• Badge Color
• Highlight Color

Custom CSS

• Use custom CSS for advanced styling.

Save Theme Changes

After configuring all required blocks:

• Click Save in the Shopify Theme Editor.
• Visit your storefront to verify that the donation blocks display correctly.

Mark Quick Setup as Completed

• Return to the Donate Now Dashboard.
• In the Quick Setup section, click Mark as Completed beside Add Donation Block to Theme.
• This completes the setup process and updates the Quick Setup progress.