TipGenius - Frequently Asked Questions

Setting up or having trouble with TipGenius? Here's a list of our most frequently encountered questions and issues.

How do I set up TipGenius?

TipGenius is designed to be super easy to use.

Step 1: Customize your TipGenius pop-up.

Review your TipGenius options and customize it to your needs. For example, if you are collecting donations, then you'll want to replace the "Would you like to add a tip?" and "No Tip" text.

How this looks on your pop-up:

Step 2: Enable TipGenius to turn on your pop-up

That's it! TipGenius is now active and can start collecting tips or donations for you when a customer clicks on a checkout button in your theme's cart or checkout buttons:

Having trouble? Read our Troubleshooting Tips.


How does TipGenius work with my theme?

TipGenius automatically detects the checkout button in the free themes in the Shopify Theme Store and also many popular paid themes from the Shopify Theme Store.

TipGenius interacts with your theme with these assumptions:

  1. TipGenius looks for the  <form action="/cart">  element in your store's theme to find where the theme's checkout buttons are located.
  2. TipGenius also expects that there is a checkout button, which would be a <button>  or <input> field with name="checkout"  as an attribute inside of this form.
  3. If TipGenius cannot detect the above in our automatic detection mode where we are able to detect your checkout button for showing the Tip Pop-up, we return a message that you can see in your console instead.

Here are some scenarios and recommendations: 

  • You can often modify your theme settings to just use a cart-page for the cart of your app if there are incompatible pop-up, slider or modal cart forms with TipGenius. Review your theme's documentation on how to change these types of settings.
  • If you have a customized theme where you have nonstandard cart elements, It's possible to modify your theme's checkout buttons confirm to the assumptions (e.g. switch a checkout button that uses an <a href> link to a checkout <button> within a <form>) to ensure that your cart contains a <form action="/cart"> element and that and your checkout button is an <input> or a <button> field with an attribute where name="checkout" within that form. 
    • However, TipGenius is not able to provide development support for where theme modifications are required to use TipGenius or custom themes where our automatic modes does not work. Development support for theme modifications are best directed toward a 3rd-party development service.
  • If you have a non-standard theme (e.g. a less popular paid theme) where the above is insufficient for compatibility, you can also try our manual detection mode provided below for each of your checkout buttons that require TipGenius.

Adding Manual Detection

If you have a custom theme and TipGenius is not being detected, you may also provide additional CSS query selectors for the following to add manual detection: 

  • formSelector : for locating your cart's <form>  or <div>  where your checkout button resides. TipGenius will also use this selector as the element for placement based on the provided options above. for TipGenius to detect a cart update.
  • refreshSelector : If you have cart actions or animations that reload a checkout button, TipGenius will attempt be re-added into these detected elements, based on this provided selector.
  • buttonSelector : Provide a CSS query selector to specify how to detect your checkout button located inside of TipGenius checkout form. Use this if you have a checkout button that isn't an <input>  or <button>  field with name='checkout' attribute.

Need help with finding an appropriate selector? Review this support article. You can also string together multiple selectors by creating a list of selectors separated by a comma and a space.

Steps:

1. Copy this snippet below and replace   .your-selector-here with the desired CSS Query Selectors as needed:

<script> TipGeniusManualMode = { formSelector: ".your-selector-here", refreshSelector: ".your-selector-here", buttonSelector: ".your-selector-here" };</script>

2. Visit your store's Theme settings.

3. Click the  Actions button and select Edit Code. 

4. Find your theme.liquid file if you have a cart that is present on all your pages. 

5. Paste the provided snippet immediately below your:  <body> tag in that file.

Additional Notes for Theme Compatibility

Here are some notes for the following paid themes in the Shopify Theme Store may require some additional configuration for compatibility:

  • Empire - Review the Adding Manual Detection section and add this following snippet in your theme for the pop-up cart to be detected using our manual detection mode:


    <script> TipGeniusManualMode = { formSelector: ".atc-banner--cart-footer > form", buttonSelector: "button[name='checkout']" };</script>

  • Artisan - Review the Adding Manual Detection section and add this following snippet in your theme for the pop-up cart to be detected using our manual detection mode:


    <script> TipGeniusManualMode = { formSelector: "#mini_cart_form", buttonSelector: "input[value='Checkout']" };</script>

  • Parallax - Review the Adding Manual Detection section and add this following snippet in your theme for the slider cart to be detected using our manual detection mode:


    <script> TipGeniusManualMode = { formSelector: "#cart", buttonSelector: "input[value='Checkout']" };</script>


How do I customize the TipGenius Pop-up?

Looking to style the TipGenius pop-up?

You can further customize the styling of TipGenius on your cart page by inserting CSS code snippets your theme. This can usually be found in the theme.scss.liquid or theme.css file in your Theme settings. 

For example, you can change the TipGenius title font and text with this snippet below.

div.__tipgenius_text { 
font-family: Verdana; 
color: #eb5255; 
}

Steps:

  1. Visit your store's Theme settings.

  2. Click the Actions button and select Edit Code.

  3. Find your theme.scss.css or theme.css file. This is typically found under the Assets folder.

  4. Scroll down to the bottom of the file and paste in the code snippet above.

  5. Click the Save button.

How do I run a report for tips and donations collected or tracked by TipGenius?

The Tip is tracked as a product, so you can run reports in your Analytics/Reports section (e.g. most commonly, the sales by product report). 

For a list of customers that have donated, it may be easier to do a search for the tip product (e.g. "Tip" in your orders, or based on whatever you've named it) in your orders page and export that list. This would have the customer email associated with each order, and all the donation amounts per order as well.

You can also run a custom query for your customers in your Shopify admin for the tip product. Here's a relevant thread for reference.


How does the Tip Product work? Troubleshooting Steps for your Tip Product

TipGenius works in the following way:

  • A new and unique Tip Product is automatically created for you whenever you install TipGenius and we link TipGenius to this Tip product. 
  • This product is a digital product that does not require shipping.
  • TipGenius will automatically fulfill the tip product for you so that you do not have to manually fulfill this in your workflow (this can be disabled in your settings)
  • TipGenius is a cart-based app. It automatically detects the checkout button on your cart page or popup, and then provides a pop-up to let you prompt a user to add a tip or donation before automatically proceeding to checkout when they choose an tipping amount option.
  • This product defaults to map to a single $1 USD product so that you can add tip amounts based on a quantity of this product (e.g. $5 = 5 Tip products). TipGenius detects for this product with this specific variant ID.
    • We also provide a currency conversion mode so that this works in your store's native currency.
    • So for example, if a user chooses the $5 tip -- then we add a tip product line item with a quantity of 5 to the checkout.
  • As a product in your cart - this product will contribute to conditions in your store that are set around order price limits (e.g. shipping conditions) 

Troubleshooting Steps to Confirm That Your Tip Product is Functioning

  1. Does your TipGenius pop-up appear when you click on checkout in your cart? If no, review these Troubleshooting Steps with your cart since TipGenius isn't detecting your checkout button. If you already have the Tip Product in your cart, the TipGenius pop-up does not appear.
  2. If the pop-up appears, when you click on a tip $ button, do you proceed successfully to checkout? If no, then you may have a third-party application or a theme compatibility issue that prevents TipGenius from either proceeding to checkout or adding the Tip Product to your cart.  
  3. If you successfully go to the checkout page, do you see your Tip Product added to your cart? If no, then you have likely modified your Tip Product (e.g. its inventory tracking status, or added variants). Follow the remedies below for fixing these issues.

Remedies for Common Issues:

  • If you modify this Tip product’s to include additional variants, this will cause TipGenius to no longer function as expected. If you create variants with different names or prices/denomations, these would be treated as new variants that TipGenius would not detect. This would also remove the ‘single product’ variant that TipGenius is looking for above.
    • If you have modified the Tip Product in a way that removes TipGenius’s ability to detect it, then you will need to reinstall TipGenius. We create a new Tip product that you can use at that point. To note, you can delete or modify the existing tip products before you re-install TipGenius.
  • If you modify the Tip Product's price away from $1, then you will skew the checkout prices of your tip or donation amounts based on how the Tip Product is designed. (e.g. 5 Tip Products will no longer equal $5.) -- change this back to the previous $1 amount.
  • If you modify the inventory and shipping status of the Tip Product, then it could show up in your inventory like any active product that you have in your store and there could be instances where there wouldn't be inventory to add it to the cart, and thus you would see the pop-up, select an amount, but this would not be reflected in checkout.
    • The Tip product by default is one that does not have inventory tracked and is not a physical product (e.g. see these settings below). You can fix this issue by reverting your Tip product to the settings as seen below:
  1. In your TipGenius settings you can access the Tip product that is automatically created for you — this is the product that gets added to the cart before checkout - by clicking Edit Tip Product:

  1. Uncheck Track quantity and This is a physical product (as shown below) and save your changes:


Troubleshooting Auto-fulfillment permissions: which Shopify permissions does TipGenius use?

As per our notice in February 2023, auto-fulfillment requires updated customer permissions as of March 1, 2023 for this functionality to continue working. See below for instructions.

To protect the privacy and security of your Shopify store, TipGenius only requests the minimal amount of permissions necessary for the app to function. 

  • Write Orders: TipGenius needs the ability to read and update orders to automatically fulfill the tip product after an order is placed.
  • Write Products: TipGenius needs the ability to create the tip product during installation.
  • Write Script Tags: TipGenius needs the ability to install a script tag on your store's website so that the tipping / donation pop-up appears during checkout.
  • Write Merchant Managed Fulfillment Orders: Shopify released a new Fulfillment Order API in August 2021 that improves the customer and developer experience for handling fulfilments. As such, TipGenius now requires this permission to fulfill the tip product after an order is placed.

Occasionally Shopify will update their APIs and/or requirements for apps that requires TipGenius to change which permissions we request. To accept updated permissions:

Steps:

1. Log in to your Shopify Admin, open the TipGenius app in your Apps section. 

2. You will be prompted to accept updated permissions:

3. Click Update app to accept these permissions.


How do I troubleshoot my store when the TipGenius Pop-up does not show up in the cart?

Possible causes and remedies:

  • TipGenius is not enabled. Ensure that TipGenius is currently enabled in your settings.
  • You have not started your TipGenius subscription. Ensure that you have an active TipGenius subscription or trial.
  • TipGenius cannot detect the Tip Product variant that we have created. You may have modified the Tip product that TipGenius in a way that has removed product detection in the cart (e.g. you created different variants in the product and we can longer add the Tip product). Please review Tip Product troubleshooting steps for next steps.
  • TipGenius cannot detect your theme's checkout button or there are other theme compatibility issues. While TipGenius works with most themes out of the box (we're tested with all the themes that come free with Shopify), you may be have a customized theme where TipGenius is unable to detect your checkout button. Please review Theme Compatibility troubleshooting steps for next steps.
  • There are third-party applications that are interfering with TipGenius operations. Other Shopify apps can modify the cart checkout button behaviour in a way that can interfere with TipGenius operations. Please review your setup if this is the case, since some apps override the Checkout button so that it does not directly submit the checkout form. This can sometimes happen after you have set up TipGenius and you are adding other cart-based apps.
    • Common occurrences: if you have tried applications that interact with your cart and checkout flow, these can prevent TipGenius for functioning even if you have uninstalled the apps if you have not removed the code snippets created by these third party applications in your cart (e.g. apps from popular vendors like SpurIT). If you are noticing that TipGenius is no longer detecting the checkout button after installing some applications, then be sure to follow the uninstallation instructions (including code removal) if you are no longer using those apps.
  • Does TipGenius work for Shopify POS? TipGenius is just designed for your online store's cart so we don't support Shopify POS. Hope this helps with your evaluation. 

What do I need to do to uninstall TipGenius?

All you have to do is uninstall TipGenius like any other Shopify app:

  1. Starting from your Shopify Admin dashboard, access the Settings page.
  2. Click into the Apps and sales channels section:

  1. Locate the app you'd like to uninstall (in this case, TipGenius Tip & Donation Popup), and click the Uninstall button next to it.
  2. Click Delete on the popup.

Uninstalling TipGenius will also automatically cancel your TipGenius subscription If you have an active subscription.


You may also want to delete the Tip product that TipGenius has created, otherwise, you're done!


Like TipGenius? Check out our other apps: EasyRoutes and Supertime.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.