Tip Jar is a Shopify app that let’s your customers add a tip to their order.

Highlights:

  • Let customers add a tip
  • Customizable design
  • Can also use as a donation button

👉 Get Tip Jar on the Shopify app store.

Installation instructions

After installing Tip Jar you’ll need to include the snippet in your theme where you want it to show.

If you want us to handle installation for you, contact tipjar@speedboostr.com.

Video instructions

Step by Step

1. After installing Tip Jar from the app store, you’ll be greeted with instructions in the dashboard.

Click Install Tip Jar snippet to create the snippet:

This creates a snippet called tip-jar to your live theme’s Snippets folder.

To preview before setting live: Duplicate your live theme, then add include the snippet with the render statement (instructions below) into this new theme.

*When you edit the design of the of the tip button in the Customize page, it updates the snippet in your live theme. If you’d like to add this snippet to an older theme, copy the code from the tip-jar snippet in your Snippets folder, then create a snippet called tip-jar in your old theme and paste the code.

2. Inspect the area where you want to add the snippet

Most browsers have an inspect tool, we’ll use Chrome for this example.

Right click the page and select Inspect. Then click the element inspector icon:

Then hover on the element on your page near where you want to add it. This will help you identify the element’s class or ID (so you can find it in your code in step 3).

In this example, the class name of that area is cart__footer.

3. Find the file in your theme editor

Navigate to your theme editor in the Shopify admin by going to Online Store > Themes > Actions > Edit code.

If you’re adding to the cart page, search for cart in the box above the folder structure.

For most themes the Section called cart-template.liquid (or similar) will be the file you’ll want to edit.

Open that file and look for the element you found in step 2.

4. Insert the snippet

Insert the snippet with using this code: {% render 'tip-jar' %}. Then click Save.

5. Preview and publish

Preview the page to make sure it shows up where you intended.

If it looks good, publish the theme and you’re ready to rock. 🤘

FAQ

Easy, install the app, include the snippet in your theme, and your customers will be able to select a tip to add to their order.

We offer free installation, so if you need help just give us a shout.

Colors, text, tip amounts, pretty much anything.

There are customization options in the app settings, and if it’s not in there we can make additional customizations for you.

Yes we love feature requests! Let us know your idea and we’ll do our best to implement it for you.

Yes you can swap out the “tip” button text with “donation”, and edit the tip product to talk about your charity.

When a tip or donation is ordered, it shows up as a line item in the order, so you can track donations.

Shopify doesn’t allow access to the Checkout area (unless you have a Shopify Plus store), so we don’t have a way to show this in the checkout. If you have a Shopify Plus store we can try.

If you’d like to take tips in the checkout area you can use the Shopify tips feature. Note: Shopify’s tip feature will not work with all your payment options (Shop Pay, PayPal, etc).

Tip Jar in action

Add a tip option to your store front:

tip jar preview - tip widget on store front

Customize the widget design:

tip jar preview - customize button design

tip jar preview - customize tip options

Dashboard:

tip jar preview - dashboard

If you have any questions or feature requests contact us.