Case Study

How we built an interactive Kit Builder PDP for Stack Athletics

Stack Athletics wanted to let customers explore curated product combinations without losing control. The answer was a custom Kit Builder page built on top of native Shopify theme functionality — interactive, merchant-configurable, and reusable across the catalog without touching code.

Kit Builder mix-and-match interface on Stack Athletics
ClientStack Athletics
PlatformShopify
TypeCustom PDP Feature
Focus AreasUX, conversions, and merchant tooling

Storefront snapshot

The Kit Builder in production — an interactive mix-and-match experience built natively into the Stack Athletics storefront.

Kit Builder interface on Stack Athletics
The double carousel lets customers swap individual products and see combinations update live before adding the full kit to cart.

The challenge

Apparel shoppers browsing multi-product collections naturally want to see combinations together. Without a dedicated experience for that, they open multiple tabs and carry selections in their heads — a friction pattern that increases cognitive load and kills completion rates.

The combination problem

01Five t-shirts, four shorts, and three hats already produce sixty possible combinations — before adding colorways. Showing them all is not viable.
02Pre-built bundles and shop-the-look layouts remove customer agency. The shopper finds a combination they like — but it is not their combination.
03Stack Athletics had exclusive kit pricing to offer but needed a page experience that made the value of buying together obvious and the process frictionless.
04The solution had to work within the existing Shopify theme without requiring a full rebuild or heavy performance overhead.

Why merchant control mattered

A one-off custom page would solve the immediate problem but create a dependency on developers every time Stack Athletics wanted to launch a new kit or update an existing one. The brief included making the tool genuinely self-serve so the merchant team could operate it without code.

That requirement shaped every implementation decision — from how kit images are managed separately from standard PDP images, to how the Template Customizer exposes the right controls without overwhelming non-technical users.

What we built

The Kit Builder is a double carousel PDP that lets customers change one product at a time and see combinations update live. It was built on top of functionality already in the theme to keep the footprint small and the experience consistent with the rest of the storefront.

Feature scope

ADouble carousel interaction: an outer carousel controlling the kit view, with inner carousels per product category so customers change one item at a time.
BSeparate image management: kit-specific images are maintained independently from the standard product PDP images so both experiences stay clean.
CTheme Customizer integration: merchants configure kits, curate product selections, and upload images without writing or touching code.
DReusable page template: one template powers every kit page, so new kits are created by duplicating the template and configuring it — not by asking a developer.

Implementation approach

Rather than introducing a new carousel library, we adapted the carousel logic already present in the theme. This kept the implementation lightweight, avoided adding to the JavaScript bundle, and ensured the Kit Builder rendered consistently with the rest of the store.

The practical challenge was that some of the theme JS was compiled and minified, which required careful work to understand the available hooks and adapt them for the nested carousel structure without breaking the original behaviour. We also had to ensure compatibility with active third-party app extensions that were modifying native theme functionality.

How we approached the build

The key decisions were made early: use existing theme infrastructure where possible, build the merchant tooling as a first-class concern, and treat reusability as a launch requirement — not a nice-to-have for a future phase.

Discovery & Design

Theme audit, interaction design, and merchant tooling spec

We mapped the theme's existing carousel logic, designed the double carousel interaction model, and defined the Theme Customizer schema that would give merchants control over kit contents and imagery without developer involvement.

Build & Validation

Carousel implementation, third-party compatibility, and merchant handoff

The double carousel was implemented against the theme's minified JS, tested for compatibility with active third-party extensions, and QA'd across devices. Final delivery included a merchant walkthrough so the team could launch and manage new kits independently.

Outcome

The Kit Builder gave Stack Athletics a genuinely new type of page on their storefront — interactive, self-serve, and reusable — without the performance or maintenance costs that typically come with custom Shopify development.

1 ClickFull kit add to cart

Customers mix and match their kit, then add every item to cart in a single action at the exclusive bundle price.

No CodeMerchant-configurable kits

New kits are created and managed entirely through Theme Customizer. No developer involvement needed after launch.

ReusableTemplate scales across catalog

One template powers every kit page. Stack Athletics can expand to as many kits as their catalog supports without additional builds.

Have an idea for an innovative Shopify implementation?

The Kit Builder started as a specific client problem and became a reusable solution. That is how we approach custom builds: solve the real problem, build it to last, and make it something the merchant can actually operate.