Tip Cup 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 Cup on the Shopify app store.
Installation instructions
After installing Tip Cup 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 us in the app after you add it to your store.
Step by Step
1. After installing Tip Cup from the app store, you’ll be greeted with instructions in the dashboard.
Click Install Tip Cup 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.
If you’re on Shopify Plus, yes. Just contact us to activate it for you.
If you’re not on Shopify Plus, you can put the widget anywhere on your site except in the checkout area. We don’t have the ability yet to add to your checkout because Shopify doesn’t allow access to the checkout area unless you have a Plus store.
If you’d like tips in your checkout area and you’re not on Shopify Plus, you can enable checkout tips in your Shopify admin settings. The downside to that feature is that it doesn’t work with 3rd party payment providers (PayPal, Apple Pay, Google Pay, Shop Pay, etc).
Tip Cup in action
Add a tip option to your store front:
Customize the widget design:
Dashboard:
If you have any questions or feature requests contact us.