Add quantity rules to your Shopify theme

Quantity rules for B2B catalog are supported only on free Shopify themes, version 8.0.0 or later. 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.

Grow your business

This is an advanced tutorial. If you're not comfortable reading and editing theme code, then you can work with a developer or hire a Shopify Expert.

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:

Desktop

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

iPhone

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

Android

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

1. Open the file that you want to edit.
2. 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 }}">
    {%- assign cart_qty = cart | item_count_for_variant: product.selected_or_first_available_variant.id -%}
    {{- 'products.product.quantity.in_cart' | t: quantity: cart_qty -}}
</span>

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

Desktop

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

iPhone

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

Android

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

1. Open the theme.js file.
2. 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;
    });

1. 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 product cart quantity:

• main-product.liquid or equivalent
• featured-product.liquid or equivalent

Steps:

Desktop

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

iPhone

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

Android

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

1. Open the file that you want to edit.
2. 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>

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

Desktop

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

iPhone

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

Android

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

1. Open the theme.js file.
2. 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;
    });

1. Click Save.

Add locales

Add JSON translation strings

Steps:

Desktop

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

iPhone

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

Android

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, click the ... button to open the actions menu, and then click Edit code.

1. Open the en.default.json file.
2. Create a new line at the bottom of the file, and then add the following code:

{
   "products":{
      "quantity":{
         "minimum_of":"Minimum of ",
         "maximum_of":"Maximum of ",
         "multiples_of":"Increments of ",
         "in_cart": " in cart"
      }
   }
}

1. Click Save.