Display quantity rules and volume pricing on your store
Quantity rules for B2B catalog are supported on free Shopify themes, version 8.0.0 or later, and volume pricing is supported on version 11.0.0 or later. If you want to display quantity rules and volume pricing on your store, then you can update your store's theme to the latest version.
If you don't want to change or update your theme, then you can add the following code to your theme to display quantity rules and volume pricing. Before you make updates to your theme files, ensure that you duplicate your theme to create a backup copy.
On this page
Product cart quantity
A product variant's cart quantity value can be displayed on the product page or featured product section. The value can be fetched by using Liquid.
Add Liquid product cart quantity code
You can add code to the following files in your theme to support cart quantity:
-
main-product.liquid
or equivalent -
featured-product.liquid
or equivalent
Steps:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme that you want to edit, click the ... button to open the actions menu, and then click Edit code.
- Open the file that you want to edit.
- Create a new line at the bottom of the file, and add the following code:
{% comment %} Cart quantity {% endcomment %}
<span id="CartQuantity-{{ section.id }}" data-product-url="{{ product.url }}" data-section-id="{{ section.id }}" data-variant-id="{{ product.selected_or_first_available_variant.id }}">
{{ cart | line_items_for: product | sum: 'quantity' }}
{{- 'products.product.quantity.in_cart' | t: quantity: cart_qty -}}
</span>
- Click Save.
Add Javascript cart quantity code
When a variant's cart quantity changes, the value displayed on the product page or featured product section must be updated. The updated value can be fetched by using Javascript code.
You can add code to the theme.js
file or equivalent.
Steps:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme that you want to edit, click the ... button to open the actions menu, and then click Edit code.
- Open the
theme.js
file. - Create a new line at the bottom of the file, and add the following code:
let productUrl =
document.querySelector('[data-product-url]').dataset.productUrl;
let sectionId = document.querySelector('[data-section-id]').dataset.sectionId;
let variantId = document.querySelector('[data-variant-id]').dataset.variantId;
// Fetch updated HTML from Section Rendering API
fetch(`${productUrl}?section_id=${sectionId}&variant=${variantId}`)
.then((response) => response.text())
.then((responseText) => {
// Replace the current HTML in DOM with the updated HTML
const updatedHtml = new DOMParser().parseFromString(
responseText,
'text/html',
);
// Update the cart quantity
const currentCartQuantity = document.querySelector(
`#CartQuantity-${sectionId}`,
);
const updatedCartQuantity = updatedHtml.querySelector(
`#CartQuantity-${sectionId}`,
);
currentCartQuantity.innerHTML = updatedCartQuantity.innerHTML;
});
- Click Save.
Quantity rules
A product variant's quantity rules can be displayed on the product page or featured product section. The rules can be fetched by using Liquid.
Add Liquid quantity rules code
You can add code to the following files in your theme to support quantity rules:
-
main-product.liquid
or equivalent -
featured-product.liquid
or equivalent
Steps:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme that you want to edit, click the ... button to open the actions menu, and then click Edit code.
- Open the file that you want to edit.
- Create a new line at the bottom of the file, and then add the following code:
{% comment %} Quantity rules {% endcomment %}
<div id="QuantityRules-{{ section.id }}" data-product-url="{{ product.url }}" data-section-id="{{ section.id }}" data-variant-id="{{ product.selected_or_first_available_variant.id }}">
{%- if product.selected_or_first_available_variant.quantity_rule.increment > 1 -%}
<span>
{{- 'products.product.quantity.multiples_of' | t: quantity: product.selected_or_first_available_variant.quantity_rule.increment -}}
</span>
{%- endif -%}
{%- if product.selected_or_first_available_variant.quantity_rule.min > 1 -%}
<span>
-
{{- 'products.product.quantity.minimum_of' | t: quantity: product.selected_or_first_available_variant.quantity_rule.min -}}
</span>
{%- endif -%}
{%- if product.selected_or_first_available_variant.quantity_rule.max != null -%}
<span>
-
{{- 'products.product.quantity.maximum_of' | t: quantity: product.selected_or_first_available_variant.quantity_rule.max -}}
</span>
{%- endif -%}
</div>
- Click Save.
Add Javascript quantity rules code
Each variant of a product can have its own set of quantity rules. After a different variant is selected, the quantity rules displayed on a product page or featured product section need to be updated. The updated value can be fetched using Javascript code.
-
theme.js
or equivalent -
en.default.json
Steps:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme that you want to edit, click the ... button to open the actions menu, and then click Edit code.
- Open the
theme.js
file. - Create a new line at the bottom of the file, and then add the following code:
let productUrl =
document.querySelector('[data-product-url]').dataset.productUrl;
let sectionId = document.querySelector('[data-section-id]').dataset.sectionId;
let variantId = document.querySelector('[data-variant-id]').dataset.variantId;
// `variantId` is set to the current variant's id. Replace this value with the updated variant's id
// Fetch updated HTML from Section Rendering API
fetch(`${productUrl}?section_id=${sectionId}&variant=${variantId}`)
.then((response) => response.text())
.then((responseText) => {
// Replace the current HTML in DOM with the updated HTML
const updatedHtml = new DOMParser().parseFromString(
responseText,
'text/html',
);
// Update the quantity rules
const currentQuantityRules = document.querySelector(
`#QuantityRules-${sectionId}`,
);
const updatedQuantityRules = updatedHtml.querySelector(
`#QuantityRules-${sectionId}`,
);
currentQuantityRules.innerHTML = updatedQuantityRules.innerHTML;
});
- Click Save.
Volume pricing
Add Liquid volume pricing code
You can add code to the following files in your theme to display volume pricing:
-
main-product.liquid
or equivalent -
featured-product.liquid
or equivalent
Steps:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme that you want to edit, click the ... button to open the actions menu, and then click Edit code.
- Open the file that you want to edit.
- Create a new line at the bottom of the file, and then add the following code:
{%- if product.quantity_price_breaks_configured? -%}
<div class="volume-pricing-note">
<span>{{ 'products.product.volume_pricing.note' | t }}</span>
</div>
<volume-pricing class="parent-display" id="Volume-{{ section.id }}">
{%- if product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}
<span class="caption-large">{{ 'products.product.volume_pricing.title' | t }}</span>
<ul class="list-unstyled no-js-hidden">
<li>
<span>{{ product.selected_or_first_available_variant.quantity_rule.min }}+</span>
{%- assign price = product.selected_or_first_available_variant.price
| money_with_currency
-%}
<span data-text="{{ 'products.product.volume_pricing.price_at_each' | t: price: variant_price }}">
{{ 'sections.quick_order_list.each' | t: money: price -}}
</span>
</li>
{%- for price_break in product.selected_or_first_available_variant.quantity_price_breaks -%}
{%- assign price_break_price = price_break.price | money_with_currency -%}
<li class="{%- if forloop.index >= 3 -%}show-more-item hidden{%- endif -%}">
<span>
{{- price_break.minimum_quantity -}}
<span aria-hidden="true">+</span></span
>
{%- assign price = price_break.price | money_with_currency -%}
<span data-text="{{ 'products.product.volume_pricing.price_at_each' | t: price: price_break_price }}">
{{ 'sections.quick_order_list.each' | t: money: price -}}
</span>
</li>
{%- endfor -%}
</ul>
{%- if product.selected_or_first_available_variant.quantity_price_breaks.size >= 3 -%}
<show-more-button>
<button
class="button-show-more link underlined-link no-js-hidden"
id="Show-More-{{ section.id }}"
type="button"
>
<span class="label-show-more label-text"
><span aria-hidden="true">+ </span>{{ 'products.facets.show_more' | t }}
</span>
</button>
</show-more-button>
{%- endif -%}
{%- endif -%}
</volume-pricing>
{%- endif -%}
- Click Save.
Add Javascript volume pricing code
You can add code to the following file in your theme to display volume pricing:
-
theme.js
Steps:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme that you want to edit, click the ... button to open the actions menu, and then click Edit code.
- Open the
theme.js
file. - Create a new line at the bottom of the file, and then add the following code:
if (!customElements.get('show-more-button')) {
customElements.define(
'show-more-button',
class ShowMoreButton extends HTMLElement {
constructor() {
super();
const button = this.querySelector('button');
button.addEventListener('click', (event) => {
this.expandShowMore(event);
const nextElementToFocus = event.target
.closest('.parent-display')
.querySelector('.show-more-item');
if (
nextElementToFocus &&
!nextElementToFocus.classList.contains('hidden') &&
nextElementToFocus.querySelector('input')
) {
nextElementToFocus.querySelector('input').focus();
}
});
}
expandShowMore(event) {
const parentDisplay = event.target
.closest('[id^="Show-More-"]')
.closest('.parent-display');
const parentWrap = parentDisplay.querySelector('.parent-wrap');
this.querySelectorAll('.label-text').forEach((element) =>
element.classList.toggle('hidden'),
);
parentDisplay
.querySelectorAll('.show-more-item')
.forEach((item) => item.classList.toggle('hidden'));
if (!this.querySelector('.label-show-less')) {
this.classList.add('hidden');
}
}
},
);
}
- Click Save.
Add locales
To ensure that quantity rules and volume pricing displays on all translated versions of your online store, you can add locales by adding the following JSON translation strings to your en.default.json
file.
Steps:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme that you want to edit, click the ... button to open the actions menu, and then click Edit code.
- Open the
en.default.json
file. - Create a new line at the bottom of the file, and then add the following code:
"products": {
"product": {
"volume_pricing": {
"title": "Volume Pricing",
"note": "Volume pricing available",
"price_at_each": "at /ea"
}
"facets": {
"show_more": "Show more"
}
}
}
- Click Save.