Shopify Tutorial: Adding a Tip or Donation to the Cart page
Shopify Tutorial – learn how to take donations from the cart page in your shop.
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.
40 Comments
Great job Tets! :D + first comment ;)
Thanks Jamie! :D
Really smart solution. Love it.
thanks Craig!
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.
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?
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.
What are you shop URLs? I’m wondering if it’s conflicting with some other JS.
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!
@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.
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!
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.
Thank you Tetchi!
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
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
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.
This is great!
Any ideas on how to manage the cart in case the user hits return to store within checkout?
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
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!
Never mind, figured it out!
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.
Sorry, two more cents to add — if I click “checkout” and then go back, I see the donation in the cart.
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!!
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.
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
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.
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
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!
Funny how everyone has the same problem and finds a fix but doesn’t post the solution..
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?
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 :)
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
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
Hello,
I’m having the same issue as many of the others. The box is showing up, but I can’t get it to add to the cart.
Why it isn’t update is simple, this tutorial is very old!
1. change the event binding depending on the theme;
$(‘[name=”checkout”], [name=”update”]’).click(function(e) {
2. Cannot find anything to do with linklists therefore had to get the variant ID manually;
Go to the product which you made (/products/donation), open up chrome dev tools, click on network -> HXR. Add the product to your basket and click on the ajax request (add.js) in the dev tools and scroll to the bottom until you reach the “Form Data” section which is where you will find the variant ID.
3. Update the javascript from the gist, the data property in params to be exact;
data: {
form_type: ‘product’,
id: 29704444344594,
‘option-0’: ‘Default Title’,
quantity: amount
},
(replace id with your variant ID)
4. remove the following;
{% assign linklist = linklists[‘donation’] %}
var id = {{ linklist.links.first.object.variants.first.id }};
DONE.
I have spent a day on this and can’t get it to work. Can you please revise the code for a modern Shopify install? I can’t believe there isn’t an App for this!
I also am having the same issue. The donation doesn’t pull through to the subtotal on the next page. Anyone?
Worked perfectly. Thanks!
Hey Rick! I see you figured this madness out! Your website looks amazing! I am trying to do the same for my website and got as far as the button showing up, but as soon as I enter the tip amount, it disappears! Which I see is the most common issue everyone has had since 2012! I have been following every guide I’ve seen for this workaround for over a week now. Is there any way you could help? Maybe just send the code you used for donation-snippet? Any help is much appreciated!
I had a developer install this and he added this to the top of cart.liquid and it worked:
https://code.jquery.com/jquery-2.1.4.min.js