Case study · Paris · Live

The Muuls

A Paris boot label with one product, ninety numbered pairs, and no room for a site that felt like a template. We built a single-page storefront that reads the real Shopify stock count and puts the boot itself at the centre of the page.

Visit the live site Start a project
ClientThe Muuls
ScopeDesign · Build · Commerce · Deploy
CommerceShopify Storefront API
StatusLive
01

The brief

The Muuls make one boot, the Kuru, in two colourways: Noir and Tobacco. The first release was ninety pairs, each one numbered. That is the whole proposition, and it creates a specific problem for a website.

A normal store layout, grid of products, filters, categories, is built for choice. This brand has no choice to offer. Putting one product into a template designed for two hundred makes it look like a shop that failed rather than a release that is deliberately small. The scarcity had to be the structure of the page, not a badge on it.

02

What we did

One page, not a catalogue

The whole site is a single scrolling page: hero, the two colourways, the material and care detail, the numbering story, and the sign-up. No navigation to get lost in, no category pages with one item in them. The scroll order is the sales argument.

Live stock, not a fake counter

A "pairs remaining" bar reads real inventory from Shopify through the Storefront API, on a read-only token, via the headless sales channel. Scarcity messaging only works if the number is true, so it is wired to the actual stock rather than typed in by hand.

A 240-frame product animation

The boot rotates through a 240-frame image sequence drawn to a canvas and driven by scroll position, one sequence per colourway. It gives a 3D turntable feel without shipping a 3D engine or a heavy model to the browser.

The numbering, made visible

A serial block counts down from 090 to 001 and resets, with the /90 pinned underneath. It is a small piece of motion that does one job: make ninety feel like a real number rather than marketing copy.

Type and identity

The Nord typeface is self-hosted rather than pulled from a font service, which keeps the brand consistent, removes a third-party dependency, and stops a font load from delaying the first paint.

Hardened before launch

A content security policy, frame and MIME protections, forced HTTPS, honeypot fields on both sign-up forms and a client-side submit cooldown. A one-product site still collects emails, and email capture attracts bots.

03

How it is built

The front end is a hand-written static page with no build step and no framework, deployed to a CDN. Shopify sits behind it as the commerce layer, handling products, inventory, checkout and orders, which is the part you should never rebuild yourself. The site talks to it through the Storefront API with a read-only token.

That split is the point of a headless setup. The brand gets a front end that looks like nothing else, and the client keeps a normal Shopify admin to run the business from. If the site were ever handed to another studio, the commerce side would be untouched.

Deployment is continuous: a push to the main branch publishes. Security headers are configured at the edge rather than in the page, and development files are excluded from what ships.

04

Where it landed

The site is live at themuuls.com, with the stock counter running against real Shopify inventory and the release page doing the selling. Design, front-end code, the commerce integration, the security configuration and the deployment all came from this studio, with no agency in between.

If you are launching a small run and want the site to carry it, tell us what you are releasing. There is also a second build worth looking at: Junky Solutions, which went the opposite direction entirely.

Book a meeting All web design work
Book a meeting