A concept storefront for an outdoor brand, with no client and no brief. The homepage is structured as the log of a single nine-day traverse: every section is a numbered waypoint, and a drawn elevation rail down the side doubles as the scroll indicator.
Results at a Glance
This was built to answer a question rather than a brief: how far can a Shopify homepage move away from the stacked-sections template before it stops being a shop? There is no client here, and saying so is the point. A concept lets you push technique in a way a paid build rarely allows.
The answer it arrives at is a field log. One route, nine days, 187 km unsupported. Each section is a waypoint on that route, and a product appears at the point it was actually carried, so the kit is introduced by the terrain that needed it rather than by a category filter.
A narrative page is easy to build badly: hard-code the story, and the merchant owns a homepage they cannot touch. The constraint here was that every narrative section had to stay a real Shopify section with its own schema, so route data, coordinates, imagery and gear lists are all editable from the theme customiser. The storytelling had to survive being edited by somebody who is not a developer.
A story the merchant can edit
Hard-coding the narrative would leave them with a homepage they cannot touch, so every waypoint is a real section with its own schema.
Dawn has to keep updating
Cart, product and checkout logic stay untouched, so Shopify’s own updates still apply cleanly underneath the storefront layer.
Specs belong to the product
Carry weight, fabric and comfort rating come from metafields, so changing a product changes the page rather than a developer changing copy.
Motion has to be optional
Everything animated respects prefers-reduced-motion, and the rail collapses to a plain progress bar on mobile.
The challenge was real, and it was costing time, money, and client experience.
Dawn is the base and stays intact: its cart, product and checkout logic are untouched, so the store still behaves like a standard Shopify store. The storefront layer above it is eight custom sections on Online Store 2.0 JSON templates, each with a full schema of settings, blocks and presets, each independently reorderable.
The signature piece is the altimeter rail: the real elevation profile of the nine days, drawn in SVG, which redraws as you scroll and reports the current height and waypoint. Specs come from product metafields rather than hard-coded copy, and collections are organised by terrain instead of product type. No framework, no jQuery, no page-builder app.
The solution was designed from the ground up to fit this exact business.
No static mockup stage. The layout was worked out directly in the browser, which is why the motion and the type scale agree with each other.
Hero, altimeter rail, route timeline, terrain selector, material breakdown, pack loadout, map and packlist planner, each with a full schema.
The elevation profile is SVG; the line advances with scroll position and a live readout reports height and waypoint.
Lazy imagery with priority on the hero, keyboard focus visible throughout, reduced-motion honoured, full mobile fallback.
Each tool chosen specifically for reliability, integration depth, and ease of use for the client.
Online Store 2.0, JSON templates, metafields.
Base theme, cart and checkout left untouched.
Elevation rail, pack cutaway, fabric section, map.
IntersectionObserver and requestAnimationFrame. No framework.
A narrative storefront the merchant could still edit, on a base theme that still updates.
Every narrative block editable from the customiser.
Weight, comfort, fabric and field-test location per product.
No jQuery, no page-builder app, no dependency to inherit.
Send me the brief, a Figma file, a reference site or a rough outline, and you'll have a fixed quote with a delivery date within 24 hours.
