Quantity Breaks Install Instructions

Michael

September 25, 2013 22:08

Quantity Breaks
All Versions
Advanced liquid knowledge required
30 Minutes+

Warning!

This article requires technical knowledge and prior experience with liquid code. If you are not comfortable with this, Email our Support Wizards for help.

Before you begin, review Notes Before Installing Apps. This article will help get you prepared and answers many common questions.

Select each step below to view the instructions.

Step 1: Add Snippet Files

Note: If any of these files or code already exists, you can skip the step.

Duplicate themes, to create a backup copy.
From "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.
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 6a – e for each missing snippet file.

Step 2: Edit collection.liquid

Note: If any of this code already exists, you can skip the step.

From "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 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 4: Edit related-products.liquid

Note: If any of this code already exists, you can skip the step.

From "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 6: Edit product.liquid

Note: If any of this code already exists, you can skip the step.

From "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 drop-down 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, 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.

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

Note: If any of this code already exists, you can skip the step.

From "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", in 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.

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, select the "Files to Update" tab.

Go through the list of files, 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, 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 in a file may appear a few times.

If you found and replaced some of the above, then 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, then select the "File 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 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, and then select 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 app's 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, select the "File to Update" tab and continue down the file list.

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

Next Steps:

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

Blog Posts:

Quantity Breaks Install Instructions

Warning!

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

Next Steps:

Blog Posts:

Comments

Articles in this section

Warning!

Next Steps:

bold-product.liquid

bold-variant.liquid

Collection

Index

related products.liquid

Blog Posts:

Comments

Articles in this section