donation

Add a donation on cart page in Shopify

2 years after

Add donation on cart page

This quick tutorial will show you how to add a field for tip or donation to your cart page. It works by adding a product multiple times, worth $1, using Ajax.

Alt text

This donation can only be added to the order on the Cart page at /cart. This solution will not work in a cart drawer or cart popup. You will need to disable any cart drawer or popup in your theme if you wish to continue.

This tutorial won't work for you if you use the Lookbook theme.

If your store uses Classic, Pop, Solo, or Supply, visit your Customize theme page, look in the Cart page section, and deselect the Enable Ajaxify Cart box, or set the Cart type to Page.

If you use the Brooklyn theme, go to your Customize theme page, look in the Products section, and deselect the Enable slide-out shopping cart box, or in newer versions of the theme look in the Cart page section, and set the Cart type to Page.

View Demo

Features

  • Works with a donation product.
  • If product has a $1 variant, an input box is presented for user to type in an amount. Goal is to add any amount of dollars as donation to the cart.
  • Additional variants can be used for fixed amounts, e.g. $10, $50, $100, $250.
  • If there's no $1 variant, then all variants are fixed amounts.
  • Uses Ajax requests to update the cart.

Files Included

├── snippets
│   └── donation.liquid

How to use

  1. Create a donation product. If you want an input box, add a variant of $1 to it.
  2. If you want to provide fixed amount options, add those as variants to your product.
  3. On the Navigation page, create a link list with handle 'donation'.
  4. Include the donation.liquid snippet anywhere in the cart.liquid template.

Step by step instructions

  1. Create a product for your donation. Name your product however you want. Remember to uncheck This product requires shipping, and optionally uncheck Charge taxes on this product.

  2. To include a box (on your cart page) where the user inputs the exact dollar amount to donate, add a $1-priced variant to your product that also has the Title set to $1:

    Alt text

  3. Add more variants if you want to list suggested amounts on your cart page:

    Alt text

  4. If you only want to list suggested amounts, skip the $1-priced variant:

    Alt text

  5. Create a link list called "Donation". The link list name "Donation" is mandatory.

  6. Under the Links section, type in "Donation" for the Link Name.

  7. Under Links To... select Product.

  8. Click Select a product and choose the product you created, e.g. "Donation".

  9. Click Save.

  10. Go to the Edit HTML/CSS page in your Shopify admin.

  11. Under the Snippets folder, click on Add a new snippet and type in "donation".

  12. Copy (command + c on a Mac, ctrl + c on a PC) and paste (command + v on a Mac, ctrl + v on a PC) the content from this link to your snippet.

  13. Click Save.

  14. Paste the following code in your cart.liquid file. You may want to place it somewhere near your checkout button.

    {% include 'donation' %}
  15. Save your changes. You're done.

Related Repositories

npm-donate

npm-donate

Support maintainers with a donation and help them continue with activities. ...

Donation-Management

Donation-Management

This is an open source GPLed donation management platform designed for non-profi ...

awesome-donations

awesome-donations

A repository of FLOSS donation options. ...

KidneyExchange

KidneyExchange

Kidney paired donation optimization code ...

phpeste

phpeste

Donation guide for PHPeste ...


Top Contributors

carolineschnapp