Customizations in Bold Upsell

Overview

While there are some features that cannot be achieved through the out of box settings that Bold Upsell offers, there are some optional customizations that can be added to your store to allow Upsell or Cross-Sell offers to work more efficiently or add functionality to the Upsell window. 

We have put together some small customizations that can be applied on your store that may help with your Upsell flow. 

Here is a list of each customization that is included in this article: 

For more information on how to apply or enable each customization, please follow the steps below each customization listed below. 

Looking to apply a different customization? Contact our Partners team for a free quote! 

Add a Loading Message in the Upsell Window

The more products that are set to appear in the upsell window, the longer it will take to load. If you're concerned about users waiting for the window to finish loading, you can add this code to your theme to display a "please wait" message.

To add this code to your theme, please follow these steps:

  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>
    $( document ).ready(function() {
    $("#checkout").on('click',function(){
    setTimeout(function(){
    $('#button').prepend('<div class="waitmessage">Hey! Please wait while we load your special offers!</div>');
    setTimeout(function(){
    $('.waitmessage').css('display', 'none');
    }, 12000);
    }, 500);
    });
    });
    </script>
    <style>
    .waitmessage {
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    margin-bottom:10px;
    margin-top:10px;
    }
    </style>

    Add the code

  6. Select Save.

Disable the Ajax Add to Cart Functionality in the Theme

 Caution

Some themes may offer slightly different navigations to disable the Ajax cart. The following steps below is using the Turbo theme. Check with your theme developer if you're unable to find this setting.

To disable the Ajax add to cart functionality in your theme, please follow these steps:

  1. From Shopify's admin, select Online Store.
  2. Select Customize theme.
  3. Select General settings.

    Select General Settings

  4. Select Cart.

    Select Cart

  5. Under "Cart", select Page.

    Note: This will vary by theme but changing the "Cart Type" or "Add to Cart Action" to Page or Redirect to Cart or similar should correct the issue.

    Select Page

  6. Select Save.

Hide the 'Compare At' Price in the Bold Upsell Modal

Bold Upsell can show your customers a "compare at" price in the pop-up offer window. This compares the original price of a product you are offering, to the discounted price they can receive it for by accepting your offer.

The Upsell window will not hide the 'compare at' price if it is the same or lower than the product's price.

To hide this price when the above conditions are met, please follow these steps: 

  1. From within your Shopify admin, select Online Store, then ActionsEdit.
  2. Under "Snippets", select Add a new snippet.
  3. Enter bold-upsell-custom as the snippet name, then select Create snippet.
  4. Copy and paste the bold-upsell-custom.liquid code into the new snippet file and select Save.

    Copy and paste the bold-upsell-custom code

  5. Under "Layout", select theme.liquid.
  6. Directly below the Bold includes, insert the following line of code:
    {% include 'bold-upsell-custom' %}

     include bold-upsell-custom

  7. Select Save.

To test that this worked, reload your product page and ensure that the default selection is now beside the 'subscribe' option.

Notification Settings in Bold Upsell

Bold Upsell's plan pricing is based on the number of views that your offers can receive on the storefront. Once you reach your monthly plan limit, your offers will stop displaying on the site.

In order to prevent this from occurring on the site, Upsell can inform you when you're getting close to reaching your plan limit. You can then decide if you want to upgrade your plan tier.

Note: Visit Bold Upsell Information & Overview to learn more about the app's plan tiers.

To set your notification settings in Upsell, please follow these steps:

  1. From within Bold Upsell, select Settings, then Notification Settings.
  2. Under "Notification Email", enter your email address.
  3. Select your email interval(s)

    Note: You're able to select multiple notification intervals. Bold will email you at each view interval that you enable.

    Select Notification Settings

  4. Select Save.

Use an Agree to Terms Checkbox with Bold Upsell

If you would like to use an "agree to terms" checkbox in your cart along with Bold Upsell, please follow these steps:

  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 above the </body> tag in the file:
    <script>
    function termCheck(){
     if($('#agree').is(':checked')){
     return true
     } else {
     return false
     }
    }
    
    $('[name="checkout"], input[name="goto_pp"], input[name="goto_gc"]').click(function() {
    if($('#agree').is(':checked')){
    $(this).submit();
    }
    else{
    alert("You must agree with the terms and conditions of sales to check out.");
    return false;
    }
    });
    </script>

    Add the code

  6. Select Save.
  7. From within Bold Upsell, select Settings, then Upsell Settings.
  8. Scroll down to the "Advanced Page Settings" section.
  9. Under "Checkout upsell offer", in the "Enter function to call before upsell" field, enter: termCheck()

    Enter the function

  10. Select Save
Was this article helpful?
0 out of 0 found this helpful