Bold Upsell Installation

Bold Upsell requires our Liquid code installation to function correctly on your store, and may need an adjustment if your theme uses AJAX functions.

In this article, you will:

Before you start, we highly recommend creating a Duplicate version of your Shopify theme to ensure you have a copy without our code installation.

 


 

Verify AJAX Functions

To test if your theme has AJAX, please follow these steps:

  1. Create a cross-sell offer.
  2. 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.

  3. Select Add to Cart.
    • If you are not using an AJAX cart, you will 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 will include a cart display showing the inventory in the cart itself. This cart display will often have a checkout button which allows the customer to bypass the actual cart page and go straight to the checkout page.

    •  If you are using an AJAX cart, continue with these steps:
  4. Select Checkout.

If the upsell does trigger, the app is set up properly and you don't need any further updates.

If the upsell does not trigger, you will need a theme update.

 


 

Request a Bold Upsell Install

Automatic Install

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.

 


 

Expert Install

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 I have created a staff account for Bold.

    Note: Please ensure that we have an active staff account for your store prior to submitting your installation request. Please visit Create a Shopify Staff Account for more information.

  5. Select your preferred theme from the dropdown.
  6. Select Submit Request.

 


 

Manual Install

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 this file: 
    • bold-common.liquid
    • If this Snippet file does 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 assetCreate 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.16.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-upsell.css
    • bold-upsell-custom.css

      Example Screenshot of bold-common liquid code

  6. Select Save.

 


 

Step 2: Edit bold-common.liquid

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

    Copy and paste code in the bottom of the file

  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' -%}

    Copy and paste the following code into theme.liquid

  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.

    Find the add to cart button

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

    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. 

    Find the checkout button screenshot

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

    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

 Alert

This step is only required if your theme uses an AJAX cart. Please see Verify AJAX Functions to verify if your theme uses AJAX.  

  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.

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

     Copy and paste the following code to the end of the build cart fuction

  4. Select Save. 

 


 

Test Bold Upsell

After the installation's been completed for Bold Upsell, you can test Bold Upsell on your theme by creating an upsell or cross-sell offer.

Please visit Create an Upsell or Cross-sell Offer for more information.

 


 

Code Removal

If you would like to remove the liquid code from your theme, the liquid code can be removed by deleting the snippet files, asset files, and the code includes mentioned in the instruction steps above.

You can otherwise request a code removal by contacting our Merchant Success team.

And you can remove the app from your by following this guide: Uninstall an App from Your Store

 

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, as your theme may require further liquid code changes. See previous step Request a Bold Upsell Install > Expert Install for more information.

Was this article helpful?
0 out of 0 found this helpful