Installation Guide for Bold Upsell

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:

  • Verify if your theme uses AJAX
  • Request an installation (or use our installer)
  • Complete the install yourself manually
  • Test Bold Upsell

Before installing the Liquid code, it is recommended to create 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.

 


 

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.

 


 

 Alert

To maintain the security of your Shopify account, we ask that you do not proactively send us a staff account invite for access to your shop. Instead, our team will request collaborator access to your shop.

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.
    Expert theme update
  4. Select your preferred theme from the dropdown.
    Select your theme
  5. Select Submit Request.

 


 

Manual Install (Vintage Themes)

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 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-includes.liquid
    • bold-upsell.css
    • bold-upsell-custom.css

      Example Screenshot of bold-common liquid code

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

    Bold-includes.liquid.png

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

    Theme.liquid_includes.png

  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. 

Manual Install (Online Store 2.0 Themes)

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-includes.liquid
    • bold-upsell.css
    • bold-upsell-custom.css

      Example Screenshot of bold-common liquid code

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

    Bold-includes.liquid.png

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

    Theme.liquid_includes.png

  3. Select Save.

 


 

Step 4: Edit main-product.liquid

  1. Under Sections, select main-product.liquid.

  2. Find the add to cart button code:

    <button
    type="submit"
    name="add"
    class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
    {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
    >

    main-product add to cart button Dawn

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

    main-product addtocart class Dawn

  4. Select Save.

 


 

Step 5: Edit featured-product.liquid

  1. Under Sections, select featured-product.liquid.

  2. Find the add to cart button code:

    <button
    type="submit"
    name="add"
    class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
    {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
    >

    featured-product add to cart button Dawn

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

    featured-product addtocart class Dawn

  4. Select Save.

 


 

Step 6: Edit cart-notification.liquid

  1. Under Snippets, select cart-notification.liquid.

  2. Find the code:

    <button class="button button--primary button--full-width" name="checkout" form="cart">{{ 'sections.cart.checkout' | t }}</button>

    cart-notification code Dawn

  3. Add checkout to the start of the class name:

    cart-notification checkout class Dawn

  4. Select Save.

 


 

Step 7: Edit main-cart-footer.liquid

  1. Under Sections, select main-cart-footer.liquid.

  2. Find the code:

    <button type="submit" id="checkout" class="cart__checkout-button button" name="checkout"{% if cart == empty %} disabled{% endif %} form="cart">
    {{ 'sections.cart.checkout' | t }}
    </button>

    main-cart-footer Dawn

  3. Add checkout to the start of the class name:

    main-cart-footer checkout class Dawn

  4. Select Save.

 


 

Step 8: Edit cart-notification.liquid

  1. Under Snippets, select cart-notification.liquid.

  2. Find the checkout button code:

    <button class="checkout button button--primary button--full-width" name="checkout" form="cart">{{ 'sections.cart.checkout' | t }}</button>

    cart-notification with checkout class Dawn

  3. Add type="submit" as below:

    <button type="submit" class="checkout button button--primary button--full-width" name="checkout" form="cart">{{ 'sections.cart.checkout' | t }}</button>

    cart-notification button type Dawn

  4. Select Save.

 

Step 9: Edit product-form.js

  1. Under Assets, select product-form.js.

  2. Find the code:

     .finally(() => {
    submitButton.classList.remove('loading');
    submitButton.removeAttribute('aria-disabled');
    });

    product-form code Dawn

  3. Add this code directly underneath: 

    if(typeof BOLD === 'object' && BOLD.common && BOLD.common.eventEmitter && typeof BOLD.common.eventEmitter.emit === 'function') {
    BOLD.common.eventEmitter.emit("BOLD_COMMON_cart_loaded");
    }
    });

    product-form code with Bold on Dawn

  4. Select Save.

 Pro-Tip

If you are unsure of whether you are using a Vintage or Online Store 2.0 theme, please visit Shopify’s article Theme architecture versions.

 


 

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

The Liquid code can be removed by deleting the snippet files, asset files, and the code mentioned in the instruction steps above.

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

 

 Pro-Tip

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. See Request an Upsell Install above for more information.

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