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 select a customization and view the steps for the customization below.
Pro-Tip
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.
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:
- From Shopify's admin, select Online Store, then Actions > Edit code.
- Under Layout, select theme.liquid.
- 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>
- Select Save.
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:
- From Shopify's admin, select Online Store.
- Select Customize theme.
- Select General settings.
- Select Cart.
- 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 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 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:
- From within your Shopify admin, select Online Store, then Actions > Edit.
- Under Snippets, select Add a new snippet.
- Enter bold-upsell-custom as the snippet name, then select Create snippet.
- Copy and paste the bold-upsell-custom.liquid code into the new snippet file and 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.
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.
Pro-Tip
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:
- 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. Bold will email you at each view interval that you enable.
- Select Save.
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> 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>
- Select Save.
- From within Bold Upsell, select Settings, then Upsell Settings.
- Scroll down to the Advanced Page Settings section.
- Under Checkout upsell offer, in the Enter function to call before upsell field, enter: termCheck()
- Select Save.