Tetchi x Wordpress

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.

donation box

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.

donation product

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:

donation linklist

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).

checkout price

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

Pam

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

Marco

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

Ben

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 πŸ™‚

tetchi

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?

d

November 1st, 2018

Funny how everyone has the same problem and finds a fix but doesn’t post the solution..

Rebecca

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!

Toyo

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

Conrad

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.

george mcloughliln

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

katy

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.

Danielle

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!!

Danielle

February 12th, 2014

Sorry, two more cents to add — if I click “checkout” and then go back, I see the donation in the cart.

Danielle

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.

Ken

November 13th, 2013

Never mind, figured it out!

Ken

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!

Trevor

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

Trevor

October 25th, 2013

This is great!
Any ideas on how to manage the cart in case the user hits return to store within checkout?

Maria

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.

Gabe

October 3rd, 2013

James

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

Bruno

July 10th, 2013

Thank you Tetchi!

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.

Bruno

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!

Jamie

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.

Bruno

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!

tetchi

March 29th, 2013

What are you shop URLs? I’m wondering if it’s conflicting with some other JS.

Kristina

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.

Kerry Lowes

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?

Kittypie

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.

tetchi

January 2nd, 2013

thanks Craig!

Craig

January 2nd, 2013

Really smart solution. Love it.

tetchi

December 29th, 2012

Thanks Jamie! πŸ˜€

Jamie

December 29th, 2012

Great job Tets! πŸ˜€ + first comment πŸ˜‰