Mokabon

A product page that teaches you how to brew the coffee you just bought.

Mokabon has been roasting coffee on the Donkersteeg in Ghent since 1937. Their webshop sold the beans, but not the craft behind them. We rebuilt the product page around what actually happens after the order arrives: a brew guide with a live timer, a taste guide, and recipes that Mokabon edits themselves in Shopify. No extra apps, no second subscription system, and no big bang.

The challenge

Coffee is sold on taste and method, but the product page only showed a bag and a price

Every coffee has its own recipe. Dose, water, grind size, brew time, pressure, temperature. None of that lived anywhere on the site

Putting recipes in the theme means a developer for every change. With 40 coffees, one roast profile update becomes 40 requests

They already ran subscriptions through Seal Subscriptions, but the offer was easy to miss on the product page

Rebuilding the existing product page would put 40 live products at risk at once

What we built

A second product page, not a rebuilt one The new template sits next to the existing one. Mokabon switches a product over one at a time, and switching back is one dropdown. Nothing is lost either way.

Brew guide with a live timer Filter and espresso each get their own tab. The recipe line (dose, water, grind) comes straight from the product. The timer counts through the pour steps with the water amounts calculated per coffee. For espresso, a ratio calculator turns 18 g into 36 g at 1:2, with a slider so the visitor can work out their own dose.

Taste guide Four steps, identical across the range, editable in the theme editor.

Subscription block on top of Seal The block pulls its price from the linked subscription product, so it follows automatically when that price changes. Not connected in Seal? The block disappears on its own. One subscription system, one place to manage subscribers.

Live café block Shows whether the shop on the Donkersteeg is open right now, with today's closing time and a route button. The webshop and the physical store finally point at each other.

Eleven new product fields, with guardrails Every brew value is now a Shopify field with a validated range and a short explanation. Brew time only accepts 15 to 60. Grind size is a dropdown, so "medium fijn", "Medium-Fijn" and "MEDIUM FIJN" can no longer end up on the same site. Units live in the theme, not in the data, so changing "s" to "sec" is one edit for the whole range.

How we worked

One sprint, one feedback round, fixed scope

Zero extra apps or subscriptions added to their stack

Nothing touched outside scope: prices, stock, existing product pages, checkout and emails were left exactly as they were

Handed over with two documents: a manual for operating the new page, and a written rationale for every change and every choice, in plain language

Want your product pages to sell the thing behind the product? Book a call