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 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.

 Pro-Tip

If you are experiencing an issue that is not outlined in this article, please reach out to our Customer Success team for further assistance.

 


 

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 is usually due to 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 Customer 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:

1. 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.

 

2. 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 the offer is not showing on the storefront, it can be one of several possible reasons:

The Upsell offer product is already in the cart

Upsell will be able to see if the offer product if it is already in the cart. If the Upsell offer is already in the cart, the offer will not be presented as the customer has already added it.

 

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. The Upsell script must fully load to be able to check if there is a qualifying offer. 

For many stores, the page loads in 2-3 seconds. During these moments, the shopper is usually looking at the product and reading the page before making the decision to buy. This allows time 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 cannot display these.

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

 

You have reached the Upsell plan view limit for the month

If you have reached your plan limit, Upsell offers will no longer 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 reach out to our Customer Success team for further assistance.

 

You're using a Buy it Now button.

Dynamic Buy it Now buttons on your product pages are not compatible with Upsell. Upsell is designed to trigger on the add to cart, or Checkout button.

To remove this button from your store, please follow the steps on the Dynamic Checkout Buttons on Shopify article.

Buy it Now Button

 

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.

 

Upsell only allows for a maximum of eight individual products to be selected in the product selector. If you attempt to select more than eight, you will receive a message that says: You can not select more than 8 products. If you would like to select this item, please remove an item from your selected list to continue.

To get around this limitation, you can create a collection in Shopify with the items you would like to include in the upsell - and then select that collection in Upsell. When collections are selected in the Upsell product selector, all of the items within the collection will be included.

 Alert

When selecting collections in the product selector, you will not be able to see the individual products in the collection within the selector.

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