Installation Guide for Bold Upsell

Selecting Begin automatic update on this page will trigger our installation tool to perform an automatic code installation. You will be asked to confirm which theme you would like this code to be installed onto after selecting this option.

We highly recommend creating a Duplicate version of your Shopify theme to ensure you have a copy without our code installation, and to proceed with the automatic installation.

1. From the Upsell admin, select Additional Info.
2. Select Installation Instructions.
3. Select Begin automatic update.

Completing these steps will trigger our automatic installer to run on your store.

If your current theme is not compatible with our automatic installation tool, the app will automatically notify you. If this happens, you can rollback your theme to its previous state.

When the installation has not been completed in full, reverting the changes will automatically create an installation request for our team to assist you further.

This option creates a ticket request with our installation team, which is then scheduled to be completed by our experts. By selecting this option, you will be asked to confirm which theme you would like this code installation completed on.

All of these requests are completed manually on a rotational basis. You will receive an email notification upon completion.

1. From the Upsell admin, select Additional Info.
2. Select Installation Instructions.
3. Select expert theme update service.
   
4. Select your preferred theme from the dropdown.
   
5. Select Submit Request.

Step 1: Add Snippet/Asset Files

1. From the Shopify admin, select Online Store.
2. Select Actions.
3. Duplicate the theme you would like the installation completed on.
4. Select Edit Code on the duplicated theme.
5. Under Snippets, find these files: 
   • bold-common.liquid
   • bold-includes.liquid
   • If these Snippet files do not exist, please follow these steps: 
     
     1. Select Add a new snippet.
     2. Enter the correct snippet name.
     3. Select Create snippet.
   • Under Assets, find these files:
     • bold-upsell.css
     • bold-upsell-custom.css
   • If the Asset files do not exist, please follow these steps: 
     1. Select Add a new asset > Create a blank file.
     2. Enter the correct asset name, then select .css in the file type dropdown.
     3. Select Add asset.
     4. Repeat steps 6.1 - 6.3 for any missing Asset files.
   • Copy and paste the following code found in each of these links, into their respective files:
   • bold-common.liquid
   • bold-includes.liquid
   • bold-upsell.css
   • bold-upsell-custom.css

     

6. Select Save.

Step 2: Edit bold-includes.liquid

1. Under Snippets, select bold-includes.liquid.
2. 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 }}

   

3. Select Save.

Step 3: Edit theme.liquid

1. Under Layout, select theme.liquid.
2. Copy and paste the following code directly below the {{ content_for_header }} line:

   {%- render 'bold-common' -%}
   {%- render 'bold-includes' -%}

   

3. Select Save.

Step 4: Edit product.liquid

1. Under Templates, select product.liquid.

   Note: The contents for this file may be located under Sections in the product-template.liquid file.

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

   

3. Add addtocart to the start of the add to cart button's class name. 

   

4. Select Save.

Step 5: Edit cart.liquid

1. Under Templates, select cart.liquid.

   Note: The contents for this file may be located under Sections in the cart-template.liquid file.

2. Find the checkout button. 

   

3. Add or update the checkout name to include checkout to the start of the button's name.

   

4. Select Save.

Step 6: Edit build cart function

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

2. Find the build cart function.

   

3. 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');
   }
   

    

4. Select Save. 

1. From your Shopify admin, select Online Store > Themes.
2. Next to your chosen theme, select Customize.
3. Select the App embeds icon in the left menu.

   

4. Enable Upsell Model Settings by sliding the toggle to the right. 

   

For further style options, please visit Customize Upsell with 2.0 Theme App Block Extension.