PneumaticPlus: B2B Family Page & Bulk Order System on BigCommerce

A Family Page on BigCommerce is a custom page type that groups all variants of a product every size, thread type, and connection type into a single interactive bulk order table. Instead of visiting each variant's product page separately, B2B buyers see every SKU in the family side by side with specifications, pricing, and stock status, and can add multiple SKUs to cart or request a multi-line quote in one action. It is built on BigCommerce Stencil using custom fields and the Storefront Cart API no third-party app is required.

Bulk add-to-cart uses the BigCommerce Storefront Cart API. When a buyer clicks Add Selected to Cart or Add All to Cart, the JavaScript layer batches all selected SKUs and quantities into a single Cart API call using the POST /api/storefront/carts endpoint with an lineItems array containing each SKU and its quantity. All selected items land in the cart in one network request no sequential individual add-to-cart calls and no page reload.

Quote generation uses the BigCommerce B2B Edition Quote API. When a buyer clicks Request Quote (Selected) or Request Quote (Multi-Line), the selected SKUs and quantities are submitted to the B2B Edition API which creates a formal quote record in the merchant's B2B dashboard. The buyer receives a confirmation and the merchant can respond with revised pricing, lead times, or approval all within the B2B Edition workflow.

Stock status is read from the BigCommerce Catalog API per variant at page load. Variants where availability is disabled or inventory is zero render with an OUT OF STOCK badge in the Add to Cart column, the row is visually greyed out through CSS, the quantity stepper is set to disabled, and the checkbox is removed. Buyers cannot select or add out-of-stock variants. They can still request a quote on out-of-stock variants through the per-row Quote button.

BigCommerce's default sort is alphabetical string sort. For NPT pipe sizes, alphabetical order puts "1" before "1/4" before "1/2" before "3/4" which is alphabetically correct but numerically wrong for industrial specifications. The correct sort order is ¼" (0.25), ⅜" (0.375), ½" (0.5), ¾" (0.75), 1" (1.0). The implementation uses a custom parsing function that converts fractional NPT strings to their decimal equivalents before comparison. This is not a generic feature it is domain-specific logic written specifically for how industrial buyers read and use specification data.

Yes. The Family Page template is driven entirely by BigCommerce custom fields on each product. A new product series gets its own family page by creating a page in the BigCommerce admin, populating the custom fields with series data, and setting the family page URL on each individual product in the series. No code changes are required to add a new family. PneumaticPlus can expand the system to every product series in their catalogue without any developer involvement.

Yes. The bulk order table switches to a card view on smaller screens. Each variant renders as a card with the same data SKU, specs, price, quantity stepper, and actions stacked vertically rather than in a horizontal table row. The sticky bottom bar remains visible in card view so the live SKU count and estimated total are always accessible.

A custom Family Page system of this scope bulk order table, Cart API integration, B2B Quote API integration, sortable columns with fractional value parsing, out-of-stock logic, sticky totals bar, responsive card view, and individual product page banner takes Codinative four to eight weeks from discovery to live deployment depending on the number of product series and the complexity of the variant specification columns.