Case study

Shopify theme. Mobile app. Custom loyalty mechanic. All in one ecosystem.

No Waste Club is a Canadian DTC eco cleaning brand. Muscled built three interconnected systems: a custom Dawn-based Shopify theme with a sustainability-tuned section library, a React Native mobile app (iOS + Android) on Firebase, and a Node.js / Express backend brokering Shopify Admin API access for a bespoke 15-bottle purchase-loyalty mechanic.

View live store Jump to outcomes
By the numbers

The numbers speak for themselves

Vault-backed numbers. No presentation-grade estimates. Each one is reconcilable to the founder's own reporting.

Interconnected systems delivered
3

Shopify theme (storefront), Node.js Express server (Shopify Admin API middleware), and React Native mobile app (iOS + Android) all integrated around a single Canadian eco cleaning brand.

SRC: Vault notes.md, GitHub repos confirmed, 2026-05-31

Bottles to unlock discount code
15

Custom purchase-loyalty system built from scratch (no Smile.io, Yotpo, or third-party loyalty app). Customers see a visual bottle counter; reaching 15 bottles unlocks a 4-digit discount code generated server-side.

SRC: Vault projects/2-mobile-app-and-loyalty-system.yaml, 2026-05-31

Custom Liquid sections built
8

Custom section library tailored to the zero-waste cleaning niche: Friendly Cleaning block, comparison table, branded FAQ, featured product, grid slider, multicolumn slider, logo bar, alternating text-image-text.

SRC: Vault projects/1-shopify-theme-build.yaml, 2026-05-31

No Waste Club monthly revenue

Post-rebuild growth
Desktop & Mobile

The full homepage, shown two ways

Two side-by-side screenshots of the long homepage. Hover the desktop card to slowly scroll the screenshot top to bottom, so visitors see the entire page without leaving this one.

  • Desktop · full homepage after rebuild
    3
    Interconnected systems delivered (657 mo)
    /mo at peak
  • Mobile-first after rebuild
    Mobile traffic share
    657 mo
    Engagement length
The work

How the engagement unfolded

  1. Mobile app and backend server kickoff

    Jan 2024

    Initiated the React Native / Expo mobile app (SDK 49) and the Node.js / Express backend server on the same day (Jan 8, 2024). Mobile app wired to Firebase Auth (email/password) and Firebase Firestore (project no-waste-club-e2643). Backend server set up as middleware between the app and the Shopify Admin API (version 2023-07) with two parallel processes via concurrently: orderHandler.js for discount code generation, product.js for customer and order data aggregation.

    • React Native / Expo SDK 49
    • Firebase Auth + Firestore
    • Express.js middleware
    • Shopify Admin API 2023-07

  2. Shopify theme build on Dawn v15.0.2

    Aug 2024 — Oct 2024

    Built the Shopify storefront on the Dawn base (v15.0.2) with Muscled's custom section library. Brand palette led by #658C4A green. Typography: Libre Baskerville for headings, Montserrat + Inter for body. Custom sections tailored to the zero-waste cleaning niche: Friendly Cleaning hero with product ingredient blocks, video, shipping and money-back callouts, and CTA; competitor comparison table; brand-green FAQ; featured product block; custom grid slider; Swiper.js multicolumn / testimonial slider; social proof logo bar; alternating text-image-text layout.

    • Dawn v15.0.2 base
    • Brand green #658C4A
    • Libre Baskerville + Montserrat + Inter
    • 8 custom Liquid sections

  3. Design iterations D6 → D9 → D11 across 7 branches

    Aug — Sep 2024

    Multiple parallel design iterations across 7 Git branches: D6 (primary, Aug 27–30), D6-new-Store, D6-new-feedbacks, D9-New-Store (Sep 2024), D11 (Aug–Sep 2024), Develop, and main. Each iteration carried its own section variants (friendly-cleaning-d6, d7-comparison-section, d9-faq, d11_featured-product). Standard sections reused from Muscled's shared codebase: cart drawer, announcement bar, slideshow, collection grid, featured collection, contact form, newsletter, image banner, related products, image-with-text, rich-text.

    • 7 design iteration branches
    • D6 / D9 / D11 variants
    • Section variant per iteration
    • Shared section library reuse

  4. Bottle loyalty mechanic + 4-digit discount unlock

    Custom app system

    Closed the three-tier loop: mobile app queries the Express server (GET /getdata), which calls the Shopify Admin API to fetch the customer's cumulative order quantity. Home screen renders one bottle icon per bottle purchased. At 15 bottles the counter transforms into a clickable win icon. Tapping unlocks the Discount Code screen, which fetches a generated 4-digit code from GET /getDiscount. Server stores the generated codes; customer applies the code in the Shopify checkout. Bespoke loyalty system, not a third-party install.

    • Bottle counter UI
    • 15-bottle unlock
    • Server-side discount generation
    • GET /getdata + GET /getDiscount
    • Shopify Admin API
Project overview

What we built

No Waste Club is a Canadian DTC brand selling eco cleaning products. The engagement covered three interconnected systems built end-to-end. The Shopify storefront sits on Dawn v15.0.2 with Muscled's custom section library and eight client-specific sections tuned to the sustainable cleaning niche.

The mobile app is React Native / Expo SDK 49 (iOS + Android) on Firebase Auth + Firestore (project no-waste-club-e2643), wired to a Node.js / Express backend that brokers Shopify Admin API access (version 2023-07) for a bespoke purchase-loyalty mechanic: 15 bottles unlocks a 4-digit discount code.

In their own words

(Testimonial TBD. Vault contact_name is open; public-OK is open.)

No Waste Club is a Canadian DTC brand selling eco cleaning products. The brand name, the Friendly Cleaning custom section, the #658C4A brand green, and the mobile app's bottle-tracking loyalty mechanic all point to a zero-waste / sustainable household cleaning product line. Shopify store handle: no-waste-club. Firebase project: no-waste-club-e2643. Three-tier custom system: Shopify theme + Node.js Express server + React Native mobile app.

No Waste Club teamBrand
The challenge

What was holding them back?

A sustainable household cleaning brand needs a store that reads trust-first: ingredient blocks, competitor comparison, FAQ in the brand palette, testimonial proof. Off-the-shelf themes do not ship those sections. The brand also wanted a loyalty mechanic tied to bottle-purchase milestones, surfaced inside a branded mobile app rather than rented from a third-party loyalty SaaS.

  1. 01

    Eco cleaning brand needed a Shopify store that read sustainable, not generic

    No Waste Club is a Canadian DTC zero-waste cleaning brand. A stock Dawn install would not carry the brand: no Friendly Cleaning ingredient block, no competitor comparison table for sustainable vs conventional cleaners, no FAQ in the brand-green palette, no testimonial slider. The category demands trust-building content blocks that off-the-shelf themes do not ship.

  2. 02

    No loyalty layer existed on top of the Shopify store

    The brand wanted to reward repeat buyers tied to a bottle-purchase milestone, not generic points. Stock Shopify discounts do not track cumulative purchase quantity across orders or surface a milestone unlock to the customer. Third-party loyalty apps (Smile.io, Yotpo) carry monthly fees and do not let the brand control the unlock mechanic or surface it inside a branded mobile app.

  3. 03

    Multiple design iterations had to ship in parallel

    The build went through D6, D9, and D11 design iterations across 7 Git branches in roughly two months. Each iteration had its own section variants (friendly-cleaning-d6, d7-comparison-section, d9-faq, d11_featured-product). Iteration variants had to coexist on the same theme without breaking the production branch or losing the shared section library underneath.

  4. 04

    Mobile app needed Shopify customer + order data without exposing the Admin API

    The React Native client could not call the Shopify Admin API directly without exposing privileged credentials. Customer authentication had to live somewhere outside of Shopify (Firebase) but cumulative purchase history had to come from Shopify. A trusted server layer was required to broker the Admin API call, evaluate eligibility against the 15-bottle threshold, generate a discount code, and return it to the app.

Before / After

Before and after

Before

After

Funnel collapse: we removed a full page from the path to purchase.

Solutions

What we built to fix it

Each fix maps to a specific lift in the funnel.

  • Custom Dawn-based theme with a sustainability-tuned section library

    Built on the Dawn v15.0.2 base with Muscled's section library and eight client-specific custom sections: Friendly Cleaning hero (product ingredient blocks + video + shipping and guarantee callouts), competitor comparison table, brand-green FAQ, featured product, custom grid slider, Swiper.js testimonial slider, social proof logo bar, alternating text-image-text. Brand palette led by #658C4A green; typography Libre Baskerville + Montserrat + Inter.

  • Bespoke purchase-loyalty system built end-to-end

    No Smile.io, no Yotpo. React Native client + Express middleware + Shopify Admin API. The home screen renders one bottle icon per bottle purchased. At 15 bottles the counter becomes a clickable win icon that unlocks the Discount Code screen. The server generates a 4-digit code, stores it, and returns it. The brand owns the mechanic, the visual, and the unlock rule.

  • Seven-branch Git workflow for parallel design iterations

    Each design iteration (D6, D9, D11) lived on its own branch with its own section variants (friendly-cleaning-d6.liquid, d7-comparison-section.liquid, d9-faq.liquid, d11_featured-product.liquid). D6 also carried sub-branches for new-Store and new-feedbacks rounds. Production branch (main) stayed clean while iteration branches absorbed feedback. Final selections merged forward.

  • Node.js / Express middleware as a trusted Admin API broker

    Express server with two parallel processes (orderHandler.js + product.js, run via concurrently). GET /getdata fetches all customers + cumulative order quantity from the Shopify Admin API (version 2023-07, REST via shopify-api-node v3.12.6). GET /getDiscount?email=... evaluates the 15-bottle threshold, generates a 4-digit code, stores it, and returns it. The mobile app never touches Admin API credentials.

The stack

What it was built on

Tools picked for the job, not for the resume.

  • Shopify
    Platform
  • Dawn v15.0.2 base
    Theme
  • Liquid + custom sections
    Templating
  • React Native / Expo SDK 49
    Mobile app
  • Firebase Auth + Firestore
    Mobile auth / data
  • Apollo Client + @shopify/shopify-api v7.6.0
    GraphQL / Storefront API
  • Node.js + Express.js
    Backend middleware
  • Shopify Admin API 2023-07 (REST)
    Server-to-Shopify
How we engineer performance

Speed is a revenue lever, not a vanity score

Every Muscled build is engineered to the same standard. The numbers below are the published industry benchmarks we design against, not stand-ins for any one client's figures.

conversions per 0.1s of load-time improvement on ecommerce sites.

+8.4%

SRC: DELOITTE / GOOGLE

conversion rate for stores loading under 2s, vs the ~1.4% Shopify average.

2.4%

SRC: SHOPIFY PERFORMANCE DATA

conversion lift per 1s of mobile load-time gained, where 90% of traffic lives.

+10-20%

SRC: SHOPIFY MOBILE BENCHMARKS

// OUR PERFORMANCE GATE we don't ship unless field Core Web Vitals hold: LCP ≤ 2.5s · INP ≤ 200ms · CLS < 0.1 (p75, mobile)

Capability surface

The techniques behind a build like this

Shopify storefront build

  • Dawn v15.0.2 base
  • Brand-green #658C4A palette
  • Mobile-responsive
  • Libre Baskerville headings
  • Montserrat + Inter body
  • 7 Git branches
  • D6 / D9 / D11 iterations
  • Production main branch
  • Cart drawer reuse
  • Announcement bar reuse

Custom section library (eco cleaning niche)

  • Friendly Cleaning hero
  • Comparison table
  • Brand-green FAQ
  • Featured product (D11)
  • Custom grid slider
  • Swiper.js testimonial slider
  • Social proof logo bar
  • Text-image-text alternating layout
  • Shipping callout
  • Money-back guarantee callout
  • Product ingredient blocks

Mobile app + loyalty mechanic

  • React Native / Expo SDK 49
  • Firebase Auth
  • 15-bottle unlock
  • iOS + Android
  • Firebase Firestore (no-waste-club-e2643)
  • @shopify/shopify-api v7.6.0
  • Apollo Client GraphQL
  • React Navigation v6 stack
  • expo-secure-store
  • Bottle counter UI
  • Win icon transformation
  • Discount Code screen
  • Login + Registration + UserSetting

Backend server + Shopify Admin API

  • Node.js + Express
  • Shopify Admin API 2023-07
  • 4-digit code generation
  • shopify-api-node v3.12.6 (REST)
  • GET /getdata endpoint
  • GET /getDiscount endpoint
  • orderHandler.js process
  • product.js process
  • concurrently process manager
  • Cumulative order quantity aggregation
  • Customer eligibility evaluation
Storefronts

One build. Multiple markets.

Same theme code across markets, with localized pricing, currency, and region-specific content routed automatically.

  • Canada

    Canadian storefront / eco cleaning DTC
    • Dawn v15.0.2 base
    • Brand green #658C4A
    • Libre Baskerville + Montserrat + Inter
    • Friendly Cleaning section
    • Competitor comparison table
    • Brand-green FAQ
    • Swiper.js testimonial slider
    • Custom React Native mobile app
    • Bottle loyalty mechanic
    Canada screenshot
    Served from the same Shopify Markets build. Dedicated capture not included.
Full build · sections

Every section, built mobile-first

The full build is many numbered sections, each designed for the phone first. The rail below shows a sample. Scroll horizontally to step through.

The results

What the work delivered

Each number is reconcilable to the founder's own reporting.

Interconnected systems delivered
3

Shopify theme (storefront), Node.js Express server (Shopify Admin API middleware), and React Native mobile app (iOS + Android) all integrated around a single Canadian eco cleaning brand.

SRC: Vault notes.md, GitHub repos confirmed, 2026-05-31

Bottles to unlock discount code
15

Custom purchase-loyalty system built from scratch (no Smile.io, Yotpo, or third-party loyalty app). Customers see a visual bottle counter; reaching 15 bottles unlocks a 4-digit discount code generated server-side.

SRC: Vault projects/2-mobile-app-and-loyalty-system.yaml, 2026-05-31

Custom Liquid sections built
8

Custom section library tailored to the zero-waste cleaning niche: Friendly Cleaning block, comparison table, branded FAQ, featured product, grid slider, multicolumn slider, logo bar, alternating text-image-text.

SRC: Vault projects/1-shopify-theme-build.yaml, 2026-05-31

Ready to ship yours?

Let's talk about what you want to ship.

A three-tier custom ecosystem for a Canadian eco cleaning DTC brand: Dawn-based Shopify theme with 8 custom sections, React Native mobile app on Firebase, and a Node.js / Express backend brokering Shopify Admin API for a bespoke 15-bottle purchase-loyalty mechanic.

Book a free store audit View all case studies
30 minutes. No deck.