If you run a Shopify store and want to accept donations, you might have noticed that Shopify’s default setup requires a fixed product price. But what if you want to allow customers to donate any amount they choose? That’s exactly what we’ll cover in this guide!
Why a Custom Donation System Matters
Imagine how freelancers charge different rates for similar work, or how nonprofits let people donate as much as they like. Your Shopify store should offer the same flexibility—allowing customers to enter their own donation amounts and make payments accordingly.
Step-by-Step Guide to Adding a Donation Feature
1. Create a Donation Product Template
To start, open your Shopify code editor and follow these steps:
- Go to Templates and create a new product template.
- Name it something like "Donation Product."
- Shopify will generate a file with pre-written code—no need to edit it. Just save and close it.
If you're using the Dawn theme, this process is simple. If you're using another theme and need help, feel free to reach out.
2. Add the Required Code
Now, we’ll modify a few key files to enable custom donation amounts.
- theme.liquid: Add the provided code at line 25.
{% if template.suffix == 'donation-pro' %}
<style>
.shopify-payment-button .shopify-payment-button__button--unbranded {position: relative;}
.shopify-payment-button .shopify-payment-button__button--unbranded:after { animation: pulse 1s infinite;
content: "Donate Now"; background: inherit; font-size: inherit; color: inherit; height: 100%; width: 100%;display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0;}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}</style>{% endif %}
- main-product.liquid: Paste another code snippet below line 44.
{% if template.suffix == 'donation-pro' %}
<style>
button#ProductSubmitButton-template--19190031941888__main { display: none;}
button.quantity__button { display: none;}
input#Quantity-{{section.id}} { text-align: left;}
quantity-input.quantity { padding: 10px; width: 100%;}
</style>
{% endif %}
-
product.liquid (or similar file): Locate the line containing
product.product.quantity.label(around line 506) and replace it with the custom donation code.
{% if template.suffix == 'donation-pro' %}
<h3> Enter Your Donation Amount </h3>
{% else %}
{{ 'products.product.quantity.label' | t }}
{% endif %}
3. Set Up Your Donation Product
Now, head back to Shopify and create a new product:
- Give it a title and image.
- Set the price to ₹1.
4. How the Donation Input Works
By default, Shopify calculates the total price based on product quantity. We’re using this feature to create a donation system:
- The quantity selector is transformed into a donation input field.
- Since the product price is ₹1, entering a quantity of 250 results in a total of ₹250.
- This effectively turns the quantity into the donation amount!
- For hiding Add To Cart button apply CSS property (display : none)
For example:
- If a customer enters 10, Shopify calculates 10 × ₹1 = ₹10, which becomes the donation amount.
- If they enter 10,000 and click "Donate Now," the donation total updates to ₹10,000.
Benefits of This Donation Setup
- Easy to implement—no need for expensive apps or third-party integrations.
- Works seamlessly with Shopify’s built-in checkout system.
- Gives customers the flexibility to donate any amount they prefer.
