Top

Quantity Breaks Liquid Install Instructions

Need Help? Frustrated with Liquid Code? Request an Install!

We know Liquid code can be tough to wrap your head around at first or that you may not have a developer to assist you with coding your theme. That is okay! We can help by installing the app's code for you on request. If you would like to request a paid install just click on the tab above titled "Install Request".

Note
 Code installs are per theme. If the theme is changed or updated re-installing the app's code may be subject to another install fee.

1 - Open the App 

To access the app you'll need to login to your store's Shopify admin page, click on the Apps button in the navigation bar on the left, then click on the icon of the app you need installed.

2 - App Menu

You will see several buttons on the home screen after opening the app. Click on the Liquid Installation button then scroll down to Option 2 on the new page. Click on the blue Please insert liquid code button to bring up the install request form. Fill out the form entirely and make sure to select the theme you need the code to be installed on (pictured below). Click "Looks good! Send Away!" when you are done filling out the form.

3 - Accept the Charge

After submitting your information you will be prompted to approve the charge. Once you approve the charge it will immediately be charged to the credit card you have on file in your Shopify store.

4 - Create a Staff Account

Finally, to install the Liquid code for the app our team will require a staff account. Please see "How do I create a staff account?" to ensure our team has access and can start your install as soon as possible.


Ninja Notes - Backup the theme

Quantity Breaks requires significant changes to be made to the theme files. We strongly recommend creating a duplicate of your theme, and making the changes to the unpublished version of the theme.

1 - Create Snippet Files

 

In the theme's files, look in the theme's snippet folder to see if the following files exist.

  • bold-product
  • bold-variant

If any don't exist, the missing files will need to be manually created. In that case, click on the appropriate tab above for instructions on how to create a particular snippet.

1-2: bold-variant

 

Create a snippet called bold-variant.liquid. Copy and paste this code into the snippet file.

1-1: bold-product.liquid

 

Create a snippet called bold-product.liquid. Copy and paste this code into the snippet file.

2 - Edit the collection.liquid

 

Click on collection.liquid template to open the file. Within the file, look for all instances of this (this line may appear more than once in a file):

{% for product in collection.products %}

Add the following in the line below each instance:

If you can't find this code, look to see if the theme has a "product-loop.liquid" . If you still can't find this code, click on the Can't Find tab.

The code might look different

Some themes will use a slight variation of the code to search for. Try looking for the following instead:

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:

Some files may use something even more different, such as this:

  • {% for prod in collection.products %}

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

The code may be in a different file

Some themes will have the above code in a file that's included in the collection.liquid file. Try looking for the following files instead (in the snippet folder):

3 - Edit the index.liquid

 

Click on index.liquid template to open the file. Within the file, look for all instances of this (this line may appear more than once in a file):

{% for product in collection.products %}

Add the following in the line below each instance:

If you can't find this code, click on the Can't Find tab.

The code might look different

Some themes will use a slight variation of the code to search for. Try looking for the following instead:

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:

Some files may use something even more different, such as this:

  • {% for prod in collection.products %}

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

The code may be in a different file

Some themes will have the above code in a file that's included in the index.liquid file. Try looking for the following files instead (in the snippet folder):

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

4 - Edit the related products.liquid

 

Open the snippets folder and click on the related-product.liquid file to open it.  Look for all instances of this (this line may appear more than once in a file):

{% for product in collection.products %}

Add the following in the line below each instance:

If the theme doesn't have a related products file, or you can't find the code, then click on the Can't Find tab.

If you can't find the file

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

If you can find the file but not the code

Some themes will use a slight variation of the code to search for. Try looking for the following instead:

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:

Some files may use something even more different, such as this:

  • {% for prod in collection.products %}

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

5 - Edit the search.liquid

 

Click on search.liquid template to open the file.  In the search.liquid, look for all instances of this (this may appear more than once in the file):

{% for item in search.results %}

Below each instance, add the following:

6 - Edit the product.liquid

 

Click on product.liquid template to open the file.
Add this code to the top of the product.liquid file:

7 - Product.liquid cont.

 

Find all instances of this (this may appear more than once in the file):

{% for variant in product.variants %}

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

Below each instance, add the following:

Ninja Notes - Swatches

If your theme uses swatches, which is functionality where the theme shows variants as buttons instead of through a dropdown menu, the code in step 7 will also need to be added to a snippet file, usually named swatch.liquid or product-swatch.liquid.

8 - Product.liquid cont.

 

Find all instances of this code ... ... and replace with this code
product.variants.size bold_variants_size
{{ product | json }} {% include 'bold-product', output: 'json' %}

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.

If you can't find {{ product | json }} in those files, then try searching for it in the theme.liquid file. If it's not in the product.liquid or theme.liquid file, then that can be skipped.

9 - Product.liquid cont.

 

Add this class to the form tag.

  • If there is no class, in the form tag add class="shapp_qb_prod"
  • If there is a class, add shapp_qb_prod to it.

Add the following where you want the quantity break grid to display on your product page. It must be inside the form tag (a good place may be above or below the add to cart button code in the file):

10 - Add Quantity Box (optional)

 

Most themes have a quantity box displayed on the product page, which makes this step optional. Check the theme settings to enable the quantity box, or add this line of code to display one.

Example [add image]

11 - Edit the cart.liquid

 

In the cart.liquid template, display a note on the cart page that tells your customers how much they saved (eg. You saved $x.xx today by buying in bulk!), add the following code to the cart.liquid file:

TIP It depends upon the theme, but usually the best place to put this is under the first line that contains <h1>. This will be near the top of the file.

Example [add image]

12 - Update pricing code

 

Updates need to be done on all theme files that output product prices on the site. The number and name 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's important that each theme file that outputs a price be modified, to ensure the correct pricing always shows.

When you're ready to proceed, click on the "files to update" tab.

Go through the list of files below, one file at a time, and then 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, click on the "product.price" tab above to continue.

When you've gone through the list, this step should 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 in a file may appear a few times.

If you found and replaced some of the above, then click on the "files to update" tab and continue down the file list.

If the file has none of these, then click on 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, then click on the "files to update" tab and continue down the file list.

If the file has none of these, then bring up the file editor's search feature (ctrl-f), and do a search for ".price" (minus the quotes), 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", then nothing will need to be done with this file, and you can click on the "files to update" tab and continue down the file list.

If something is found after the search, take note of what was found, and then click on the "other" tab.

Some files in some themes will use something other than "product" or "item", and you'd need to change our code to work with what the file uses. For example, a file may use "product-detail" instead.

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

For example if you found "product-detail.price", then replace "*" with "product-detail" with each item below, and then look for that code in the theme. So, for the first item, you'd 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, click on the "files to update" tab and continue down the file list.

 

Well done! You successfully installed Quantity Breaks! Go get yourself a snack! You deserve it! :-)
Have more questions? Submit a request