tetchi blog

Tetchi's blog about life and stuff

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.

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.

40 Comments

  • Jamie
    Jamie on December 29th, 2012

    Great job Tets! :D + first comment ;)

  • tetchi
    tetchi on December 29th, 2012

    Thanks Jamie! :D

  • Craig
    Craig on January 2nd, 2013

    Really smart solution. Love it.

  • tetchi
    tetchi on January 2nd, 2013

    thanks Craig!

  • Kittypie
    Kittypie on 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.

  • Kerry Lowes
    Kerry Lowes on 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?

  • Kristina
    Kristina on 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.

  • tetchi
    tetchi on March 29th, 2013

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

  • Bruno
    Bruno on 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!

  • Jamie
    Jamie on 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
    Bruno on 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!

  • tetchi
    tetchi on 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
    Bruno on July 10th, 2013

    Thank you Tetchi!

  • James
    James on 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

  • Gabe
    Gabe on October 3rd, 2013
  • Maria
    Maria on 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.

  • Trevor
    Trevor on October 25th, 2013

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

  • Trevor
    Trevor on 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

  • Ken
    Ken on 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!

  • Ken
    Ken on November 13th, 2013

    Never mind, figured it out!

  • Danielle
    Danielle on 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.

  • Danielle
    Danielle on 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
    Danielle on 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!!

  • katy
    katy on 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.

  • george mcloughliln
    george mcloughliln on 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

  • Conrad
    Conrad on 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.

  • Toyo
    Toyo on 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

  • Rebecca
    Rebecca on 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!

  • d
    d on November 1st, 2018

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

  • tetchi
    tetchi on 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?

  • Ben
    Ben on 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 :)

  • Marco
    Marco on 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

  • Pam
    Pam on 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

  • Cesar Lozoya
    Cesar Lozoya on July 31st, 2019

    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.

  • Luke Snowden
    Luke Snowden on August 8th, 2019

    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.

  • AskDougTech
    AskDougTech on November 30th, 2019

    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!

  • Trisha
    Trisha on March 25th, 2020

    I also am having the same issue. The donation doesn’t pull through to the subtotal on the next page. Anyone?

  • Rick Gatewood
    Rick Gatewood on March 30th, 2020

    Worked perfectly. Thanks!

  • Natalie
    Natalie on March 31st, 2020

    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!

  • Michael
    Michael on May 11th, 2020

    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

Post a comment