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 themes from the Shopify Theme Store.

TipGenius interacts with your theme with these assumptions:

TipGenius looks for the <form action="/cart"> element in your store's theme to find where the theme's checkout buttons are located.
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.
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:

Visit your store's Theme settings.
Click the Actions button and select Edit Code.
Find your theme.scss.css or theme.css file. This is typically found under the Assets folder.
Scroll down to the bottom of the file and paste in the code snippet above.
Click the Save button.