Shopify Tutorial: Adding a Tip or Donation to the Cart page
This is a quick tutorial to show you how to add a field for donations on your cart page. It works by adding a product worth $0.01 multiple times via AJAX.
You can see a demo of this here (you’ll have to add a product in the cart first).
Let’s get started!
1. Create a product for your donation
The first thing you need to do is create a product that will be your donation. This product will be a single-option, with a single variant worth $0.01.
2. Add the donation product to a link list.
Create a link list called “Donation”. Add a product link, select “Product” under Links To, and then select the “Donation” product. It should look like this:
3. Add a donation field to your cart page
This step is pretty theme-dependent. If you need a hand with placing and styling the textbox, please check with the designer of your theme or ask in the design forums.
Grab the following code and place it inside your “cart.liquid” template. You may want to place is somewhere near your check out button.
Donation or Tip:
4. Add the donation script to theme.liquid
Inside your Template Editor, create a new snippet called “donation-snippet”. Add the contents of this gist inside it.
Place the following code right before the </body> tag in theme.liquid.
{% include 'donation-snippet' %}
(Optional) Hide the donation product’s price from the Checkout
You’ll notice that on the checkout page, it’ll show the quantity times $0.01 (shown below).
If you’re looking to hide this, you can add a bit off CSS in your “checkout.css.liquid” file to hide the price.
h3[title="Donation"] + span{
display:none;
}
Make sure the value of “title” is the title of your product, which should be “Donation” if you’ve been following this tutorial :D.
The End
That’s all! Hope it helps.
33 Comments
February 13th, 2019
Hi Tetchi, I’m having the same issue as marco. I’ve been able to add the donation field to the cart but it never updates to the checkout page. Please help- your tutorial is great so far!
Thanks,
Pam
January 2nd, 2019
Hi Tetchi, please HELP
Iβm having the same issue as it looks like a few others have had. I think I followed all the steps correctly, but when I put a number into the donation box on the checkout page and click update or checkout, it doesnβt update the total help please
Marco
November 5th, 2018
Hi, I’ve been having a go at this but I’m useless at html and completely stuck! Is there anyone who could set up the donation box for me? Happy to pay for the time π
November 2nd, 2018
Hey Rebecca, d, I’m so sorry – admittedly I’ve been horrible at replying to the comments on my old tutorials π
I’d love to help out if I can. Can you tell me what you’re having trouble with, or what error messages you might be getting?
November 1st, 2018
Funny how everyone has the same problem and finds a fix but doesn’t post the solution..
September 27th, 2017
Hi! Great tutorial! I’m having the same trouble as everyone else… the donation box is showing up but it’s not adding to my cart. Please help! Thank you!
July 28th, 2017
Hi Tetchi,
I’m having the same issue as it looks like a few others have had. I think I followed all the steps correctly, but when I put a number into the donation box on the checkout page and click update or checkout, it doesnβt update the total and deletes the amount I put in.
Help?
Thanks!
Toyo
January 18th, 2016
Hey Tetchi. I’m having the issue where the donation box is there but nothing happens when I enter a number. ayoblak.myshopify.com. I’m using the lookbook theme. Think you can help? I’ve been searching for this type of solution for a while now.
August 24th, 2015
meridiths-catering.myshopify.com site not launched yet….any chance I could get email addresses of those that responded, my goal is to review their websites and reach out to find what works and what to avoid…as you see, I am on east coast and the chances that trade secrets could not be shared is slim…hoping they would help a fellow foodie….thanks George
July 25th, 2015
hey! OMG LOVE!! only issue is trying to hide the donation price in the checkout screen…am i possibly adding the CSS in the wrong order?
Also is there a way…when one returns to checkout and has added a donation the Donation also appears in the cart. Way to hide that too?
Anything typed in the donation box then gets added additionally…
Just some thoughts – otherwise, this wasnt just a $$ saver but also, literally the perfect fix. Love it. Thank you.
February 12th, 2014
You can delete all my comments π Its all ironed out. Funny how you figure things out right when you ask for help. Thank you for the awesome tutorial, you rock!!
February 12th, 2014
Sorry, two more cents to add — if I click “checkout” and then go back, I see the donation in the cart.
February 12th, 2014
Thank you for being a lifesaver! I am having the same issue as many of the others – when I put the donation amount into the box and click “update”, the donation amount does not post to the cart. I see that other people did get a solution, but it wasn’t posted here for me to sample π And just FYI, the URL I provided is a test site.
November 13th, 2013
Never mind, figured it out!
November 13th, 2013
I followed all your code, but when I checkout it is not adding the “donation” price to the $0.01.
Any thoughts?
By the way, this is a great fix!
October 25th, 2013
Also when a user goes back to his store the Cart has the number of products entered… is there anyone that has done a script to simply automatically remove this from the cart when you return to the store? Assumption is that if someone returns to the store they are changing something so should also change their tip
October 25th, 2013
This is great!
Any ideas on how to manage the cart in case the user hits return to store within checkout?
October 3rd, 2013
Hi…what a awesome find…I’ve been looking for a solution to adding gratuities to my lunch catering business. I successfully followed everything but ran into the same issue as others above…the amount I entered in the field wouldn’t update or “stick”. I think you mentioned that the link in the gist was to an old version…is the tutorial updated with the new? I am VERY novice so I am just following your instructions kind of blindly!
Any help would be SO appreciated.
October 3rd, 2013
I created a “donation” SKU in our store http://shopsantaclarasporting.myshopify.com/collections/goals-for-a-cure-collection/products/goals-for-a-cure-donation and it works!
Thanks,
Gabe
July 29th, 2013
Hi
I am having the same problem as some of the others (when I add a value into the donation box and press update/checkout the donation is not added and the $ amount disappears).
I’m wondering if it is because we use PayPal as the payment method and when the buyer clicks on Checkout button it takes them straight to PayPal rather than the interim Shopify page?
Thanks
James
July 10th, 2013
Thank you Tetchi!
July 10th, 2013
Sorry folks. I was linking to an old version of the gist this whole time. I’ve gone ahead and updated that so the script is more fool-proof.
July 10th, 2013
Jamie, thank you very much for your help. It is huge for us to be able to get donations this way.
A thousand thank yous!
July 10th, 2013
@Bruno, I fixed your shop for you and I have a recommend for the gist in the tut to make this less of an issue in the future.
July 8th, 2013
Hi Tetchi,
I am having the same problem as Kittypie, Kerry Lowes and Kristina (when I add a value into the donation box and press update/checkout the donation is not added and the $ amount dissapears).
Did you find a resolution for this? My store is: http://mobia-bookstore.myshopify.com/
Thanks!
March 29th, 2013
What are you shop URLs? I’m wondering if it’s conflicting with some other JS.
March 29th, 2013
Yup, me too. Same problem as the other two guys. Can’t get the donation to actually take. Just disappears when I put it in.
March 1st, 2013
Hi,
I’m having the same problem as Kittypie. Althought I can see the donations box, when I input an amount it will not add to the total. Please can you help?
February 26th, 2013
I think I followed all the steps correctly and the donation box is showing up on the checkout page, but when I put in a random figure into the donation box on the check out page and click update total, it doesn’t update it at all and deletes the amount I put in.
I also wondered if there’s a way to link the “Donation” text (by clicking on it) in the checkout page to another page where customers are given more information about donating.
January 2nd, 2013
thanks Craig!
January 2nd, 2013
Really smart solution. Love it.
December 29th, 2012
Thanks Jamie! π
December 29th, 2012
Great job Tets! π + first comment π