Troubleshooting with Bold Upsell

Overview

While using Bold Upsell, you may come across some issues with the upsell modal not appearing or issues with text not appearing in the Upsell window.

While some of these issues can be corrected through an in-app setting, other issues might be related to some missing liquid code from your theme. 

In this help article, we are going to go over some common issues that can arise with Upsell and what steps can be taken to resolve each issue. 

Here is a list of issues that will be covered in this article: 

  • Hide the +1 Variant (from Quantity Breaks) in the Upsell Window
  • Missing bold-common.liquid
  • Text missing from the Upsell Window
  • Thank You Button isn't Showing up in the Upsell Window
  • Upsell Offer isn't Working

Please select an issue below for steps on how to resolve the issue:

If you would like to hide the 1+ variant from Quantity Breaks in the upsell window, please follow these steps:

  1. From within Bold Upsell, select Settings, then Upsell Settings.
  2. Scroll down to the "Custom Design" section.
  3. Enter this JavaScript into the Custom HTML/CSS text box:
    <script>
    jQuery(window).bind("load", function () {
    $( "#upsell_upsell_form #var_id" ).each(function( index ) {
    $QB_var = $(this).text().trim();
    console.log($QB_var, typeof($QB_var), $QB_var.slice(0,1), $QB_var.length);
    if ($QB_var.slice(0, 1) == "1" && $QB_var.length <= 4 ) {
    $(this).remove();
    }
    });
    });
    </script>

    Copy and paste the code

  4. Select Save.

When Bold Upsell is installed, bold-common.liquid is automatically inserted into the main, published theme.

If you installed Upsell from anywhere other than the Shopify App Store, or your theme is changed/updated, these snippet files will need to be added to the new/updated theme.

To add the snippet files to your current theme, please follow these steps:

  1. Duplicate themes, to create a backup copy.
  2. From Shopify's admin, select Online Store.
  3. Select Actions.
  4. Select Edit code.
  5. Under "Snippets", find bold-common.liquid.
  6. If it doesn't exist, select Add a new snippet.
  7. Enter bold-common.liquid in the "Create a new snippet called" field.
  8. Select Create snippet.
  9. Copy and paste the bold-common.liquid code into the new file.

    Copy and paste the bold-common code

  10. Select Save.
  11. Copy and paste this code at the bottom of the file.
    {{ 'bold-upsell.css' | asset_url | stylesheet_tag }}
    {{ 'bold-upsell-custom.css' | asset_url | stylesheet_tag }}

    Copy and paste the two lines of code

  12. Select Save.

If you are not able to see text in the Upsell window, such as the title or description of the upsell offer, this issue is most often in result of the theme applying a color of white to the text in the Upsell window.

To resolve this issue, you will need to apply some CSS coding to all text elements that are not appearing in the Upsell window. Please visit CSS Styling (Coding Styling Options) for help with identifying classes in the Upsell window.

If you are not comfortable with making these changes, please contact our Merchant Success team and they will be happy to make these changes for you.

If the "No Thank You" button isn't showing up in the Upsell window, please follow these steps to fix it:

  1. From Shopify's admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under "Assets", select your theme's main CSS file.

    Note: This will vary by theme and could be something like theme.scss.liquid.

  5. Add this code to the bottom of the file:
    #giveclosebtn{
    color: black;
    box-shadow: 0px 0px;
    margin-top:-5px;
    cursor: pointer !important;
    }

    No Thank You button Code

  6. Select Save.

If you are testing on your storefront and you're sure that you're adding items to the cart that should trigger the offer but it's not showing up, it can be one of several possible reasons:

 


 

1. The upsell offer product is already in the cart

Upsell is smart enough not to offer the product if it is already in the cart. If you go to a restaurant and order a burger and fries, they are not going to ask "Do you want fries with that?"

If the upsell offer that is supposed to be triggered has a product in it that is already in the shopping cart, the offer will not be presented.

 


 

2. Checkout or add to cart was selected too quickly

For the app to work within the framework and design of Shopify, the page needs to finish loading to check if there is a qualifying offer.

For many stores, the page loads in 2-3 seconds. During these moments, the shopper is looking at the image, scanning the description before making the decision to add. By this time, the page has finished loading so this isn't an issue.

Often when testing, we quickly select checkout and so we won't see the upsell offer. This will rarely ever happen with a real customer. Many customers will look at the product page, the picture, and read the description, or review the items in their cart for more than 1-2 seconds.

 


 

3. The upsell product is not available

A product that was in the upsell offer has been removed from the store, or the visibility of the product is hidden. By design, Shopify does not allow for hidden products to be sold, and Upsell is smart enough not to display these.

 


 

4. You have reached the upsell plan view limit for the month

If you have reached your plan limit, no more upsell offers will be displayed until either

  1. You upgrade your plan, or
  2. The view count is reset to zero at the beginning of the next calendar month.

 


 

5. Your theme uses an Ajax add to cart function

If your theme uses Ajax on your product pages to add to cart, sometimes Upsell will not automatically be displayed. In this case, you can either Disable the Ajax Add to Cart Function or contact our Merchant Success team for further assistance.

 


 

6. You're trying to trigger the offer from the wrong location

Working within the design of Shopify, Upsell can only function on the full product page or the proper cart page.

On the product page, the Upsell app is doing a check that the product being viewed is included in an offer, and checking that the cart value exceeds any offer restrictions.

On the cart page, the app also checks that the cart value and any products in the cart qualify for the offer.

These important checks cannot be done outside of the product and cart pages. This includes adding products to the cart from a home page or collection page, modal/quickshop/popup carts, or checkout selected from a modal/drawer cart.

 


 

7. The upsell scripts are not loaded

If Upsell isn't triggering and the theme is not using Ajax, create an upsell offer that triggers in the cart page when clicking checkout. Go to the cart page and use the browser Inspect Element tool to verify if Upsell, in secure.shappify.com, is not being loaded in the sources tab in Chrome/Firefox/etc.

If the upsell folder does not appear, follow these steps to fix the problem:

  1. From Shopify's admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under "Layout", select theme.liquid.
  5. Add this code to the bottom of the file:

    <script type="text/javascript" async="" src="//secure.apps.shappify.com/apps/upsell/upselljsscript.php?shop={{ shop.permanent_domain }}"></script>

    Copy and paste the code

  6. Select Save.

 

Was this article helpful?
0 out of 0 found this helpful