PneumaticPlus B2B Family Page  BigCommerce Bulk Order System

Type

BigCommerce B2B Development · Custom Stencil · Bulk Order UX

Role

BigCommerce Stencil · JavaScript · Custom CSS · Storefront Cart API · B2B Edition Quote API

Stack

BigCommerce Stencil · JavaScript · Custom CSS · Storefront Cart API · B2B Edition Quote API

Status

01

The Problem

BigCommerce ships every merchant the same registration form. It collects a name, an email, and a password, and it creates an account on the spot  no review, no qualification, no custom data.

That works for a standard retail store. It breaks immediately for merchants running wholesale programs, trade pricing, B2B onboarding, or members-only access. They need to know who is signing up before granting access. They need custom fields  company name, trade pricing eligibility, purchase intent, tax ID. They need an approval step that sits between the application and the account.

Without a solution built for BigCommerce, merchants were stitching together generic form plugins with no real platform integration, creating customers manually inside the admin, and managing approvals through email threads. Submission data lived in spreadsheets. Nothing connected back to the customer record in BigCommerce. The process was slow, inconsistent, and entirely dependent on someone remembering to follow up.

02

The Solution

Codinative built a custom BigCommerce app that replaces the default registration flow with a controlled, branded, fully automated onboarding pipeline.

It installs natively into the merchant’s BigCommerce control panel through the App Development Framework, authenticated via OAuth 2.0. Customer creation on approval goes through the REST API v3. The active form injects into the storefront through the Scripts API. Every state change fires through Webhooks that trigger the correct branded email the moment a decision is made.

Merchants build forms visually without writing code. Every submission enters an approval queue. Approvals create a real customer in BigCommerce with all submitted data attached. Rejections and resubmission requests send the right branded email automatically. The entire pipeline lives in one dashboard inside the control panel. No spreadsheets. No manual emails. No developer needed after install.

Project Framework

Situation · Task · Action · Result

S Situation

PneumaticPlus sells industrial pneumatic components to B2B buyers who regularly order multiple variants at once. Their BigCommerce store only had standard individual product pages forcing bulk buyers to open each variant separately, add to cart one by one, and repeat across dozens of SKUs with no way to compare specifications in a single view.

T Task

Build a B2B-grade family page system that groups all variants of a product into one page with a bulk order table, letting customers compare specs, set quantities, and add multiple SKUs to cart or request a multi-line quote in a single action.

A Action

Built a custom Family Page on BigCommerce Stencil with JavaScript and custom CSS. Implemented a multi-SKU bulk order table grouped by product sub-series FBB, FBB-LH, FBB-TH showing SKU, part number, port size, thread type, connection type, unit price, quantity stepper, Add to Cart, Quote, and Details per row. Added out-of-stock indicators per variant with greyed-out disabled rows. Built Add All to Cart and Request Quote (Multi-Line) at page level. Implemented a sticky bottom bar showing live SKU count, unit count, and estimated total as selections are made. Added advanced sorting with proper numeric parsing including fractional NPT values so ¼” sorts before ⅜” before ½” correctly. Linked every individual product page back to the family table via a banner. Connected bulk add-to-cart to the BigCommerce Storefront Cart API and quote generation to the B2B Edition Quote API.

R Result

B2B buyers can now compare all variants side by side and place multi-SKU orders in seconds. The ordering process that previously required 15 separate page loads now takes a single visit to the family page and one click. PneumaticPlus is measurably more competitive for bulk industrial purchasing.

Core Features

01

Feature 01

Feature 01 Family Page Header: Product Series Overview

The family page opens with a product series header series name, full product description, series image, and a horizontal list of key specifications pulled from BigCommerce custom fields. For the FBB Series Ball Valves this includes Nickel-Plated Brass Body, Taper Swiveling Elbow Design, Push-to-Connect Technology, Stainless Steel Gripper, Pre-Applied PTFE Threads, Working Pressure 0–217 PSI, Temperature −4°F to 160°F, and Wide Tubing Compatibility. Below the header, the section title “Select Sizes & Order” with the instruction “Enter quantities in one or more rows, then add to cart or request a quote” sets the workflow expectation immediately. Two primary action buttons sit in the top-right corner of this section Add All to Cart in yellow and Request Quote (Multi-Line) in white outline so buyers who already know what they want can act without reading every row first.

Feature 02

Feature 02 Multi-SKU Bulk Order Table Grouped by Sub-Series

The core of the family page is a data table grouped by product sub-series. The FBB Series renders three separate sub-series tables FBB, FBB-LH, and FBB-TH each with its own header row and its own set of variant rows beneath it. Every row in the table shows: a checkbox for bulk selection, SKU, Part Number, Port Size, Thread Type, Connection Type, Unit Price, a quantity stepper with minus, value field, and plus, an Add to Cart button for that row, a Quote button for that row, and a Details link to the individual product page. Selected rows highlight in yellow so buyers always have a clear visual confirmation of what is in their pending order. The select-all checkbox in the column header selects every available row in that sub-series table in one click. Rows where stock is unavailable show an OUT OF STOCK badge in the Add to Cart column, the row is visually greyed out, and the quantity stepper is disabled so buyers cannot accidentally add unavailable items to their order.

02

03

Feature 03

Feature 03 Advanced Sorting with Fractional NPT Value Parsing

Every column in the bulk order table is sortable. SKU, Part Number, Port Size, Thread Type, Connection Type, and Unit Price all carry sort controls ascending and descending in the column header. Port Size sorting required custom JavaScript logic. Standard string sorting would place “1” NPT before “1/4” NPT before “1/2” NPT before “3/4″ NPT which is alphabetically correct but industrially wrong. A buyer sorting by port size expects ¼” before ⅜” before ½” before ¾” before 1″ in true numeric order. The implementation parses fractional NPT values “1/4 NPT”, “3/8 NPT”, “1/2 NPT”, “3/4 NPT”, “1 NPT” into their true decimal equivalents before comparing. Sort order reflects actual pipe sizing, not string order. This detail matters to every industrial buyer using the table to make specification decisions.

Feature 04

Feature 04 Sticky Bottom Bar: Live SKU Count, Units, and Estimated Total

As buyers check rows and enter quantities, a sticky bar fixed to the bottom of the viewport tracks the selection in real time. The bar shows three live values: SKUs selected, total units across all selected rows, and estimated total price. On the PneumaticPlus screens: “3 SKUs selected | 3 units | Estimated Total: $18.46” with Add Selected To Cart, Request Quote (Selected), and Clear All Qty buttons. This gives buyers a running confirmation of what their order looks like before committing. It also surfaces the bulk add-to-cart and quote actions at the point where they are most relevant when the buyer has already made selections without requiring them to scroll back to the top of the page. The estimated total recalculates on every quantity change. It reads unit prices from the rendered table rather than making additional API calls, so it updates instantly without any loading delay.

04

05

Feature 05

Feature 05 Category Page with Family Page Badge

On the General Purpose Ball Valves category page, the FBB Series entry displays a FAMILY PAGE badge on its category card and a View Products button instead of the standard Add to Cart. This signals to B2B buyers browsing the catalogue that this product has a dedicated bulk ordering view, and takes them directly to the family page rather than a single variant. The category page also has Port Size and Connection Type filter facets in the left sidebar Port Size showing 1″ NPT (8), 1″ × ¾” NPT (2), 1-½” NPT (3), 1-¼” NPT (4), ½” NPT (8), ¼” NPT (9) and so on giving buyers who arrive at the category level a way to pre-filter b

Feature 06

Feature 06 Individual Product Page Linked Back to Family Table

Every individual variant product page in the FBB Series shows a prominent yellow banner directly below the breadcrumb: “This is part of the FBB Series Ball Valves compare all sizes or order multiple variants at once” with a button: View Full Size Comparison Table FBB Series Ball Valves. This banner is injected via a BigCommerce custom field on the product that stores the family page URL. Any product can be linked to any family page by setting one custom field in the BigCommerce admin. The banner ensures that a buyer who arrives on a single product page via search or direct link is never more than one click away from the full bulk ordering interface.

06

01

Feature 01

Visual Form Builder

The builder splits into a field palette and a real-time live preview. Drag a field in, the preview updates immediately. Thirteen field types across four groups.

Basic Inputs — Text · Email · Phone · Number
Selection Fields — Textarea · Select · Radio · Checkbox
Address Fields — Country · State/Province
Special Fields — Date · File · URL

A theme editor handles form colors, typography, and button styles — no CSS needed. First Name, Last Name, Email, and Password are locked because BigCommerce requires them to create a customer through the REST API v3. Desktop and Mobile viewport toggles let merchants verify the form renders correctly before it goes live.

Core Features

Architecture

Registered through the BigCommerce App Development Framework. OAuth 2.0 handles authentication through a standard handshake identical to every app in the BigCommerce App Marketplace. Customer creation uses the REST API v3 Customers endpoint. The active form injects into the storefront through the Scripts API. Submission and approval events fire through Webhooks that trigger email dispatch the moment a status changes. The dashboard runs on BigDesign tokens for native control panel styling with custom React components for the form builder and preview.

Layer Technology
App Framework
App Framework
Authentication
OAuth 2.0
Customer Creation
BigCommerce REST API v3
Storefront Injection
Scripts API
Event Layer
Webhooks
Admin UI
BigDesign + React
Backend
Node.js
Database
PostgreSQL
Email
Transactional Email API

What Was Shipped

Deliverables

Custom Family Page template on BigCommerce Stencil new page type, no third-party app

Custom Family Page template on BigCommerce Stencil new page type, no third-party app

Product series header with name, description, image, and key specifications from custom fields

Product series header with name, description, image, and key specifications from custom fields

Multi-SKU bulk order table grouped by product sub-series with sortable columns

Multi-SKU bulk order table grouped by product sub-series with sortable columns

Per-row controls checkbox, SKU, part number, port size, thread type, connection type, unit price, quantity stepper, Add to Cart, Quote, Details

Per-row controls checkbox, SKU, part number, port size, thread type, connection type, unit price, quantity stepper, Add to Cart, Quote, Details

Out-of-stock indicators per variant greyed row, disabled stepper, OUT OF STOCK badge

Out-of-stock indicators per variant greyed row, disabled stepper, OUT OF STOCK badge

Add All to Cart and Request Quote (Multi-Line) at page level

Add All to Cart and Request Quote (Multi-Line) at page level

Sticky bottom bar live SKU count, unit count, and estimated total with Add Selected to Cart and Request Quote (Selected)

Sticky bottom bar live SKU count, unit count, and estimated total with Add Selected to Cart and Request Quote (Selected)

Advanced column sorting with fractional NPT value numeric parsing

Advanced column sorting with fractional NPT value numeric parsing

Responsive layout switches to card view on smaller screens

Responsive layout switches to card view on smaller screens

Loading states, toast notifications, and error handling throughout

Loading states, toast notifications, and error handling throughout

Individual product page banner linking back to family table via custom field

Individual product page banner linking back to family table via custom field

Category page FAMILY PAGE badge and View Products routing

Category page FAMILY PAGE badge and View Products routing

Zero third-party dependencies built entirely on BigCommerce Stencil, JavaScript, and CSS

Zero third-party dependencies built entirely on BigCommerce Stencil, JavaScript, and CSS

BigCommerce app with OAuth 2.0 install flow and native control panel integration

No-code visual form builder — 13 field types, live preview, theme editor

Multi-form library with independent configurations and one-click exclusive activation

Approval workflow engine — Pending · Approved · Rejected · Resubmission

Filterable, searchable request management queue

Applicant detail view with full submission data and instant action buttons

Five branded transactional email templates — merge variables, Custom HTML, live preview

Analytics dashboard with real-time approval rate and recent submissions

Native BigDesign UI throughout — matches BigCommerce admin exactly

Common Questions

Frequently Asked Questions

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.

What is a custom signup form app for BigCommerce?

It replaces the native BigCommerce customer registration with a configurable form that routes every submission into a merchant-controlled approval workflow. The merchant collects whatever data the business needs, reviews applications from a centralized dashboard, and approves or rejects them before a customer account is created in BigCommerce through the REST API v3. It installs directly into the control panel through the App Development Framework no third-party dashboard, no separate login.

A script tag renders a form in the storefront but cannot create customers, listen to Webhooks, or build an admin UI inside the BigCommerce control panel. The App Development Framework provides OAuth 2.0 authentication and authorized REST API v3 access both required for an approval workflow that produces real customer records with full attribute data in BigCommerce. Any solution not built on the App Development Framework has no reliable path to the customer API.

Add Your Heading Text Here Add Your Heading Text Here Add Your Heading Text Here Add Your Heading Text Here Add Your Heading Text Here

Three at install. store_v2_customers to create approved customers through the REST API v3. store_themes_manage to inject the active form into the storefront via the Scripts API. store_v2_information_read_only for store context currency, locale, platform name. No payment, order, catalog, or financial data scopes are requested.

Yes. The approval workflow, custom fields for business qualification trade pricing eligibility, company type, purchase intent, order volume and the applicant detail view with instant actions make this a direct fit for wholesale gating, trade pricing programs, B2B Edition onboarding, and any merchant who needs to qualify buyers before granting account access.

Yes. Every saved form keeps its own field configuration and theme independently. Merchants build once, deactivate after the campaign, reactivate next time with one toggle. Nothing is rebuilt. Wholesale forms, seasonal forms, and standard forms all live in the same library and switch in a single click.

Yes. Codinative builds both App Marketplace apps and private single-client apps. A private app installs into one store only, carries the merchant's branding throughout, and bypasses the marketplace review timeline. It is the right choice when the app handles logic specific to one merchant's operation.

Six to ten weeks from discovery to App Marketplace submission. That covers OAuth setup, REST API v3 integration, dashboard UI, cross-device QA, and the BigCommerce security review. Private apps without the marketplace review run slightly faster.

Scroll to Top