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.

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

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

├── snippets
│   └── donation.liquid

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.

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:

   

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

   

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

   

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.