Offroad Source Wheel & Tire Package Builder BigCommerce

Type

BigCommerce Custom Development · Vehicle Fitment · Product Bundle Builder

Role

BigCommerce Stencil · JavaScript · jQuery · Custom CSS · Storefront Cart API Package Price Range $3,811 to $5,163+

Stack

BigCommerce Stencil · JavaScript · jQuery · Custom CSS · Storefront Cart API Package Price Range $3,811 to $5,163+

Status

App Dev Framework
REST API v3
OAuth 2.0
Webhooks
BigDesign
React
Node.js
PostgreSQL

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

Offroad Source sells wheel and tire packages between $3,800 and $5,200 to off-road customers who need to verify fitment for their exact vehicle before purchasing. The default BigCommerce storefront gave them no fitment verification, no package browsing, and no way to see wheel and tire specifications together leading to confusion, incorrect orders, and abandoned carts on high-value purchases.

T Task

Build a complete custom package shopping experience vehicle fitment verification, tire dimension filtering, package listing with live pricing, a detailed package breakdown page with side-by-side specifications, and a clean cart that clearly shows the complete bundle.

A Action

Built four components on BigCommerce Stencil with custom JavaScript and CSS: a Build Your Wheel & Tire Set CTA on product pages; a package browsing page with cascading Year/Make/Model/Submodel/Chassis vehicle dropdowns and tire Width/Height, Aspect/Width, Rim Size, and Category filters showing 317 results live; package listing cards showing wheel and tire preview images, total package price in red, and confirmed inclusions 4 Wheels & Tires, Free Mount and Balancing, Free Shipping, 0% APR with Affirm, Flexible payments with PayTomorrow; a Package Details page with wheel image gallery, tire image gallery, side-by-side specifications, optional add-ons for Matching Spare, TPMS, Lug Kit, and Lug Wrench, Package Summary, package price, and Buy Now button that adds the complete bundle to cart via the Storefront Cart API.

R Result

Customers can now find the right wheel and tire combination for their exact vehicle, compare packages confidently with full specifications visible, and complete a $3,800–$5,200 purchase in one guided flow. The cart clearly shows both the wheel and tire line items with SKUs, quantities of 4, and individual pricing American Truxx AT1919 at $582.99 × 4 = $2,331.96 and BF Goodrich T/A KO2 A/T at $708.00 × 4 = $2,832.00 confirming the complete package before checkout.

Core Features

01 Feature 01

Feature 01 Product Page CTA: Build Your Wheel & Tire Set

The entry point to the package builder sits on every wheel product page alongside the standard Add to Cart button. A second red CTA Build Your Wheel & Tire Set launches the package building flow directly from the product the customer is already viewing. The product page also shows a quantity stepper defaulting to 4 for a complete set, a Google Pay button for one-tap checkout on individual wheel purchases, and four trust badges: Free Shipping & Delivery, Fitment Guaranteed, No Credit Needed Financing, and a direct phone number 419-670-3141 for customers who want expert help before committing to a high-value order. The Build Your Wheel & Tire Set CTA is positioned at the same visual weight as Add to Cart so customers building a complete package are not forced to navigate away to find the builder.

Feature 02

Feature 02 Package Browsing: Vehicle Fitment Filters and Tire Dimension Filters

The package browsing interface combines two filter systems. On the left, a Shop Tires panel with Width/Height dropdown, Aspect/Width dropdown, Rim Size input, a refresh button to apply filters, and a Category section with checkbox filters by tire size range 31–32″ Tires (7), 33–34″ Tires (107), 35–36″ Tires (100), 37–40″ Tires (73), 41″+ Tires (1), All Terrain (29) and Brand filters AMP Tires (16), Atturo Tire (13), BFGoodrich (18), Cooper (1), Falken (6), Fuel (5), Fury (7), General (3), Gladiator (6). At the top, a Select Your Vehicle bar with cascading dropdowns Year, Make, Model, Submodel, Chassis narrows the results to packages confirmed compatible with the customer’s specific vehicle. The results count updates live: 317 results with no vehicle selected, filtered down as the customer completes each dropdown. A Sort by Best Match dropdown lets customers order results by relevance. The vehicle fitment dropdowns are cascading Make only activates after Year is selected, Model only after Make, and so on. Each selection fires a filter request that eliminates incompatible packages from the results. A customer who selects their Year, Make, Model, Submodel, and Chassis sees only packages where the wheel bolt pattern, offset, and hub bore are confirmed correct for that vehicle.

02

03 Feature 03

Feature 03 Package Listing Cards: Total Price, Wheel and Tire Preview, Confirmed Inclusions

Each package listing card shows the complete purchase decision at a glance. Total Package in bold above the price in red $3,811.96, $5,163.96, $4,875.92. A side-by-side preview of the wheel image and tire image so the customer can see the combination before clicking. The full wheel name and tire name below the images American Truxx AT1919 – 22×12 – 8×180 BP – −44mm Offset – Black Wheel paired with BF Goodrich Trail Terrain T/A 275/45R22 XL112H, BF Goodrich T/A KO2 A/T 35×12.50R22 E117R, or Cooper Discoverer STT Pro 37×13.50R22 E. Every card confirms the same five inclusions: 4 Wheels & Tires, Free Mount and Balancing, Free Shipping, 0% APR or as low as with Affirm, Flexible payments with PayTomorrow. A red Select button advances to the Package Details page. The pricing displayed on each card is the total for four wheels and four tires combined the customer sees the real cost of the complete purchase before clicking into the detail page, not a per-unit price that requires mental arithmetic

Feature 04

Feature 04 Package Details Page: Side-by-Side Wheel and Tire Specs

The Package Details page is the full specification view before purchase. On the left, the wheel image gallery with thumbnail navigation and the full wheel name American Truxx AT1919 – 22×12 – 8×180 BP – −44mm Offset – Black Wheel with a Change Wheel Selection button. Below the image, wheel description and a Wheel Specifications table starting with Brand: American Truxx, Model: AT1919, and continuing with size and fitment data. In the centre, the tire image gallery with thumbnail navigation and the full tire name BF Goodrich T/A KO2 A/T 35×12.50R22 E117R with a Change Tire Selection button. Below, tire description and a More Information section with tire specifications starting with Brand: BF Goodrich Tires, SKU: 67480, Model: T/A KO2 A/T, Wheel Size: 22. On the right, a Package Summary panel confirming: ✓ 4 Wheels & Tires, ✓ 4 Center Caps, ✓ 4 Mounted & Balanced, ✓ 4 Free Freight Shipping. Below the summary, four Package Options dropdowns Add a Matching Spare, Add a TPMS, Add a Lug Kit, Add a Lug Wrench each with a help icon. Package Price in bold below the options: $5,163.96 in red. A prominent red Buy Now button submits the complete bundle to cart.

04

05 Feature 05

Feature 05 Cart: Complete Bundle Shown Clearly

The cart page shows the complete package as two clearly labeled line items not as a confusing list of unrelated products. Line item 1: American Truxx American Truxx AT1919 – 22×12 – 8×180 BP – −44mm Offset – Black Wheel SKU: AT1919-22278BM $582.99 × 4 = $2,331.96 Line item 2: BFGoodrich BF Goodrich T/A KO2 A/T 35×12.50R22 E117R SKU: 67480 $708.00 × 4 = $2,832.00 Subtotal: $5,163.96. Grand Total: $5,163.96 in red. Coupon Code field. Affirm financing note: “Pay with Affirm on orders over $35. See if you qualify.” A full-width red Check Out button. The cart confirms the exact quantity of 4 for both items the customer immediately sees they have a complete set. Each line item shows the brand, full product name, and SKU so there is no ambiguity about what is in the order.

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

Build Your Wheel & Tire Set CTA on product pages alongside standard Add to Cart

Product page trust badges Free Shipping, Fitment Guaranteed, No Credit Needed Financing, expert phone number

Package browsing interface with cascading vehicle fitment dropdowns Year, Make, Model, Submodel, Chassis

Tire dimension filters Width/Height, Aspect/Width, Rim Size, Category checkboxes, Brand checkboxes

Live results count updating on filter change 317 results base

Package listing cards wheel and tire preview images, total package price, confirmed inclusions, Select CTA

Package Details page wheel image gallery, tire image gallery, side-by-side specifications

Change Wheel Selection and Change Tire Selection controls on Package Details page

Package Summary panel 4 Wheels & Tires, 4 Center Caps, 4 Mounted & Balanced, 4 Free Freight Shipping

Four optional add-on dropdowns Matching Spare, TPMS, Lug Kit, Lug Wrench

Buy Now button submitting complete bundle via Storefront Cart API

Cart showing both line items clearly with brand, full product name, SKU, quantity of 4, and line totals

Affirm financing note on cart page

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

What is a wheel and tire package builder on BigCommerce?

A wheel and tire package builder is a custom purchasing flow built on BigCommerce Stencil that lets customers select a compatible wheel and tire combination for their specific vehicle and add the complete set four wheels and four tires to cart in one action. It replaces the default separate-product browsing experience with a guided flow that includes vehicle fitment verification, tire dimension filtering, side-by-side specifications, and confirmed package pricing before purchase.

How does the vehicle fitment filtering work?

The vehicle fitment system uses cascading dropdowns Year, Make, Model, Submodel, Chassis. Each selection fires a JavaScript filter that eliminates incompatible packages from the results. Make only activates after Year is selected, Model only after Make, and so on. When all five fields are populated and the customer clicks Go, the package results update to show only wheel and tire combinations where the bolt pattern, offset, and hub bore are confirmed correct for that vehicle.

How does the package builder add a complete set to the BigCommerce cart?

When the customer clicks Buy Now on the Package Details page, JavaScript collects the selected wheel's variant ID and the selected tire's variant ID, sets quantity to 4 for each, and submits them to the BigCommerce Storefront Cart API. The API call uses a lineItems array with two entries one for the wheel at quantity 4 and one for the tire at quantity 4. Both line items land in the cart in one network request. The customer does not add wheels and tires separately.

What are the optional add-ons on the Package Details page?

Four optional add-ons are available as dropdowns: Add a Matching Spare (a fifth wheel and tire for the spare position), Add a TPMS (Tire Pressure Monitoring System sensors), Add a Lug Kit (matching lug nuts for the selected wheel's bolt pattern), and Add a Lug Wrench. Each add-on has a help icon that explains what it is. Selected add-ons are included in the Buy Now submission alongside the main wheel and tire line items.

Why does the cart show both wheel and tire as separate line items?

The BigCommerce cart stores products as individual line items. The package builder adds four wheels and four tires as two separate line items rather than a single bundled SKU, which preserves BigCommerce's native inventory management, return processing, and order management for both products independently. The cart page is styled to display both line items together with brand, full product name, SKU, quantity of 4, and line total so the customer immediately reads it as a complete set.

Can the vehicle fitment data be maintained without developer involvement?

Yes. Vehicle fitment data is managed through BigCommerce custom fields on each wheel and tire product. Adding a new vehicle fitment or a new package requires updating the relevant custom fields in the BigCommerce admin. No code changes are required. Offroad Source's team can manage their fitment catalogue directly from the BigCommerce admin without contacting a developer.

Does the builder work for different wheel sizes and tire brands?

Yes. The tire dimension filters Width/Height, Aspect/Width, Rim Size and the Brand checkboxes in the Shop Tires panel filter the package catalogue dynamically. The brand list includes AMP Tires, Atturo Tire, BFGoodrich, Cooper, Falken, Fuel, Fury, General, and Gladiator. Each filter updates the results count live. Customers who want a specific brand or a specific tire dimension filter down from 317 results to the exact packages that match their requirements.

How long does it take Codinative to build a custom wheel and tire package builder?

A package builder of this scope vehicle fitment dropdowns, tire dimension filters, package listing cards with live pricing, a Package Details page with side-by-side specifications and add-on dropdowns, and Storefront Cart API bundle submission takes Codinative six to ten weeks from discovery to live deployment depending on the size of the vehicle fitment database and the number of package combinations in the catalogue.

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.

Why does this need to be a BigCommerce app and not a script or plugin?

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.

What OAuth scopes does the app request?

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

Does this app support B2B and wholesale onboarding on BigCommerce?

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.

Can merchants switch between different signup forms for different campaigns?

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.

What happens the moment a merchant approves an applicant?

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.

Can this be built as a private app for one store instead of a marketplace app?

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.

How long does it take to build a BigCommerce app like this?

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.