Sweet Bros
Shopify couldn't do pick and mix. So we built the tool that could.
What was broken before we started
Sweet Bros is built on a simple idea: customers should be able to build their own custom sweet bags by picking individual sweets from a visual grid. Standard Shopify can't do this.
Shopify themes are built around a browse-product → add-to-cart flow. There's no native way to let a customer visually select 10–20 individual sweets from a grid, bundle them into a single custom bag, and check out as one line item.
Sweet Bros also needed a cable bag builder (pick exactly 4 flavours) and a party tub configurator with dynamic variant-based pricing. Three distinct custom product experiences on a single site - none of which exist in standard Shopify.
The solution
Shopify as the engine, React as the experience. A fully custom React frontend talking to Shopify's Storefront API via GraphQL - the customer never sees Shopify's default storefront.
Sweet Bag Picker
Visual grid of sweets - tap to select, live counter showing '12 / 20 sweets selected', validation preventing checkout below minimum. Selected items show a pulsing checkmark and PICKED! badge.
Cable Bag Builder
Exact-count selection (4 flavours required). Powered by the same component as the sweet picker with different configuration - adding new builder types in future is trivial.
Party Tub Configurator
Bulk order builder with +/- controls. Maps selected quantity to real Shopify product variants so pricing stays in sync with the Shopify backend. Shows per-tub cost and savings.
Batched GraphQL
Seven Shopify collections fetched in a single batched query. Fast initial load, no waterfall requests.
Cart System
React Context with localStorage persistence. Handles standard products and custom builds, storing sweet/cable selections as Shopify line item attributes. Seamless handoff to Shopify's hosted checkout.
The SweetPicker component is configuration-driven - one component handles both the sweet bag (10–20 items) and cable bag (exactly 4) builders by passing different constraint objects. Adding a third builder type in future requires no new component, just a new config. That's the difference between building a feature and building a system.
What actually changed
Ongoing support relationship. Client specifically highlighted post-launch availability in their Google review.
"Amazing service and guidance from start to finish. Nothing was ever too much trouble and I would highly recommend Lancashire Web Fixers. Since the website launch they have only ever been a message away for any queries. Thank you for creating the perfect website."
Sweet BrosGoogle Review ⭐⭐⭐⭐⭐
More projects worth looking at
Let's build something for your business.
Every project starts with a conversation. Tell us what you need - we'll tell you exactly what we'd build, how long it'll take, and what it'll cost. No obligation.
Most clients come through referrals. Most projects lead to ongoing relationships. Most builds are live within one to two weeks. This isn't a coincidence - it's how we work. Direct developer access, no account managers, no agency overhead. Just the work.