Rosa Scrubs: “Build Your Set” Custom Bundle Builder on BigCommerce

Type

BigCommerce Custom Development · Interactive UX · Product Bundling

Role

BigCommerce Stencil · Handlebars.js · JavaScript · Custom CSS · Storefront Cart API

Stack

BigCommerce Stencil · Handlebars.js · JavaScript · Custom CSS · Storefront Cart API

Status

The Problem: A Coordinated Set Split Across Three Separate Pages

Rosa Scrubs sells medical scrub sets a top, pants, and optional accessories like a scrunchie that customers buy together as a coordinated outfit. The product is inherently a bundle. A nurse or healthcare worker choosing scrubs is not picking a single item. They are picking a color, a top size, a pants size, and whether they want the matching accessory four decisions that belong together in one flow.
BigCommerce’s default product structure handles each of these as a separate product on a separate page. A customer who wanted a complete set had to visit the scrub top page, choose a color and size, add to cart, navigate back, find the matching pants, choose the same color, choose a different size because pants fit differently, add to cart again, then find the scrunchie separately. Three pages, three separate add-to-cart actions, and a color coordination problem the customer had to manage themselves across multiple browser tabs.
The existing flow made a simple purchase feel fragmented. Customers who landed expecting to buy a set had to work to assemble one. That friction costs conversions particularly for a brand whose entire identity is the coordinated set.

The Solution: A Single-Page Guided Set Builder

Codinative built a fully custom Build Your Set page on BigCommerce Stencil a single-page guided experience where customers make all four decisions in one place and add the complete set to cart in one action.
The page opens with a product image of the current color selection and a numbered step flow on the right: Choose Your Color, Choose Your Top Size, Choose Your Pants Size, Choose Your Scrunchie Size. Each step shows a product thumbnail, a sizing recommendation specific to that item, size options from XXS through 3XL, and the unit price. The product image updates to reflect the selected color. When every selection is made, a single Add Set to Cart button submits all items top, pants, scrunchie to the BigCommerce Storefront Cart API in one call.
A separate Check Our Product Features section uses a three-tab interface Tops, Pants, Fabric to let customers explore what they are buying before committing. Each tab surfaces the product name and fit type, four performance properties with icons, a six-item feature gallery with real product photography, and a material composition breakdown showing exact percentages.

Project Framework

Rosa Scrubs Bundle Builder Development: Situation, Task, Action, Result

The Situation: Color Coordination Left to the Customer Across Pages

Rosa Scrubs customers needed to purchase a coordinated scrub set top, pants, and accessory but BigCommerce’s default product structure placed each item on a separate page with separate add-to-cart flows. The experience was fragmented and made color coordination across items the customer’s problem to solve.

The Task: Building a One-Page Guided Set Selection Flow

Build a single-page interactive set builder where customers choose color, top size, pants size, and optional scrunchie in one guided flow, then add the complete set to cart in one action without navigating to any individual product pages.

The Action: Four Steps, One Cart Call, on BigCommerce Stencil

Built a custom Build Your Set page on BigCommerce Stencil with four numbered steps: color swatches updating the live product image on selection, top size grid with per-item sizing recommendation, pants size grid with its own recommendation noting pants fit one size smaller, and scrunchie Yes/No toggle with price. Implemented a single Add Set to Cart button that batches all selected variants into one Storefront Cart API call. Built a separate tabbed product feature section with Tops, Pants, and Fabric tabs each showing performance properties, a six-image feature gallery with captions, and material composition breakdown with exact percentages: 76% Polyester / 18% Rayon / 6% Spandex for tops, 80% Polyester / 15% Cotton / 5% Spandex for pants.

The Result: One Guided Flow, One Add-to-Cart Action

Core Features

Core Features of the BigCommerce Bundle Builder

Feature 01

Build Your Set: Four-Step Guided Selection

The Build Your Set page is a numbered vertical flow. Each step is visually distinct with a step number, a product thumbnail for that item, a sizing recommendation, and the selection controls. Step 01 Choose Your Color shows six color swatches with the current color name displayed beneath the label. Color: Spiced Apple is selected in the screenshots. Every swatch selection updates the main product image on the left to show the scrub set in that color implemented through JavaScript listening to swatch click events and swapping the image source against a color-to-image map stored as a Handlebars.js data object on the page template. Step 02 Choose Your Top Size shows the top product thumbnail, the recommendation “Pick your usual Top size”, and a size grid from XXS to 3XL with the unit price of $46 below. Size buttons are styled as flat rectangular chips selected state uses a filled background to confirm the choice clearly. Step 03 Choose Your Pants Size shows the pants thumbnail, the recommendation “Order one size smaller than your usual pants” a critical detail that prevents the most common return reason for this product and the same XXS to 3XL grid at $56. Step 04 Choose Your Scrunchie Size shows the scrunchie product image and a simple Yes / No toggle at $6 with the note “Complete your look with a matching scrunchie?” At the bottom of the step flow, a full-width Add Set to Cart button submits all selected items to the cart. The button is inactive until all required selections color, top size, pants size are made. Scrunchie is optional and defaults to No.

Feature 02

Real-Time Color Image Update

When a customer selects a color swatch, the product image on the left side of the page updates immediately to show the scrub set in that color without a page reload. This is a JavaScript-driven image swap not a BigCommerce native variant image feature, which does not work across multiple product IDs on a single page. The implementation stores a color-to-image-set mapping in the page template as a JSON object rendered through Handlebars.js. On swatch selection, JavaScript reads the clicked color key, retrieves the corresponding image URLs from the mapping object, and updates the main image and thumbnail carousel sources. The color name display below the “Choose Your Color” label also updates to match. This gives customers visual confirmation that the color they are selecting applies to the complete set top and pants together before they proceed to sizing.

Feature 03

Tabbed Product Feature Explorer

Below the Build Your Set section, a Check Our Product Features section gives customers a way to understand what they are buying before committing. Three tabs Tops, Pants, Fabric each surface a different view of the product. Tops tab shows the Scrub Top with fit type Regular Fit, four performance properties with line icons Temperature Adaptive, Anti-Odor & Antimicrobial, Wrinkle-Resistant, 4-Way Stretch a six-image feature gallery with captions: Badge Holder Pocket, Chic V-Neck, Perfect Fit, Convenient Top Pocket, Sleek Sleeves, Discreet Bottom Pockets. Material Composition is shown as 76% Polyester / 18% Rayon / 6% Spandex. Pants tab shows Scrub Pants with Regular Fit & Length, the same four performance properties, and a six-image feature gallery: Spacious Thigh Pocket, Flat Front & Silicone Tips, Tailored Leg, Conceal Pocket, Slim Opening, Handy Tool Hanger. Material Composition: 80% Polyester / 15% Cotton / 5% Spandex. Fabric tab shows Fabric Technology with the same four performance properties, a five-icon feature grid Moisture Wicking, Anti Static, Strong & Durable, Functional & Stylish, Soft & Breathable and Material Composition: 80% Polyester / 15% Cotton / 5% Spandex with a product photo of the fabric stack. Tab switching is handled in JavaScript clicking a tab label adds an active class, shows the corresponding content panel, and hides the others. No page reload, no API call. The active tab renders its pill button in the Rosa Scrubs coral brand color.

Feature 04

Single Add Set to Cart via Storefront Cart API

When a customer clicks Add Set to Cart, the JavaScript layer collects the selected variant IDs for the top, pants, and scrunchie (if Yes was selected), and submits them to the BigCommerce Storefront Cart API as a single POST /api/storefront/carts request with a lineItems array containing each selected product and its quantity of 1. This means all selected items land in the cart in one network request. The customer does not see three separate “Added to cart” events. The cart count increments once to reflect the full set. The customer’s experience is that they built a set and added a set not that they added three individual products. If the customer has already started a cart in this session, the request uses POST /api/storefront/carts/{cartId}/items to add to the existing cart rather than creating a new one. Session cart ID is retrieved from the Storefront Cart API GET /api/storefront/cart call that fires on page load.

Deliverables

Rosa Scrubs Bundle Builder: What Was Shipped

Custom Build Your Set page on BigCommerce Stencil no third-party app or plugin

Four-step guided selection flow color, top size, pants size, scrunchie toggle

Real-time color image update on swatch selection via JavaScript image swap

Per-step sizing recommendations specific to each product item

Size grids XXS through 3XL with clear selected state styling

Single Add Set to Cart button all selected variants submitted in one Storefront Cart API call

Existing cart session detection adds to current cart rather than creating a new one

Tabbed product feature explorer Tops, Pants, Fabric tabs

Per-tab content product name, fit type, four performance properties, six-image feature gallery with captions

Material composition breakdown per item with exact percentages

Full Rosa Scrubs brand system coral accent color, typography, and layout applied throughout

Responsive layout functions correctly on desktop and mobile viewport sizes

Common Questions

Rosa Scrubs Bundle Builder FAQ's

What is a custom product bundle builder on BigCommerce?

A custom bundle builder on BigCommerce is a single-page experience that lets customers select multiple related products each with their own variants and add them all to cart in one action. It is built on BigCommerce Stencil using the Storefront Cart API to batch multiple product line items into a single cart request. It is not a native BigCommerce feature and cannot be configured through the admin it requires custom Stencil development.

How does the single Add Set to Cart work across multiple BigCommerce product IDs?

The Storefront Cart API accepts a lineItems array in a single POST request. Each item in the array carries a productId, variantId, and quantity. When the customer clicks Add Set to Cart, JavaScript collects the selected variant IDs for the top, pants, and scrunchie and submits them together in one array. BigCommerce processes all three as a single cart operation. The customer sees one cart update rather than three.

How does the color image update work without a page reload?

BigCommerce's native variant image system is per-product it cannot update an image based on a color selection that spans multiple product IDs on the same page. The color-to-image mapping is stored as a JSON object rendered into the Stencil template via Handlebars.js at page load. When a color swatch is clicked, JavaScript reads the color key from the clicked element, retrieves the corresponding image URLs from the pre-rendered JSON object, and updates the main image and thumbnail carousel source attributes. No API call is made the swap is instantaneous.

Why does the pants sizing recommendation tell customers to go one size smaller?

This is the actual Rosa Scrubs sizing guidance for their pants product. The recommendation "Order one size smaller than your usual pants" is surfaced on the pants step to prevent the most common return reason customers who buy their usual size in pants and find them too large. Surfacing this recommendation at the point of size selection, before the item is in the cart, reduces post-purchase dissatisfaction without requiring any customer service interaction.

Can this type of bundle builder be built for other BigCommerce stores?

Yes. The pattern Stencil template with a JSON configuration object, JavaScript-driven step selection, and Storefront Cart API batch submission applies to any BigCommerce store that sells products customers naturally buy together. Apparel sets, skincare routines, tool kits, uniform packages. The number of steps, the product IDs, the sizing recommendations, and the tab content all come from the template configuration. A new bundle page for a different product set requires updating the configuration, not rewriting the implementation.

Does this require a BigCommerce app or plugin?

No. The entire implementation lives in a custom BigCommerce Stencil page template, a JavaScript file, and a CSS file. There is no third-party app, no monthly subscription, and no external dependency beyond the native BigCommerce Storefront Cart API that is available on every BigCommerce store.

How long does it take Codinative to build a custom bundle builder like this?

A custom BigCommerce bundle builder of this scope guided step flow, color image swap, per-step sizing recommendations, tabbed feature explorer with photography, and Storefront Cart API batch submission takes Codinative three to six weeks from discovery to live deployment, depending on the number of products in the bundle and the complexity of the feature content.

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.