Installation Guide for Quantity Breaks

  1. Bold Commerce Help Center
  2. Quantity Breaks (Standalone) - Shopify
  3. Getting Started
Avatar
Laurel
Published: 
Last Updated: 
Follow

Each theme on your Shopify store is different and will require the our Liquid code to be installed in order to ensure that the app runs correctly.

Before you start we highly recommend creating a Duplicate version of your Shopify theme to ensure you have a copy without our code installation.

 Alert

The Quantity Breaks (standalone) app is no longer available for new installations. If you are currently using Quantity Breaks (standalone), you will be able to continue using the app on a grandfathered plan.

Any new installs of the Quantity Break app will be redirected to Custom Pricing which has a Quantity Breaks plan available. For more information on Custom Pricing, please visit Custom Pricing Overview & Pricing.

 

 

Manual Install

Step 1: Add Snippet Files

  1. Duplicate themes to create a backup copy.
  2. From the Shopify admin, select Online Store.
  3. Select Actions.
  4. Select Edit code.

    Edit code

  5. Under Snippets, find these files:
    • bold-product.liquid
    • bold-variant.liquid

    find these snippets

  6. For any that don't exist:
    1. Select Add a new snippet.

      add a new snippet

    2. Enter the correct snippet name from Step 5.
    3. Select Create snippet.

      select create snippet

    4. Copy and paste the code found in each of these links into their respective files:

      copy and paste this code

    5. Select Save.
    6. Repeat steps 6a – e for each missing snippet file.

 

 

Step 2: Edit collection.liquid

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.

    Edit code

  4. Under Templates, select collection.liquid.

    Note: If your theme contains sections, you may need to open the collection-template.liquid under Sections instead.

    select collection.liquid

  5. Find each instance of:

    {% for product in collection.products %}

    Note: If you can't find this code, look to see if the theme has a "product-loop.liquid". Can't find this code?

    find this code

  6. Paste this code on the line below each instance:

    {% include 'bold-product' with product, hide_action: 'skip' %}

    paste this code

  7. Select Save.

 

 

Step 3: Edit index.liquid

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under Templates, select index.liquid.

    Note: If your theme contains sections, you may need to look under Sections instead. The file may be named: featured-products.liquid, home-collection.liquid, home-featured-products.liquid, featured-row.liquid, simple-collection.liquid, featured-collection.liquid, home-tab.liquid, home-big-product.liquid, index-products.liquid or tabs-collection.liquid

    select index.liquid

  5. Find each instance of:

    {% for product in collection.products %}

    Note If you can't find this code, look to see if the theme has a "product-loop.liquid". Can't find this code?

    find this code

  6. Paste this code on the line below each instance:

    {% include 'bold-product' with product, hide_action: 'skip' %}

    paste this code

  7. Select Save.

     

 

 

Step 4: Edit related-products.liquid

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under Snippets, select related-products.liquid.

    select related-products/liquid

  5. Find each instance of:

    {% for product in collection.products %}

    Note If you can't find this code, look to see if the theme has a "product-loop.liquid". Can't find this code?

    find this code

  6. Paste this code on the line below each instance:

    {% include 'bold-product' with product, hide_action: 'skip' %}

    paste this code

  7. Select Save.

     

 

 

Step 5: Edit search.liquid

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under Templates, select search.liquid.

    select search.liquid

  5. Find each instance of:

    {% for item in search.results %}

    find this code

  6. Paste this code on the line below each instance:

    {% include 'bold-product' with item, hide_action: 'skip' %}

    paste this code

  7. Select Save.

 

 

Step 6: Edit product.liquid

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under Templates, select product.liquid.

    select product.liquid

  5. Add this code to the top of the file:

    Note: If your theme contains sections, you may have to make these changes in product-template.liquid under Sections.

    {% include 'bold-product' with product, hide_action: 'break' %}{% if bold_hidden_product %}{% break %}{%endif %}

    add this code to the top of the file

  6. Find each instance of:

    {% for variant in product.variants %}

    find this code

  7. Paste this code on the line below each instance:

    {% include 'bold-variant' with variant, hide_action: 'skip' %}

    Note: If your theme uses swatches, where variants are shown as buttons instead of through a dropdown menu, this code will also need to be added to a snippet file, usually named swatch.liquid or product-swatch.liquid.

    paste this code

  8. Find each instance of:

    product.variants.size

    Note: If you can't find this in the product.liquid file, then check the snippets folder for a product-form.liquid or short-form.liquid file and look for the code in there. 

  9. Replace each instance with:

    bold_variants_size

  10. Find each instance of:

    {{ product | json }}

    Note: If you can't find {{ product | json }} in those files, we recommend searching for it within the theme.liquid file. If it's not in the product.liquid or theme.liquid file, this can be skipped.

    find this code

  11. Replace each instance with:

    {% include 'bold-product', output: 'json' %}

    replace this code

  12. Find the class in the <form> tag and paste this into the class:

    shapp_qb_prod

    Note: If there is no class, you will need to add one.

    find the class

  13. Add this code where you would like the quantity break grid to display on the product page.

    Note: It must be inside the <form> tag. A good place is above or below the add to cart button code in the file.

    {% unless qb_loaded == 'true' %}
<div class="shappify-qty-msg">{{bold_selected_or_first_available_variant.metafields.shappify_qb.pricing_html}}</div>{% assign qb_loaded = 'true' %}
{% endunless %}

    add this code

  14. Select Save.

 

 

Step 7: Edit cart.liquid

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under Templates, select cart.liquid.

    Note: If your theme contains sections, this code may be located under Sections within the cart-template.liquid.

    select cart.liquid

  5. Add this code where you would like the "You saved ..." message to display:

    Note: This varies by theme but usually a good place for this is under the first line that contains <h1>. This will be near the top of the file.

    <!-- Bold: Quantity Breaks - Cart Savings Banner -->
<div id="shappify-qty-cart-msg"></div>
<!-- // end Bold code -->

    add this code

  6. Select Save.

     

 

 

Step 8: Update Pricing Code

Updates need to be done on all theme files that output product prices on the site. The number and names of the files will vary from theme to theme. Usually, 3-5 files will need to be updated, which will control the price fields on the product, collection, search, related-products (on the product page) and homepage pages.

It is important to note that each theme file that outputs a price needs to be modified to ensure the correct pricing always shows.

When you're ready to proceed:

  1. Select the Files to Update tab.
  2. Go through the list of files, one file at a time, and reference your theme's files to see if that particular file exists in the theme. Not all of these will appear in a given theme.

When you find a file that your theme has, select the product.price tab to continue.

  • Templates folder (all themes will have these files)
    • product.liquid
    • index.liquid
    • collection.liquid
    • search.liquid
  • Snippets folder (any given theme will typically have several of these)
    • product-block.liquid
    • product-card.liquid
    • product-form.liquid
    • product-grid-collage.liquid
    • product-grid-item-category.liquid
    • product-grid-item.liquid
    • product-list-item.liquid
    • product-listing.liquid
    • product-loop.liquid
    • product-single.liquid
    • product-thumbnail.liquid
    • product.liquid
    • related-products.liquid
    • search-result-grid.liquid
    • search-result.liquid
    • search.liquid
    • short-form.liquid
    • snippet-product-item.liquid
  • Assets folder (don't change anything in here)

When you've gone through the list, this step will be complete.

Look for each of these ... ... and replace all instances with this code
product.price bold_price
product.price_min bold_price_min
product.price_max bold_price_max
product.price_varies bold_price_varies
product.compare_at_price bold_compare_at_price
product.compare_at_price_min bold_compare_at_price_min
product.compare_at_price_max bold_compare_at_price_max
product.compare_at_price_varies bold_compare_at_price_varies
product.selected_or_first_available_variant bold_selected_or_first_available_variant
product.variants.first bold_selected_or_first_available_variant
product.variants[0] bold_selected_or_first_available_variant

Not all of these will appear in a given file, but the ones that do appear within a file may also appear a few times.

If you found and replaced some of the above, select the Files to Update tab and continue down the file list.

If the file has none of these, then select the item.price tab.

Look for each of these ... ... and replace all instances with this code
item.price bold_price
item.price_min bold_price_min
item.price_max bold_price_max
item.price_varies bold_price_varies
item.compare_at_price bold_compare_at_price
item.compare_at_price_min bold_compare_at_price_min
item.compare_at_price_max bold_compare_at_price_max
item.compare_at_price_varies bold_compare_at_price_varies
item.selected_or_first_available_variant bold_selected_or_first_available_variant
item.variants.first bold_selected_or_first_available_variant
item.variants[0] bold_selected_or_first_available_variant

Not all of these will appear in a given file, but the ones that do appear in a file may appear a few times.

If you found and replaced some of the above, select the File to Update tab and continue down the file list.

If the file has none of these, bring up the file editor's search feature (CTRL+F), perform a search for .price, and continue below.

If nothing is found after the search, or if you find variant.price, variant.price_min, variant.price_max, or variant.price_varies, nothing will need to be done with this file, and you can select the Files to Update tab and continue down the file list.

If something is found after the search, take note of what was found, then select the Other tab.

Some files in other themes will use something other than product or item, and you'll need to change our code to work with what the file uses.

IE. A file may use product-detail instead.

To proceed, substitute * with whatever was before the .price when you searched the previous section, then look for that code in the file and replace what you find with the app's code. It's not necessary to change anything with variant in it, such as variant.price.

IE. If you found product-detail.price, then replace * with product-detail with each item below, then look for that code in the theme. For the first item, you will look for product-detail.price, and if found, replace it with bold_price.

Look for each of these ... ... and replace all instances with this code
*.price bold_price
*.price_min bold_price_min
*.price_max bold_price_max
*.price_varies bold_price_varies
*.compare_at_price bold_compare_at_price
*.compare_at_price_min bold_compare_at_price_min
*.compare_at_price_max bold_compare_at_price_max
*.compare_at_price_varies bold_compare_at_price_varies
*.selected_or_first_available_variant bold_selected_or_first_available_variant
*.variants.first bold_selected_or_first_available_variant
*.variants[0] bold_selected_or_first_available_variant

Not all of these will appear in a given file, but the ones that do appear in a file may appear a few times.

When you're done with this file, select the File to Update tab and continue down the file list.

Note: Please visit Add the Quantity Box to the Product Page for detailed instructions to display the quantity box.

Manual Install (Dawn Theme)

Step 1: Add Snippet Files

  1. Duplicate themes to create a backup copy.
  2. From the Shopify admin, select Online Store.
  3. Select Actions.
  4. Select Edit code.

    1_-_Edit_Code.png

  5. Under Snippets, find these files:
    • bold-product.liquid
    • bold-variant.liquid
  6. For any that don't exist:
    1. Select Add a new snippet.

      2_-_Add_A_New_Snippet.png

    2. Enter the correct snippet name from Step 5.
    3. Select Create snippet.

      select create snippet

    4. Copy and paste the code found in each of these links into their respective files:

    5. Select Save.

    6. Repeat steps 6-1 through 6-5 for each missing snippet file.

 

 

Step 2: Edit Collection Loops

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under Sections, find these files:
    • featured-collection.liquid
    • main-collection-product-grid.liquid

      4_-_Sections.png

  5. Within each file, find each instance of:

    {% for product in collection.products %}

    find this code

  6. Paste this code on the line below each instance:

    {% include 'bold-product' with product, hide_action: 'skip' %}

    paste this code

  7. Select Save.
  8. For any that don't exist:

    1. Find each instance of:

      {% render 'product-card',

      5_-_Render_Product-Card.png

    2. Replace render with include.
      6_-_Include_Product-Card.png
    3. Select Save.

 

 

Step 3: Edit theme.liquid

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under Templates, select theme.liquid.

    7_-_theme.liquid.png

  5. Paste this code below the {{ content_for_header }} line:

    {%- include 'bold-product' with product, hide_action: 'header' -%}

    8_-_content_for_header.png

  6. Select Save.

 

 

Step 4: Edit product-recommendations.liquid

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under Sections, select product-recommendations.liquid.

    9_-_Sections.png

  5. Find each instance of:

    {% render 'product-card',

    10_-_Render_Product_Card.png

  6. Replace render with include.

    11_-_Include_Product_Card.png

  7. Find each instance of:

    {%- for recommendation in recommendations.products -%}

    12_-_Recommendation_in_Recommended.Products.png

  8. Paste this code on the line below each instance:

    {%- include 'bold-product' with recommendation, hide_action: 'skip' -%}

    13_-_Include_Bold_Product.png

  9. Select Save.

 

 

Step 5: Edit predictive-search.liquid

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under Sections, select predictive-search.liquid.

    9_-_Sections.png

  5. Find each instance of:

    {%- for product in predictive_search.resources.products -%}

    14_-_predictive-search.liquid.png

  6. Paste this code on the line below each instance:

    {%- include 'bold-product' with product, hide_action: 'skip' -%}

    15_-_predictive-search_code.png

  7. Select Save.

 

 

Step 6: Edit main-search.liquid

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under Sections, select main-search.liquid.

    9_-_Sections.png

  5. Find each instance of:

    {% render 'product-card',

    16_-_main-search.liquid.png

  6. Replace render with include.

    17_-_Replace_Render_with_Include.png

  7. Find each instance of:

    {%- when 'product' -%}

    18_-_When_Product.png

  8. Paste this code on the line below each instance:

    {%- include 'bold-product' with item, hide_action: 'skip' -%}

    19_-_When_Product_Include.png

  9. Select Save.

 

 

Step 7: Edit main-product.liquid

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under Sections, select main-product.liquid.

    9_-_Sections.png

  5. Paste this code at the top of the file:

    {%- include 'bold-product' with product, hide_action: 'break' -%}{%- if bold_hidden_product -%}{%- break -%}{%- endif -%}

    20_-_main-product.liquid.png

  6. Find each instance of:

    {%- for variant in product.variants -%}

    21_-_Find_Each_Instance.png

  7. Paste this code below each instance:

    {%- include 'bold-variant' with variant, hide_action: 'skip' -%}

    22_-_Include_Bold_Variant.png

  8. Find each instance of:

    {%- form

    23_-_Find_Form.png

  9. Add shapp_qb_prod to the class property:

    {%- form 'product', product, id: product_form_id, class: 'form shapp_qb_prod', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}

    24_-_Class.png

  10. Paste this code where you would like the Quantity Break grid to display on the product page:

    {%- unless qb_loaded == 'true' -%}
    <div class="shappify-qty-msg">{{bold_selected_or_first_available_variant.metafields.shappify_qb.pricing_html}}</div>{%- assign qb_loaded = 'true' -%}
    {%- endunless -%}

    Note: This code must be placed inside of the form tag. We recommend placing this above or below the add to cart button.

  11. Select Save.

 

 

Step 8: Edit main-cart-footer.liquid

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Select Edit code.
  4. Under Sections, select theme.liquid.

    9_-_Sections.png

  5. Paste this code where you would like the "You saved..." message to display:

    <!-- Bold: Quantity Breaks - Cart Savings Banner -->
    <div id="shappify-qty-cart-msg"></div>
    <!-- // end Bold code -->
  6. Select Save.

 

 

Step 9: Update Pricing Code

Every theme file that outputs a price must be modified to ensure the correct pricing displays.

The following Templates must be adjusted:

  • customers/order.liquid

The following Sections must be adjusted:

  • main-cart-items.liquid
  • featured-product.liquid
  • main-product.liquid

The following Snippets must be adjusted:

  • meta-tags.liquid
  • price.liquid
  • product-cart.liquid
Find Replace With
*.price bold_price
*.price_varies bold_price_varies
*.compare_at_price bold_compare_at_price
*.compare_at_price_varies bold_compare_at_price_varies
*.selected_or_first_available_variant bold_selected_or_first_available_variant

 

 

Code Removal

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 above.

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

You can remove the app from your Shopify admin by following this guide: Uninstall an App from Your Store

 

 Pro-Tip

If you are experiencing issues with performance on the storefront with Bold Quantity Breaks after completing the steps above, please contact our Merchant Success team.

Was this article helpful?
4 out of 26 found this helpful