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

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:

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

1.  <script>
         document.addEventListener('DOMContentLoaded', () => {
             var checkout = document.querySelector('#checkout');
             checkout.addEventListener('click', (e) => {
                 var button = e.target.parentElement;
                 button.innerHTML += '<div id="bold-custom-wait-message">Hey! Please wait while we load your special offers!</div>'
                 setTimeout(() => {
                     document.getElementById('bold-custom-wait-message').style.display = 'none';
                 }, 12000);
             });
         });
       </script>
       <style>
         #bold-custom-wait-message {
           width: 100%;
           text-align: center;
           font-size: 14px;
           font-weight: bold;
           margin-bottom:10px;
           margin-top:10px;
         }
       </style>

    

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

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

   

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

6. Select Save.

Hide the "compare at" price in the 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 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:

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

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

4. Select Save.
5. Under Layout, select theme.liquid.
6. Directly below the Bold includes, insert the following line of code:

   {% 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 new price plans do not have a view limit, however, the legacy plan 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.

Note: Visit Bold Upsell Pricing & Overview to learn more about Upsell's plans.

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

1. From within Bold Upsell, navigate to Settings > Notification Settings.
2. Check the box next to the interval(s) of your choice.

   Note: You can select multiple notification intervals. An automated email is sent to you at each view interval that you select.

   

3. Click Save.

Title & description text styling

Using tags, you can style the title and description in most upsell offer types to include the following:

• Line break - Adds a line break between words.
• Bold text - Changes the font weight to bold.
• Underline text - Adds an underline to words.
• Italics text - Changes the font to italic formatting.

Note: The styling tags can only be applied to Product Page Pop-up , Cart Page Pop-up and Cart Drawer Widget trigger event types.

Please select a tag style for the setup instructions:

• Setup

  1. From the Bold Upsell admin, click Offers > Current Offers.
  2. Click the ellipsis next to your upsell offer, then click Edit.
  3. Under Upsell offer flow, click the ellipsis next to your upsell offer title to expand the section.
  4. In the title or description, enter {break} where you would like to insert a line break.

     Example
     
     Adding in {break} for the following title and description would change the title to appear like this:
     
     
     
     

  5. Click Save Offer.

• Setup

  1. From the Bold Upsell admin, click Offers > Current Offers.
  2. Click the ellipsis next to your upsell offer, then click Edit.
  3. Under Upsell offer flow, click the ellipsis next to your upsell offer title to expand the section.
  4. In the title or description, enter {bold} {/bold} between the words that you would like bolded.

     Example
     
     Adding in {bold} {/bold} for the following title and description would change the title to appear like this:
     
     
     
     

  5. Click Save Offer.

• Setup

  1. From the Bold Upsell admin, click Offers > Current Offers.
  2. Click the ellipsis next to your upsell offer, then click Edit.
  3. Under Upsell offer flow, click the ellipsis next to your upsell offer title to expand the section.
  4. In the title or description, enter {underline} {/underline} between the words that you would like to underline..

     Example
     
     Adding in {underline} {/underline} for the following title and description would change the title to appear like this:
     
     
     
     

  5. Click Save Offer.

• Setup

  1. Navigate to Bold Upsell > Offers.
  2. Click the ellipsis next to your upsell offer, then click Edit.
  3. Under Upsell offer flow, click the ellipsis next to your upsell offer title to expand the section.
  4. In the title or description, enter {italics} {/italics} between the words that you would like to italicize.

     Example
     
     Adding in {italics} {/italics} for the following title and description would change the title to appear like this:
     
     
     
     

  5. Click Save Offer.

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, then Actions > Edit code.
2. Under Layout, select theme.liquid.
3. 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>

   

4. Select Save.
5. Navigate to Bold Upsell > Settings.
6. Click Upsell Settings at the top of the page.
7. Scroll down to the Advanced Page Settings section.
8. Under Before checkout upsell offer, in the Enter function to call before upsell field, enter: termCheck()

   

9. Select Save.