Shopify x Stillwater Case Study: Bundle Builder
Updated: 10 hours ago
Shopify's bundles are set by the merchant: the store decides what goes in the box. Build Your Bundle flips that. Shoppers pick their own products inside rules the merchant sets, and each bundle size unlocks a reward, such as a free gift or a percentage off. Merchants add it to any page in Shopify's theme editor, with no code and no extra app.
Services: UX Research, UX/UI Design, Interaction Design, Prototyping, Usability Testing
Tools: Figma, Claude, Shopify's Polaris design system, a coded HTML prototype for testing
Role: Sole designer · BrainStation, 2026
Disclaimer: Concept project, not affiliated with Shopify or a real Stillwater brand.
THE PROBLEM
Merchants are already building custom bundles by hand. Three of the four merchants I interviewed improvise one today: blanket rules like “3 items for 10% off, 4 for 15%”, custom packages for each client, and repeat-customer discounts given out manually. Shopify's own bundles are fixed by the merchant, so as soon as a shopper wants to swap an item, the merchant is back to workarounds.
“We like to offer something curated and easy to buy while also being able to accommodate changes or custom bundling.” (P2)
THE PROBLEM SPACE
The obvious answer is another discount tool. The research pointed somewhere else: 3 of 4 merchants described feeling rewarded through access, recognition or community, and the only catalogue seller on Shopify was tired of running promotions.
User goal (shopper): build a bundle that fits what I want, see what I unlock as I go, and buy it in one go.
User goal (merchant): offer custom bundles without a new promotion to run, with rewards I control.
Business goal: turn a common workaround into a native storefront section, raising order value and repeat purchases while keeping merchants in Shopify.
Scope: products first (the MVP). Event passes and service packages come later.
Success measure: a merchant can set up and publish the section in under 10 minutes without help, and shoppers reach checkout without needing to ask what they unlocked.
How might we let shoppers build their own bundle, inside rules the merchant sets, so returning customers feel rewarded with added value rather than only a discount?
THE PROTOTYPE
Two coded prototypes cover both sides of the feature, on desktop and in an iPhone frame. In Flow 1, Ava shops Stillwater, a Toronto fragrance and objects studio. She opens the bundle builder from a product page, fills three slots to unlock a free Stillwater Pouch, adds a fourth for 10% off, reviews the bundle and checks out. In Flow 2, Mark, the merchant, opens Shopify's theme editor, adds the Build Your Bundle section to a page, sets the two reward tiers, adds three category blocks with their collections, checks the mobile preview and saves.
RESEARCH
I interviewed four business owners: a workshop host, a multi-brand retailer, an event photographer and a designer. Each answered eight questions twice, first as a merchant and then as a shopper.
3 of 4 already build custom offers by hand.
3 of 4 feel rewarded through access, recognition or community.
3 of 4 sell experiences or services, so their idea of a bundle is a return visit.
I started with bundles because they replace a workaround merchants already run, and because a bundle's reward doesn't have to be a discount.
INSIGHTS
Merchants are already hacking custom bundles. Blanket rules and one-off exceptions cost time and margin control, and shoppers can't see them until they ask.
Loyalty should feel like belonging. A free gift or early access can reward a bundle as well as a percentage off, so the reward is the merchant's choice.
Most small merchants sell experiences. Event passes and service packages are planned as later phases, so the MVP is built for product catalogues.
PERSONAS
Mark, The Curator-Operator. 36, Vancouver. Runs a multi-brand boutique on a mature Shopify store. “I don't want another promotion to run. I want my best customers to feel like insiders.”
Lucy, The Community Builder. 29, Toronto. Runs pop-up mosaic workshops and wants to sell return tickets. Her needs shape Phase 2, event passes.
Theo, The Brand-World Creative. 32, Montréal. Sells custom photo and design packages and won't discount high-value work. His needs shape Phase 3, service packages.
INFORMATION ARCHITECTURE
The feature has two sides. On the storefront, Build Your Bundle is a page with a sticky builder beside category sections, reached from a banner on every product page and from a card in the cart. In Shopify's theme editor it is one section with category blocks, so merchants set it up the same way they edit any other part of their theme. Labels follow each side's voice: Stillwater's quiet, editorial tone for shoppers, and Shopify's plain, merchant-first labels in the editor.
USER FLOW
Flow 1, the shopper. Ava starts on a product page, opens the builder, quick-views a product, fills three slots to unlock the free pouch, decides whether to add a fourth for 10% off, reviews the bundle, checks the cart and checks out.
Flow 2, the merchant. Mark opens the page template, adds the Build Your Bundle section, sets the heading and two reward tiers, adds a Category block and picks its collection, adds two more categories, checks the mobile preview and saves.
INTERACTION DESIGN
Visibility of status. The builder says what is unlocked and what one more item adds: “Free Stillwater Pouch unlocked. 1 more for 10% off your bundle.”
Recognition over recall. Filled slots show the product photo and name, so shoppers never hold the bundle in their head.
Error prevention. A sold-out finish shows two alternatives with Swap in, instead of a dead end.
Flexibility. The bundle can go to the cart from 3 products, and “Add one more for 10% off” stays one tap away.
Consistency with Shopify. The editor uses Polaris spacing, the real top bar, section tree, settings cards and the bottom “Saved” toast, so it feels native.
Direct manipulation. Clicking a category in the preview selects it in the sidebar, and categories reorder by drag.
Accessibility. Every screen passes an automated WCAG 2.2 AA check on desktop and mobile, with labelled controls and tap targets that pass WCAG's target size check.
STILLWATER WIREFRAMES
Eight desktop and eight mobile wireframes set the shopper's path from product page to confirmation before colour or photography. The builder sits on the right on desktop and above the products on mobile.
Stillwater Desktop Wireframes:
Stillwater Mobile Wireframes:
STILLWATER HIGH-FIDELITY DESIGN
The storefront uses Stillwater's own system: Cormorant Garamond for display, Inter for body, warm paper backgrounds and square-cornered buttons. Every screen is captured from the coded prototype, so it matches the live prototype.
Stillwater High-Fidelity Desktop Designs:
Stillwater High-Fidelity Mobile Designs:
SHOPIFY WIREFRAMES
The editor wireframes follow the real theme editor layout: a section tree and settings panel on the left, the live store preview on the right, and a sheet-based layout on mobile.
Shopify Desktop Wireframes:
Shopify Mobile Wireframes:
SHOPIFY HIGH-FIDELITY DESIGN
Nine desktop and nine mobile screens rebuild Shopify's current theme editor with Polaris tokens, from opening the page template to saving. The storefront inside the preview is the same Stillwater page as Flow 1.
Shopify High-Fidelity Desktop Designs:
Shopify High-Fidelity Mobile Designs:
TEST PROTOTYPE
Round 1 · At 1000px wide, the full nav crowds the logo and cart. Prices on the Add to bundle buttons make every tile read as a buy button. A shopper who adds one product to the cart gets no hint that a bundle exists.
Round 2 · To check ingredients, the shopper has to leave quick view. The square remove buttons cover the product photo in small slots. The “Not sure where to start?” promo competes with Add bundle to cart.
Round 3 · A Shopify user would spot an editor top bar and settings card that don't match the real ones, and a “Your page is live” card that Shopify never shows. Hidden sections in the tree are too faint to read.
ITERATE & RE-TEST
BEFORE AND AFTER
01 · The header nav collapses into a menu below 1100px, so the logo and cart never crowd.
02 · Each product's price sits under its name, so the Add to bundle button stays one clear action.
03 · Adding one product to the cart now offers “Make it a bundle and get a free Stillwater Pouch”.
04 · Quick view gained Details, How to use and Ingredients, so shoppers don't leave the builder to check a product.
05 · The remove buttons on filled slots became small round buttons just off the corner, so they stop covering the product photo.
06 · I removed the “Not sure where to start?” promo from the builder, so it has one next step.
07 · The editor's top bar now matches Shopify's current theme editor.
08 · The Category settings card matches Shopify's, with the image picker and the collection selector inline.
09 · Saving shows only Shopify's own “Saved” toast. I removed an invented “Your page is live” card, because Shopify doesn't show one.
10 · Hidden sections in the tree went from 2.1:1 to 4.6:1 contrast, so they stay readable while still looking hidden.
WHAT I LEARNED
When the prototype sits inside someone else's product, every invented pattern stands out. Matching Shopify exactly made the new section feel native.
A reward message beats a progress bar. Telling shoppers what one more item unlocks moves them more than a percentage.
One next step per screen. Every extra prompt in the builder competed with Add bundle to cart.
Mobile needed its own layout from 900px, not a squeezed desktop.
FROM WIREFRAME TO FINAL
The core held: a sticky builder beside the products, and one section with category blocks in the editor.
What changed:
Rewards that update as you go.
Quick view details.
A bundle card in the cart.
A footer across the store.
An editor that matches Shopify's own.
VISUAL DESIGN
Two systems sit side by side. The storefront follows the Stillwater style sheet: colour, type, buttons and product components. The editor follows Shopify's admin foundations and components. Both were checked in light and dark mode. Only the prototype frame goes dark, because Shopify's theme editor and the Stillwater store have no dark mode.
Comments