Bold Upsell Installation

Overview

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

 Caution

This article requires technical knowledge and experience with Liquid code. If you are not comfortable with code, please contact our Merchant Success team.

In this article, you will:

Before you begin, please review Notes Before Installing Apps. This will help answer any questions you have about the installation process.

 


 

Verify Ajax Functions

To test if your theme has AJAX and needs an installation for Bold Upsell, please follow these steps:

  1. Create a cross-sell offer.
  2. From the "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 are now 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, keeping 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 triggers, 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 an Installation

If you're not comfortable with Liquid code, you can request an expert installation to be completed by our team, or use our automatic installer.

To request an installation, please follow these steps:

  1. From the Upsell admin, select Additional InfoInstallation Instructions.
  2. Select one of the following installation options:

    Upsell Installation Page

    • Start Automatic Install - Selecting Begin automatic update on this page will trigger our robotic installer 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.

      The checkbox next to I have created a backup of this theme must also be accepted in order to start the automatic installation.

      For more information on duplicating a theme on your store, please visit this Shopify Article on completing this process

    • Request Expert Install - Selecting expert theme update service creates a ticket request with our installations team. All expert installations are manually completed on a first-come-first-served basis. You will be asked to confirm which theme you would like this code to be installed onto after selecting this option.

      You will also need to confirm that a Staff account has been created for our team by selecting the checkbox for I have created a staff account for Bold.

      Please visit Create a Shopify Staff Account for steps on sending our team a staff account invitation.

      Note: Should the robo-installer fail, you will be able to revert the installation process. Selecting this option will roll your theme back to its previous state. An installation request can also be requested by selecting Submit Request if the robo-installer fails.

 


 

Install Bold Upsell

If you're comfortable with Liquid code, you can complete the installation yourself.

 Caution

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 below. You can also request an uninstall request by contacting our Merchant Success team.

Note: If you're experiencing storefront performance issues with Bold Upsell after completing the manual installation, we recommend requesting an expert installation, as your theme may require further liquid code changes.

Select each step to view its respective information:

  1. Duplicate themes, to create a backup copy.
  2. From Shopify's admin, select Online Store, then ActionsEdit Code.
  3. 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 ("bold-common").
      3. Select Create snippet.
    • Under "Assets", find these files:
      • bold-upsell.css
      • bold-upsell-custom.css
    • If the Asset files are not present, 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 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

  4. Select Save.

Continuing within the theme files, complete the following steps:

  1. Under "Snippets", select bold-common.liquid.
  2. Copy and paste this code in 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.

Continuing within the theme files, complete the following steps: 

  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.

Continuing within the theme files, complete the following steps:

  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 the product page, such as a quick view window. Add this code 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.

Continuing within the theme files, complete the following steps:

  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.

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

Continuing within the theme files, complete the following steps:

  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 available. The following steps below uses the Venture theme and has the build function located in theme.js.

  2. Find the build cart function.

    Find the build cart function

  3. Copy and paste the following code to 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 either creating an upsell or cross-sell offer.

Please visit Create an Upsell or Cross-sell Offer for more information on creating an offer in Bold Upsell.

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