Request or Complete a Bold Upsell Installation

 Caution

This article requires technical knowledge and prior experience with Liquid code. If you are not comfortable with this, please request an installation from our team.

Overview

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

In this article, you can

Before you begin, please review our Notes Before Installing Apps guide. This may 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 are 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 within Upsell's admin, select Additional InfoInstallation Instructions.
  2. Select one of the following installation options:
    • Request Expert Install: This creates a ticket request with our installations team. All of these requests are completed manually on a rotational basis and will be completed as soon as possible. You will be asked to confirm which theme you would like this coding to be installed on after selecting this option.
    • Start Automatic Install: This will trigger our robotic installer to perform an automatic installation. You will be asked to confirm which theme you would like this coding to be installed on after selecting this option.

      Note: You're able to revert the installation in the off-chance that our robo-installer is not able to install the code correctly on your selected theme. Selecting this option will roll your theme back to its previous state. An installation request will also be created for our team to complete manually.

 


 

Install Bold Upsell

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

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 beginning of this article 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. 

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