Installation Guide for Bold Upsell

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

   

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

   

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

   

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

   

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>

   

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

   

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>

   

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

   

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>

   

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>

   

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

   

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

   

4. Select Save.