Display quantity rules and volume pricing on your store

This page was printed on Jul 27, 2023. For the current version, visit https://help.shopify.com/en/manual/b2b/catalogs/code.

Quantity rules for B2B catalog are supported onfree 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 it's suggested that youupdate your store's themeto the latest version.

If you don't want to change orupdate 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 youduplicate your themeto create a backup copy.

On this page

产品车数量

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.liquidor equivalent
  • featured-product.liquidor equivalent

Steps:

  1. From your Shopify admin, go to欧宝体育官网入口首页>Themes.
  2. Find the theme that you want to edit, click the...button to open the actions menu, and then clickEdit code.
  3. Open the file that you want to edit.
  4. Create a new line at the bottom of the file, and add the following code:
{%comment%}Cart quantity{%endcomment%}{{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-}}
  1. ClickSave.

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 thetheme.jsfile or equivalent.

Steps:

  1. From your Shopify admin, go to欧宝体育官网入口首页>Themes.
  2. Find the theme that you want to edit, click the...button to open the actions menu, and then clickEdit code.
  3. Open thetheme.jsfile.
  4. Create a new line at the bottom of the file, and add the following code:
letproductUrl=document.querySelector('[data-product-url]').dataset.productUrl;letsectionId=document.querySelector('[data-section-id]').dataset.sectionId;letvariantId=document.querySelector('[data-variant-id]').dataset.variantId;// Fetch updated HTML from Section Rendering APIfetch(`${productUrl}?section_id=${sectionId}&variant=${variantId}`).then((response)=>response.text()).then((responseText)=>{// Replace the current HTML in DOM with the updated HTMLconstupdatedHtml=newDOMParser().parseFromString(responseText,'text/html');// Update the cart quantityconstcurrentCartQuantity=document.querySelector(`#CartQuantity-${sectionId}`);constupdatedCartQuantity=updatedHtml.querySelector(`#CartQuantity-${sectionId}`);currentCartQuantity.innerHTML=updatedCartQuantity.innerHTML;});
  1. ClickSave.

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.liquidor equivalent
  • featured-product.liquidor equivalent

Steps:

  1. From your Shopify admin, go to欧宝体育官网入口首页>Themes.
  2. Find the theme that you want to edit, click the...button to open the actions menu, and then clickEdit code.
  3. Open the file that you want to edit.
  4. Create a new line at the bottom of the file, and then add the following code:
{%comment%}Quantity rules{%endcomment%}
{{section.id}}" data-product-url="{{product.url}}" data-section-id="{{section.id}}" data-variant-id="{{product.selected_or_first_available_variant.id}}">{%-ifproduct.selected_or_first_available_variant.quantity_rule.increment>1-%}{{-'products.product.quantity.multiples_of'|t:quantity:product.selected_or_first_available_variant.quantity_rule.increment-}}{%-endif-%}{%-ifproduct.selected_or_first_available_variant.quantity_rule.min>1-%}  - {{-'products.product.quantity.minimum_of'|t:quantity:product.selected_or_first_available_variant.quantity_rule.min-}}{%-endif-%}{%-ifproduct.selected_or_first_available_variant.quantity_rule.max!=null-%}  - {{-'products.product.quantity.maximum_of'|t:quantity:product.selected_or_first_available_variant.quantity_rule.max-}}{%-endif-%}
  1. ClickSave.

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.jsor equivalent
  • en.default.json

Steps:

  1. From your Shopify admin, go to欧宝体育官网入口首页>Themes.
  2. Find the theme that you want to edit, click the...button to open the actions menu, and then clickEdit code.
  3. Open thetheme.jsfile.
  4. Create a new line at the bottom of the file, and then add the following code:
letproductUrl=document.querySelector('[data-product-url]').dataset.productUrl;letsectionId=document.querySelector('[data-section-id]').dataset.sectionId;letvariantId=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 APIfetch(`${productUrl}?section_id=${sectionId}&variant=${variantId}`).then((response)=>response.text()).then((responseText)=>{// Replace the current HTML in DOM with the updated HTMLconstupdatedHtml=newDOMParser().parseFromString(responseText,'text/html');// Update the quantity rulesconstcurrentQuantityRules=document.querySelector(`#QuantityRules-${sectionId}`);constupdatedQuantityRules=updatedHtml.querySelector(`#QuantityRules-${sectionId}`);currentQuantityRules.innerHTML=updatedQuantityRules.innerHTML;});
  1. ClickSave.

Volume pricing

Add Liquid volume pricing code

You can add code to the following files in your theme to display volume pricing:

  • main-product.liquidor equivalent
  • featured-product.liquidor equivalent

Steps:

  1. From your Shopify admin, go to欧宝体育官网入口首页>Themes.
  2. Find the theme that you want to edit, click the...button to open the actions menu, and then clickEdit code.
  3. Open the file that you want to edit.
  4. Create a new line at the bottom of the file, and then add the following code:
{%-ifproduct.quantity_price_breaks_configured?-%}
 {{'products.product.volume_pricing.note'|t}} 
 {{section.id}}">{%-ifproduct.selected_or_first_available_variant.quantity_price_breaks.size>0-%}{{'products.product.volume_pricing.title'|t}} 
     
  •  {{product.selected_or_first_available_variant.quantity_rule.min}}+{%-assignprice=product.selected_or_first_available_variant.price|money_with_currency-%}{{“products.product.volume_pricing.price_at_each”|t:price:variant_price}}">{{'sections.quick_order_list.each'|t:money:price-}} 
    • {%-forprice_breakinproduct.selected_or_first_available_variant.quantity_price_breaks-%}{%-assignprice_break_price=price_break.price|money_with_currency-%}
  • {%-ifforloop.index>=3-%}show-more-item hidden{%-endif-%}"> {{-price_break.minimum_quantity-}}{%-assignprice=price_break.price|money_with_currency-%}{{“products.product.volume_pricing.price_at_each”|t:price:price_break_price}}">{{'sections.quick_order_list.each'|t:money:price-}} 
    • {%-endfor-%}
{%-ifproduct.selected_or_first_available_variant.quantity_price_breaks.size>=3-%}  {%-endif-%}{%-endif-%}
  1. ClickSave.

Add Javascript volume pricing code

You can add code to the following file in your theme to display volume pricing:

  • theme.js

Steps:

  1. From your Shopify admin, go to欧宝体育官网入口首页>Themes.
  2. Find the theme that you want to edit, click the...button to open the actions menu, and then clickEdit code.
  3. Open thetheme.jsfile.
  4. 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',classShowMoreButtonextendsHTMLElement{constructor(){super();constbutton=this.querySelector('button');button.addEventListener('click',(event)=>{this.expandShowMore(event);constnextElementToFocus=event.target.closest('.parent-display').querySelector('.show-more-item');if(nextElementToFocus&&!nextElementToFocus.classList.contains('hidden')&&nextElementToFocus.querySelector('input')){nextElementToFocus.querySelector('input').focus();}});}expandShowMore(event){constparentDisplay=event.target.closest('[id^="Show-More-"]').closest('.parent-display');constparentWrap=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');}}});}
  1. ClickSave.

Add locales

Add JSON translation strings

Steps:

  1. From your Shopify admin, go to欧宝体育官网入口首页>Themes.
  2. Find the theme that you want to edit, click the...button to open the actions menu, and then clickEdit code.
  3. Open theen.default.jsonfile.
  4. 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"}}}
  1. ClickSave.

Ready to start selling with Shopify?

Try it free