Bold Upsell must be properly installed on your Shopify theme in order to function correctly on your store. The installation ensures the Upsell modal appears on your storefront when triggered by your customers.
Manual install (via app embed)
Note: The manual install via app embed can be performed on both vintage and Online Store 2.0 themes.
Step 1: Enable Upsell Modal Settings
From your Shopify admin, select Online Store > Themes.
Select Customize next to the theme you would like to install Upsell on.
Select the App embeds icon in the left menu.
Enable Upsell Model Settings by sliding the toggle to the right.
Optional: Click the arrow next to Upsell Modal Settings to expand the settings and customize the Upsell modal. Check the box next to Enable preview to view your changes as you make them.
Note: If you prefer to style the Upsell modal later, visit Customize Upsell with Theme App Extension.
Click Save in the top-right corner.
Manual Liquid code install (legacy)
Alert: All new Upsell installations can be performed using the instructions shown in the Manual install (via app embed) section above. The Liquid instructions in this section are only relevant to those who’ve installed Upsell on a vintage theme prior to January 4, 2024.
Step 1: Add Snippet/Asset Files
From the Shopify admin, select Online Store.
Select Actions.
Duplicate the theme you would like the installation completed on.
Select Edit Code on the duplicated theme.
Under Snippets, find these files:
bold-common.liquid
bold-includes.liquid
If these snippet files don't exist, please follow the steps below. If they do exist, skip to step #7.
Select Add a new snippet.
Enter the correct snippet name.
Select Create snippet.
Copy and paste the following code into their respective files:
Select Save.
Under Assets, find these files:
bold-upsell.css
bold-upsell-custom.css
If the Asset files do not exist, please follow the steps below. If they do exist, skip to step Step 2: Edit bold-includes.liquid.
Select Add a new asset > Create a blank file.
Enter the correct asset name, then select .css in the file type dropdown.
Select Add asset.
Copy and paste the following code found in each of these links, into their respective files:
Select Save.
Step 2: Edit bold-includes.liquid
Under Snippets, select bold-includes.liquid.
Copy and paste the following code into the bottom of the file:
{{ 'bold-upsell.css' | asset_url | stylesheet_tag }}{{ 'bold-upsell-custom.css' | asset_url | stylesheet_tag }}Select Save.
Step 3: Edit theme.liquid
Under Layout, select theme.liquid.
Copy and paste the following code directly below the {{ content_for_header }}line:
{%- render 'bold-common' -%}{%- render 'bold-includes' -%}Select Save.
Step 4: Edit product.liquid
Under Templates, select product.liquid.
Note: The contents for this file may be located under Sections in the product-template.liquid file.
Find the add to cart button.
Note: Some themes may have an add to cart button outside of the product page, such as a quick view window. Add this code in there as well.
Add addtocart to the start of the add to cart button's class name.
Select Save.
Step 5: Edit cart.liquid
Under Templates, select cart.liquid.
Note: The contents for this file may be located under Sections in the cart-template.liquid file.
Find the checkout button.
Add or update the checkout name to include checkout to the start of the button's name.
Select Save.
Step 6: Edit build cart function
This step is only required if your theme uses an AJAX cart. If you are unsure if you need this step, view the instructions in Test for AJAX functionality below.
Create an offer using the Cart Page Pop-Up trigger event.
From your Storefront, select the trigger product.
Note: This is the product you have set up to trigger the Upsell offer. Your URL should contain yourstore.myshopify.com/product. This is important for Step 3.
Select Add to Cart.
If you are not using an AJAX cart, you are redirected to the cart page. Your URL will read: yourstore.myshopify.com/cart and you do not need to continue with these steps.
If you are using an AJAX cart, some form of animation occurs that keeps you on the product page. Your URL will still read: yourstore.myshopify.com/product.
Note: Many AJAX cart animations include a cart display showing the inventory in the cart itself. This cart display often has a checkout button which allows the customer to bypass the cart page and go straight to the checkout page.
If you are using an AJAX cart, continue with these steps:
Select Checkout.
If the upsell does trigger, you don't need any further updates. If the upsell does not trigger, continue with the instructions below.
Under Assets, select the file that has the build cart function.
Note: The file where the build function exists can vary between each theme. The following steps below use the Venture theme and has the build function located in its theme.js file.
Find the build cart function.
Copy and paste the following code into the end of the build cart function:
if(typeof BOLD === 'object' && BOLD.common && BOLD.common.eventEmitter && typeof BOLD.common.eventEmitter.emit === 'function') { BOLD.common.eventEmitter.emit("BOLD_COMMON_cart_loaded"); BOLD.common.eventEmitter.emit('BOLD_COMMON_redirect_upsell_product');}Select Save.
Note: If you are experiencing issues with performance on the storefront with Bold Upsell after completing the steps above, we recommend requesting an expert installation. Your theme may require further Liquid code changes. Please speak to our Customer Success team to request an install for Bold Upsell.
Uninstall
If you used the Liquid code to install Upsell to your store, you can remove it by going through the steps above to find their location. If you'd like help with the code removal, please speak to our Customer Success team.
If you installed Upsell after January 4, 2025 using the app embeds, no code removal is needed. Uninstalling the app removes all related theme app extensions.
To cancel your subscription to Bold Upsell and remove the app from your store, please follow the steps below.
From your Shopify admin, click Settings.
Click Apps and sales channels.
Click Uninstall next to Bold Upsell.
Optional: Select a reason for the uninstall.
Click Uninstall.