Offroad Source: Wheel & Tire Package Builder for 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

The Problem: No Fitment Verification for High-Value Wheel & Tire Purchases

Offroad Source sells high-value wheel and tire packages to off-road enthusiasts. The average order is between $3,800 and $5,200. At that price point, a customer does not guess they need to know the wheels fit their specific vehicle, the tires match the wheel size, and the complete package is correct before they commit.

BigCommerce’s default product structure treats wheels and tires as separate products on separate pages. A customer trying to build a compatible set had to find a wheel, check its bolt pattern and offset against their vehicle’s specifications, navigate to the tires category, find a tire in the right diameter to match the wheel, verify the load rating, add both to cart individually, and hope they had not missed anything. That process unclear, unguided, and entirely the customer’s responsibility to verify was generating confusion, incorrect purchases, and lost sales on orders worth thousands of dollars.

There was no fitment verification tool. There was no way to browse packages by vehicle. There was no single page showing wheel and tire specifications side by side with a confirmed price. The store’s catalogue was technically complete but commercially broken for how its customers actually needed to shop.

The Solution: A Guided Package Builder From Product Page to Cart

Codinative built a fully custom wheel and tire package builder on BigCommerce Stencil four interconnected components that take a customer from product page entry point to a confirmed bundle in the cart in one guided flow.

A Build Your Wheel & Tire Set CTA on the product page launches the builder. A package browsing interface with vehicle fitment dropdowns Year, Make, Model, Submodel, Chassis and tire dimension filters narrows the catalogue to compatible packages. Package listing cards show the wheel and tire preview images, total package price, and confirmed inclusions at a glance. A Package Details page surfaces full wheel specifications and full tire specifications side by side, optional add-ons, and a Buy Now button that submits the complete bundle four wheels and four tires to the BigCommerce Storefront Cart API in one action.

Project Framework

Offroad Source Package Builder Development: Situation, Task, Action, Result

The Situation: No Fitment Check on $3,800–$5,200 Purchases

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.

The Task: Building a Complete Guided Package Shopping Flow

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.

The Action: Four Custom Components Built on BigCommerce Stencil

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.

The Result: A Confident, Guided Purchase From Vehicle to Cart

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

Core Features of the Wheel & Tire Package Builder

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

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.

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

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.

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.

Deliverables

Offroad Source Package Builder: What Was Shipped

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

Common Questions

Offroad Source Wheel & Tire Package Builder FAQ's

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.

Codinative is a verified BigCommerce Partner. Every project is BigCommerce only — no split focus across platforms

Custom apps, B2B Edition, Stencil and Catalyst storefronts, REST API v3 integrations — built by
developers who work on BigCommerce every day.