Troubleshooting with Bold Upsell

While using Bold Upsell, you may come across some issues with the Upsell modal not appearing or have 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.

 


 

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 Custom Design.
  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 your products are not showing up in the product selector, there are a couple reasons this can happen:

You have added new products to your store.

It can take some time for Upsell to detect newly added products. To make sure the new products are showing, please update the filters in the product selector to today's date.

To update the filters, select Update Now in the top right-hand corner of the product selector.

Product_Selector_Update_Needed.png

Once this has been done, you will no longer see the blue Update Now button.

 Alert

The filters can only be updated once per day, so it is recommended to ensure all new products you plan on adding for the day are completed first.

 

Your products are not available in the online sales store channel.

Upsell will not be able to detect products which are hidden from the storefront. All products must be available in the online sales channel with an active status in Shopify.

If you are testing on your storefront the offer is not showing up, it can be one of several possible reasons:

 

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 the Upsell offer is already in the shopping cart, the offer will not be presented.

 

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 in order for Upsell to check if there is a qualifying offer and become active.

For many stores, the page loads in 2-3 seconds. During these moments, the shopper is looking at the product and reading the page before making the decision to buy. This usually allows for the page to complete loading.

When testing, we usually select the checkout or add to cart button much more quickly - before the page has been able to finish loading. This will rarely ever happen with a real customer. Please ensure you have given the page a few seconds to complete its load before testing the Upsell offer.

 

The Upsell product is not available

A product that was in the Upsell offer may have 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.

Please ensure your offer products are available in the store and in the online store channel.

 

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.

 

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.

 

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

Working within the design of Shopify, Upsell can only function on the product page or 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.

 

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.

 

If you are experiencing an issue that is not outlined in one of the common issues above, please reach out to our Merchant Success team for further assistance.

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