If you want to integrate Quantity Break app codes on a fresh Supply theme, then click here to download the Supply theme and upload it to your store from store admin section. This theme has all the app codes integrated, so you will not need to do anything.


 

This app requires few theme liquid file changes. The changes depend on theme liquid codes. If you understand liquid logic / codes then follow the steps given below and let us know if you face any problems. Otherwise add install@solvercircle.com as a staff member of your store (If you don't know how to add "staff member" then click here) and email us at install@solvercircle.com, then we will install the codes for you.

 

  1. Login your Shopify Store in Admin panel.
  2. Now hit our Apps URL and click on to "Get App" button.

For show this application in Supply theme, you should add some code in your template. So total process are given below.

Go to “Themes” menu of Admin Dashboard and Edit your published theme (Supply) to install the application.

Click on “Template Editor” and put the Quantity Break Application “Code” on the following files.

 

Step 1 (a): Put the following code in theme.js.liquid file under the “Assets” folder before this code key: cartItem.key,

        //Start: SC Quantity Break
        sc_qb_product_id: cartItem.product_id,
        sc_qb_variant_id: cartItem.variant_id,
        sc_qb_base_price: cartItem.price,
        sc_qb_title: cartItem.title,
        //End: SC Quantity Break

Please see the following screenshot for clean overview.

 

 

Step 1 (b): Put the following code in theme.js.liquid file under the “Assets” folder before this function cartTemplate = function (cart)

    //Start: SC Quantity Break
    //Modified Start
    sc_gqbreak_app_global.get_cart_prices(function(calc_prices){
              var calc_prices_by_keys={};
              var i=0;
              for(i=0;i<calc_prices.item_prices.length;i++){
                calc_prices_by_keys[calc_prices.item_prices[i].variant_id]=calc_prices.item_prices[i];
              }
              for(i=0;i<data.items.length;i++){
                data.items[i].price=Shopify.formatMoney(calc_prices_by_keys[data.items[i].sc_qb_variant_id].price*100, settings.moneyFormat);
                
              }
              data.totalPrice=Shopify.formatMoney(calc_prices.total_price*100, settings.moneyFormat);
      
      
          $cartContainer.append(template(data));

          // With new elements we need to relink the adjust cart functions
          adjustCart();

          // Setup close modal button and size drawer
          switch (settings.method) {
            case 'modal':
              loadCartImages();
              break;
            case 'flip':
            case 'drawer':
              if (cart.item_count > 0) {
                loadCartImages();
              }
              break;
            default:
              break;
          }

          // Mark the cart as built
          cartInit = true;
              
    });
    //Modified End
    //End: SC Quantity Break

Please see the following screenshot for clean overview.

 

Step 1 (c): Put the following code in theme.js.liquid file under the “Assets” folder before this function adjustCart = function ()

      //Start: SC Quantity Break
      sc_gqbreak_app_global.process_cart();
      //End: SC Quantity Break

Please see the following screenshot for clean overview.

 

 

Step 1 (d): Put the following code in theme.js.liquid file under the “Assets” folder before this code var source = $("#ajaxifyQty").html(),

        //Start: SC Quantity Break
        var sc_qb_qty_cls='';
        $(el.attr('class').split(' ')).each(function() { 
            if (this.indexOf('sc-qb-cart-item-qty-2017210342-')==0) {
                sc_qb_qty_cls = this;
            }    
        });
        //End: SC Quantity Break

Please see the following screenshot for clean overview.

 

 

Step 1 (e): Put the following code in theme.js.liquid file under the “Assets” folder before this code line: el.attr('data-line'),

            //Start: SC Quantity Break
              sc_qb_qty_cls:sc_qb_qty_cls,
            //End: SC Quantity Break

Please see the following screenshot for clean overview.

 

 

Step 1 (f): Put the following code in theme.js.liquid file under the “Assets” folder before this code var itemAdd = currentQty + 1,

        //Start: SC Quantity Break
        var sc_qb_qty_cls='';
        $(el.attr('class').split(' ')).each(function() { 
            if (this.indexOf('sc-qb-cart-item-qty-2017210342-')==0) {
                sc_qb_qty_cls = this;
            }    
        });
        //End: SC Quantity Break

Please see the following screenshot for clean overview.

 

 

Step 1 (g): Put the following code in theme.js.liquid file under the “Assets” folder just before this code key: el.data('id'),

              //Start: SC Quantity Break
              sc_qb_qty_cls:sc_qb_qty_cls,
              //End: SC Quantity Break

Please see the following screenshot for clean overview.

 

 

Step 1 (h): Put the following code in theme.js.liquid file under the “Assets” folder after end of this code this.settings.selectors.$comparePrice.hide();

//Start: SC Quantity Break
	if (typeof SC_QB_On_Variant_Select == 'function')
		SC_QB_On_Variant_Select(variant);
//End: SC Quantity Break

Please see the following screenshot for clean overview.

 

 

Step 2: Add the following code in the product-template.liquid file in “Sections” folder after the end of </select> (product select option code).

<!--  Start: SC Quantity Break -->
{% include "sc-quantity-break" with "sc-qb-product-script" %}
<!--  end: SC Quantity Break -->

Please see the following screenshot for clean overview.

 

Step 3 (a): In the cart.liquid file under "Templates" folder, put the following code at just before the html element where the cart line price is shown.

    <!--  Start: SC Quantity Break -->
    {% include "sc-quantity-break" with "sc-qb-cart-item-script" %}
    <!--  end: SC Quantity Break -->

Please see the following screenshot for clean overview.

 

Step 3 (b): In the cart.liquid file under "Templates" folder, put the following code as the class name of the html element just before {% include 'price' with item.price %} this code.

sc-qb-cart-item-unit-price-2017210342-{{item.product_id}}-{{item.variant_id}}

Or, if there is no class attribute in that line of code then insert the following code:

class="sc-qb-cart-item-unit-price-2017210342-{{item.product_id}}-{{item.variant_id}}"

Please see the following screenshot for clean overview.

 

Step 3 (c): In the cart.liquid file under "Templates" folder, put the following code at just before the form is end '</form>'

<!--  Start: SC Quantity Break -->
{% include "sc-quantity-break" with "sc-qb-cart-script" %}
<!--  end: SC Quantity Break -->

Please see the following screenshot for clean overview.

 

Step 3 (d): In the cart.liquid file under "Templates" folder, put the following code as the class name of the html element where the cart sub-total is shown.

sc-qb-cart-subtotal-2017210342

Or, if there is no class attribute in that line of code then insert the following code:

class="sc-qb-cart-subtotal-2017210342"

Please see the following screenshot for clean overview.

 

Step 3 (e): In the cart.liquid file under "Templates" folder, put the following code as the class name of the order note text box.

sc-qb-order-note-2017210342

Or, if there is no class attribute in that line of code then insert the following code:

class="sc-qb-order-note-2017210342"

Please see the following screenshot for clean overview.

 

Step 3 (f): In the cart.liquid file under "Templates" folder, put the following code as the class name of the quantity text box.

sc-qb-cart-item-qty-2017210342-{{item.product_id}}-{{item.variant_id}}

Or, if there is no class attribute in that line of code then insert the following code:

class="sc-qb-cart-item-qty-2017210342-{{item.product_id}}-{{item.variant_id}}"

Please see the following screenshot for clean overview.

 

Step 3 (g): In the cart.liquid file under "Templates" folder, change the type of the checkout button element from “submit” to “button” and Put the following code as the class name of the checkout button.

sc-qb-btn-checkout-2017210342

Or, if there is no class attribute in that line of code then insert the following code:

class="sc-qb-btn-checkout-2017210342"

Please see the following screenshot for clean overview.

Step 4 (a): In the ajax-cart-template.liquid under "Snippets" folder, as a class name in item quantity textbox code

sc-qb-ajx-cart-item-qty-2017210342-{{sc_qb_product_id}}-{{sc_qb_variant_id}}

Or, if there is no class attribute in that line of code then insert the following code:

class="sc-qb-ajx-cart-item-qty-2017210342-{{sc_qb_product_id}}-{{sc_qb_variant_id}}"

Please see the following screenshot for clean overview.

Step 4 (b): In the ajax-cart-template.liquid under "Snippets" folder, just before the end of item tag {{/items}}

 {{!--  Start: SC Quantity Break --}}
 <input type="hidden" id="sc-qb-ajx-cart-item-hdn-2017210342-{{sc_qb_product_id}}-{{sc_qb_variant_id}}" class="sc-qb-ajx-cart-item-hdn-2017210342" value='{ "product_id":"{{sc_qb_product_id}}","variant_id":"{{sc_qb_variant_id}}","title":"{{sc_qb_title}}","price":{{sc_qb_base_price}} }' />
 {{!--  End: SC Quantity Break --}}
 

Please see the following screenshot for clean overview.