Installation Guide for Quantity Breaks

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 recommend to create a duplicate version of your Shopify theme to ensure you have a backup 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, you will be able to continue using the app on a grandfathered plan.

New requests for Quantity Breaks will be directed to Custom Pricing which has a Quantity Breaks plan available. For more information, please visit Custom Pricing Overview.

If you'd like move from Quantity Breaks (standalone) to Custom Pricing, please visit Switch from Quantity Breaks to Custom Pricing.

Manual Install

Step 1: Add Snippet Files

Duplicate themes to create a backup copy.
From the Shopify admin, select Online Store.
Select Actions.
Select Edit code.
Under Snippets, find these files:
- bold-product.liquid
- bold-variant.liquid
For any that don't exist:
1. Select Add a new snippet.
2. Enter the correct snippet name from Step 5.
3. Select Create snippet.
4. Copy and paste the code found in each of these links into their respective files:
  - bold-product.liquid
  - bold-variant.liquid
5. Select Save.
6. Repeat 6.1 – 6.5 for each missing snippet file.

Step 2: Edit collection.liquid

From the Shopify admin, select Online Store.
Select Actions.
Select Edit code.
Under Templates, select collection.liquid.
Note: If your theme contains sections, you may need to open the collection-template.liquid under Sections instead.
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?

Paste this code on the line below each instance:

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

paste this code

Select Save.

Step 3: Edit index.liquid

From the Shopify admin, select Online Store.
Select Actions.
Select Edit code.
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
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?

Paste this code on the line below each instance:

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

paste this code

Select Save.

Step 4: Edit related-products.liquid

From the Shopify admin, select Online Store.
Select Actions.
Select Edit code.
Under Snippets, select related-products.liquid.
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?

Paste this code on the line below each instance:

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

paste this code

Select Save.

Step 5: Edit search.liquid

From the Shopify admin, select Online Store.
Select Actions.
Select Edit code.
Under Templates, select search.liquid.
Find each instance of:
```
{% for item in search.results %}
```

Paste this code on the line below each instance:

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

paste this code

Select Save.

Step 6: Edit product.liquid

From the Shopify admin, select Online Store.
Select Actions.
Select Edit code.
Under Templates, select product.liquid.
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 %}
```
Find each instance of:
```
{% for variant in product.variants %}
```
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.
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.
Replace each instance with:
```
bold_variants_size
```
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.

Replace each instance with:

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

replace this code

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.
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 %}
```
Select Save.

Step 7: Edit cart.liquid

From the Shopify admin, select Online Store.
Select Actions.
Select Edit code.
Under Templates, select cart.liquid.
Note: If your theme contains sections, this code may be located under Sections within the cart-template.liquid.
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.
```

<div id="shappify-qty-cart-msg"></div>

```
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:

Select the Files to Update tab.
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.

Some themes will use a slight variation of this code. If you can't find it, try looking for the following instead:

{% for product in collections.all.products %}
{% for product in products limit: limit %}
{% for product in product-list.products limit: for_limit %}
{% for product in collection.products limit: settings.pagination_limit %}
{% for product in collection.products limit: number_of_products_to_fetch %}
{% for product in collection.products limit: number_of_related_products %}
{% for product in collections[settings.frontpage_collection].products offset:1 %}
{% for product in collection.products limit: settings.products-per-page %}

The code to look for will most likely start with {% for product in.... If you find a line that starts with that, or what's listed above, add the following underneath it:

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

Some files may use something like this:

{% for prod in collection.products %}

If you find this, then put the following underneath it instead:

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

Some themes will have the code in a file that's included in the index.liquid file. Try looking for the following files under Snippets instead:

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
tabs-collection.liquid

Many themes will have a variation of this code that helps control the prices on the home page, but some themes don't. If you can't find the code, then this step can be skipped.

Some themes will have the related products code in a differently named file. Try looking for the following files instead:

product-related-items.liquid
snippet-related-products.liquid

Some themes will use a slight variation of this code. If you can't find it, try looking for the following instead:

{% for prod in collection.products %}
{% for product in collections.all.products %}
{% for product in products limit: limit %}
{% for product in product-list.products limit: for_limit %}
{% for product in collection.products limit: settings.pagination_limit %}
{% for product in collection.products limit: number_of_products_to_fetch %}
{% for product in collection.products limit: number_of_related_products %}
{% for product in collections[settings.frontpage_collection].products offset:1 %}
{% for product in collection.products limit: settings.products-per-page %}

The code to look for will most likely start with {% for product in.... If you find a line that starts with that, or what's listed above, add the following underneath it:

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

Some files may use something like this:

{% for prod in collection.products %}

If you find this, then put the following underneath it instead:

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

Manual Install (Dawn Theme)

Step 1: Add Snippet Files

Duplicate themes to create a backup copy.
From the Shopify admin, select Online Store.
Select Actions.
Select Edit code.
Under Snippets, find these files:
- bold-product.liquid
- bold-variant.liquid
For any that don't exist:
1. Select Add a new snippet.
2. Enter the correct snippet name from Step 5.
3. Select Create snippet.
4. Copy and paste the code found in each of these links into their respective files:
  - bold-product.liquid
  - bold-variant.liquid
5. Select Save.
6. Repeat steps 6.1 - 6.5 for each missing snippet file.

Step 2: Edit Collection Loops

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

Within each file, find each instance of:

{% for product in collection.products %}

find this code

Paste this code on the line below each instance:

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

paste this code

Select Save.
For any that don't exist:
1. Find each instance of:
```
{% render 'product-card',
```
2. Replace render with include.
3. Select Save.

Step 3: Edit theme.liquid

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

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

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

Select Save.

Step 4: Edit product-recommendations.liquid

From the Shopify admin, select Online Store.
Select Actions.
Select Edit code.
Under Sections, select product-recommendations.liquid.
Find each instance of:
```
{% render 'product-card',
```
Replace render with include.

Find each instance of:

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

12_-_Recommendation_in_Recommended.Products.png

Paste this code on the line below each instance:

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

Select Save.

Step 5: Edit predictive-search.liquid

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

Find each instance of:

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

Paste this code on the line below each instance:

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

Select Save.

Step 6: Edit main-search.liquid

From the Shopify admin, select Online Store.
Select Actions.
Select Edit code.
Under Sections, select main-search.liquid.
Find each instance of:
```
{% render 'product-card',
```
Replace render with include.
Find each instance of:
```
{%- when 'product' -%}
```

Paste this code on the line below each instance:

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

Select Save.

Step 7: Edit main-product.liquid

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

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

Find each instance of:
```
{%- for variant in product.variants -%}
```

Paste this code below each instance:

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

Find each instance of:
```
{%- form
```

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

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.
Select Save.

Step 8: Edit main-cart-footer.liquid

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

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

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 mentioned in the instruction steps above.

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

You can remove the app from your Shopify admin by following the 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 Customer Success team.

Installation Guide for Quantity Breaks

Alert

Manual Install

Step 1: Add Snippet Files

Step 2: Edit collection.liquid

Step 3: Edit index.liquid

Step 4: Edit related-products.liquid

Step 5: Edit search.liquid

Step 6: Edit product.liquid

Step 7: Edit cart.liquid

Step 8: Update Pricing Code

bold-product.liquid

bold-variant.liquid

Collection

Index

related products.liquid

Manual Install (Dawn Theme)

Step 1: Add Snippet Files

Step 2: Edit Collection Loops

Step 3: Edit theme.liquid

Step 4: Edit product-recommendations.liquid

Step 5: Edit predictive-search.liquid

Step 6: Edit main-search.liquid

Step 7: Edit main-product.liquid

Step 8: Edit main-cart-footer.liquid

Step 9: Update Pricing Code

bold-product.liquid

bold-variant.liquid

Pro-Tip