A concept demo for Shopify Theme Service

Red goes first

Water takes red out of daylight before it takes anything else, and by ten metres it has gone entirely. Four departments, arranged by the depth the kit is for. Scroll and you descend.

Enter the store The Sounding

Your cursor is a torch — it puts the colour back. Now at 02.0 m

A freediver descending head-first into deep blue water — Working depth, photographed as found

SurfaceExposureBreathingInstrumentsCharters from the harbourFive sites on the chart SurfaceExposureBreathingInstrumentsCharters from the harbourFive sites on the chart

The live store needs JavaScript — the product grid, filters, search, quick view, bag, depth gauge and The Sounding are all scripted. Here is a static look at the four departments instead:

A snorkeller at the surface in clear shallow water — Surface — masks, snorkels and fins. In the live version the water above you is still visible and the light is still white.

A diver in a hooded wetsuit sitting on the side of a boat — Exposure — suits, hoods, boots and gloves. Ten metres down, red has already gone out of the water.

Cylinders and buoyancy jackets stacked on a boat deck — Breathing & Buoyancy — cylinders, regulators and jackets. Twenty-two metres, below the thermocline.

A diver lighting a rock wall with a hand torch — Lights & Instruments — torches, reels, compasses and bags. Thirty-two metres, where the only warm light is the one you brought.

Sort

—

Nothing matches that

No kit in this department matches your search.

A diver silhouetted in shafts of sunlight over a sandy seabed

Every item on this page was photographed before it was described, and described only by what is actually in the frame.

The second device

The Sounding

Every dive centre describes its charters in a paragraph. You cannot see where you would go, how far out it is, or what shape the dive actually is. This draws it instead — the run out from the harbour, and the profile underneath it.

Chart — the run out

Profile — the shape of the dive

Depth

—

Run out

—

Boat time

—

The coast, the five sites and every number on this panel are invented for the demo. The water colour filling the profile is not decorative — it is computed from the same light-absorption model the background shader uses, so the cross-section is tinted with the colour the water actually is at each depth.

Four departments

The store, by depth

Each department sits at its own depth in the water column. Changing department does not load a page — it takes you there.

02 m

Surface

Masks, snorkels and fins. The surface is still overhead and the light is still white.

10 m

Exposure

Suits, hoods, boots and gloves. Red has already gone out of the water by the time you get here.

22 m

Breathing

Cylinders, regulators and jackets. Below the thermocline, where the water turns over and goes cold.

32 m

Instruments

Torches, reels, compasses and bags. The only warm light down here is the one you brought with you.

Items, each its own photograph

Departments, all live

Sub-filters across the store

Charter sites on the chart

In plain English

The plain version

What this is

A working demo page built to show what a Shopify storefront redesign from this service can look like. You can browse, filter, search, quick-view, plan a charter and add to a bag. Nothing is transactional.

This brand is invented

NAUTHOLM is not a real dive centre or retailer. The name was checked against real companies before it was used, and nothing here should be confused with an actual business. The coastline and the five charter sites are invented too.

No real price

There is no price anywhere on this page, and no checkout. The bag counts what you put in it and then says so plainly, because nothing is for sale.

No training or safety claims

This is a safety-critical category, so the rule here is stricter than the rest of the page. No training agency is named, no course or qualification level is mentioned, no equipment standard, no depth rating, no material thickness and no breathing gas. A stock photograph cannot support any of those, and inventing one would be dishonest in a way that actually matters. Every description is limited to the shape, finish and use you can see in the frame.

The depth gauge

The number in the header is real — it is the value the background shader is using, and it moves with both your scroll position and the department you are in. It is a visual device on a web page, not a dive plan, and it does not correspond to anywhere you could actually go.

The photography

Every item has its own real photograph, each one looked at full size before it was used and credited in full in this project's README. Where a photograph showed something other than its search term, it was renamed, re-filed or cut. Anything carrying a real manufacturer's logo was rejected outright.

The water

One hand-written WebGL fragment shader, no library, running behind the whole store. It carries a real per-channel light-absorption model, which is why red disappears before blue does as you go down. Its live inputs are your scroll position, the department you have chosen, and your cursor — which behaves as a torch and puts the colour back.

No inbox wired up

Nothing on this page sends a message anywhere, and no charter can actually be booked. It exists to be looked at.