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.

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>
        &nbsp;-&nbsp;
        {{- '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>
        &nbsp;-&nbsp;
        {{- '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.

Display quantity rules and volume pricing on your store

On this page

Product cart quantity

Add Liquid product cart quantity code

Steps:

Add Javascript cart quantity code

Steps:

Quantity rules

Add Liquid quantity rules code

Steps:

Add Javascript quantity rules code

Steps:

Volume pricing

Add Liquid volume pricing code

Steps:

Add Javascript volume pricing code

Steps:

Add locales

Steps: