Customizations in Bold Upsell

Below is a guide of optional customizations that can be added to your store in order to add additional functionality to your upsell or cross-sell offers.

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

Note: Some of the customizations requires technical knowledge with liquid code. If you'd like one of our partners to complete one of these customizations or a similar customization on your store, please reach out to HeyCarson via this form.

Add a Loading Message in the Upsell Window

The more products that are set to appear in the upsell window, the longer it takes 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:

From Shopify's admin, select Online Store, then Actions > Edit code.
Under Layout, select theme.liquid.

 <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

Select Save.

Disable the Ajax Add to Cart Functionality in the Theme

Note 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:

From Shopify's admin, select Online Store.
Select Customize theme.
Select General settings.
Select Cart.
Under Cart, select Page.
Note This varies 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 Save.

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 does 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:

From within your Shopify admin, select Online Store, then ... > Edit code.
Under Snippets, select Add a new snippet.
Enter bold-upsell-custom as the snippet name, then select Create snippet.

<script> window.onload = function () { var checkDomElem = function(num){
      var sel = document.getElementsByClassName("bold_clone"); if(num <100
      &&="&&" sel.length="=" 0)="0)" {="{" settimeout(function(){="setTimeout(function(){"
      checkdomelem(num="checkDomElem(num" +="+" 1);="1);" },="}," 500)="500)"
      }="}" else="else" if(sel.length="if(sel.length"> 0) { if(BOLD &&
      BOLD.upsell && BOLD.upsell.app && BOLD.upsell.app.ee){
      BOLD.upsell.app.ee.on("modal_opened", function() { var comparePrice =
      document.querySelectorAll('.bold-product__price--deleted'); comparePrice.forEach(function(compare){
      var comparePriceText = compare.innerText, stripComparePrice = comparePriceText.replace("$",
      ""), roundComparePrice = parseFloat(stripComparePrice).toFixed(2), currentPrice
      = document.querySelector('.bold-product__price.current_price'), currentPriceText
      = currentPrice.innerText, stripCurrentPrice = currentPriceText.replace("$",
      ""), roundCurrentPrice = parseFloat(stripCurrentPrice).toFixed(2); if
      (roundComparePrice <= roundcurrentprice){="roundCurrentPrice){" compare.remove();="compare.remove();"
      }="}" });="});" else{="else{" }}="}}" checkdomelem(0);="checkDomElem(0);}
      </script>

Select Save.
Under Layout, select theme.liquid.
Directly below the Bold includes, insert the following line of code:
```
{% include 'bold-upsell-custom' %}
```
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 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 Pricing & Overview to learn more about the app's plan tiers.

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

From within Bold Upsell, select Settings, then Notification Settings.
Under Notification Email, enter your email address.
Select your email interval(s).
Note You're able to select multiple notification intervals. An automated email is sent to you at each view interval that you enable.
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:

From Shopify's admin, select Online Store, then Actions > Edit code.
Under Layout, select theme.liquid.

Add this code above the </body> tag in the file:

<script>
functiontermCheck(){
 if($('#agree').is(':checked')){
 returntrue
 } else {
 returnfalse
 }
}

$('[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.");
returnfalse;
}
});
</script>