Coffee equipment chemistry2026UA · RU · EN
ONSE
Fifteen SKUs, six categories, three languages and twelve equipment brands to filter by — with the dosage, the composition and the safety sheet on the page the buyer is already reading.
- Website
- Catalogue
- CMS
- i18n

- Industry
- Coffee equipment chemistry
- Engagement
- 6 weeks
- Team
- 1 designer · 1 engineer
- Platforms
- Marketing site · Product catalogue · Sanity Studio · Document library
01
Challenge
ONSE manufactures cleaning chemistry for coffee machines, and its buyers are not consumers. A café owner, a service engineer and a distributor in Poland arrive with different questions — what does a case cost, will this damage a Franke group head, where is the safety data sheet — and none of them is a question a product photo answers.
The range also lived in more than one place: printed labels, SDS PDFs, marketplace listings and a private-label conversation with its own minimum order. Whatever we built had to become the version the company edits, not another copy that drifts out of date behind the ones that matter.
- Range
- 15 SKUs across six categories
- Audience
- Cafés · HoReCa · service centres · distributors
- Markets
- Ukraine plus 25 export countries
02
Solution
The product sheet is the centre of the site. Every SKU carries its code, format, dosage, net weight, full composition, shelf life and storage conditions as a spec table — then the procedure split by machine class, because 15 g in a superautomatic and 15 g in a portafilter are not the same instruction.
Compatibility is a filter, not a paragraph. Twelve equipment brands — Saeco, Thermoplan, WMF, Melitta, Necta, Franke and the rest — are selectable in the catalogue and listed on each product with the models the formula was validated on, so “will this work on my machine” is answered before anyone writes an email.
Nothing on the site is hardcoded. Products, categories, documents, compatibility and every line of all three language versions are Sanity documents, edited in a Studio that ships with the site at /studio. Publishing fires a webhook, and the pages the change touched rebuild.
- Product sheet
- Spec, dosage, composition, safety, FAQ
- Compatibility
- 12 equipment brands, filterable
- Editing
- Studio at /studio, webhook revalidation
03
Architecture
- L0Sanity StudioShips with the site at /studio
- L1Content lakeProducts, categories, documents, copy
- L2Revalidation webhookPOST /api/revalidateNext.js App RouterPrerendered, revalidated
- L3UA · RU · ENhreflang on every URLCatalogue & product sheets15 SKUs, six categoriesFive enquiry formsWholesale · samples · private label
- L4Sanity image CDNPer-breakpoint srcsetStructured data & sitemapProduct · FAQ · breadcrumbsSales inboxReply within one business day
Connections (10)
- Sanity Studio → Content lake · publish
- Content lake → Revalidation webhook · webhook
- Revalidation webhook → Next.js App Router · invalidate
- Content lake → Next.js App Router · GROQ
- Next.js App Router → UA · RU · EN
- Next.js App Router → Catalogue & product sheets
- Next.js App Router → Five enquiry forms
- Next.js App Router → Structured data & sitemap
- Catalogue & product sheets → Sanity image CDN
- Five enquiry forms → Sales inbox
04
UX
Three audiences, three entry points, all on the first screen: view the products, request wholesale prices, get product samples. A distributor and a café owner want different things from the same catalogue, and neither has to read the other's page to reach theirs.
The catalogue filters the way a buyer thinks — by category with the count on the chip, by equipment brand, by name or SKU, sorted default, newest or by name. The badges carry merchandising the sales team would otherwise repeat by phone: best seller, popular, for service.
Certification is not a line in a footer. ГСТУ-050:2004 and ГСТУ 3-051:2004 are printed on the labels and repeated in the specs, and the documents page puts eight safety data sheets one click away — individually, or as a single ZIP.
- Entry points
- Catalogue · wholesale · samples
- Filters
- Category · equipment · search · sort
- Documents
- 8 SDS, individually or as a ZIP
05
UI
Dark hero bands with the packaging photographed on white against them, and a deep crimson that marks the primary action and nothing else. The bottle is the brightest thing on any page, which is correct for a range that is bought by the case.
Light and dark are both designed and switchable from the header. Specification tables, the composition string and the multi-step procedures are set to be read at arm's length on a workshop bench, not skimmed on a sofa.
06
Build
Next.js App Router with Sanity behind it. Pages are prerendered and served from cache; a publish in the Studio calls a webhook that invalidates exactly what the change touched, so the served copy is never more than a minute behind the content lake and a dosage correction is not a deploy.
Ukrainian is the primary language, with Russian and English alongside it. Every URL declares its alternates, the sitemap ships all three versions of all 29 pages, and Product, Organization, breadcrumb and FAQ structured data are emitted per page — which is what puts a dosage answer into a search result rather than a title tag.
Images come from Sanity's CDN with a per-breakpoint srcset and format negotiation, so the bottle on a phone is not the desktop file scaled down. Every form carries a hidden honeypot field, and /studio and /api are disallowed in robots.txt.
07
What it does
Product sheets
Format, dosage, net weight, composition, shelf life and storage as a spec table, with the SKU and case quantity a wholesale order needs.
Procedures by machine class
Separate instructions for superautomatics, home machines and professional group heads, each with preventive and heavy-soiling dosages.
Equipment compatibility
Twelve brands filterable in the catalogue and listed per product with the models the formula was validated on.
Catalogue filters
Category chips with live counts, an equipment selector, name-or-SKU search and three sort orders.
Private label
A five-step process, packaging from 250 ml bottles to 20 L canisters, and the terms stated on the page: from 500 units per item, 6–8 weeks.
Sample kits
A request flow for HoReCa and service centres to test the range on their own equipment before a first wholesale order.
Document library
Eight safety data sheets, downloadable one at a time or as a single ZIP.
Three languages, one source
Ukrainian, Russian and English edited as one document set, with hreflang alternates and a sitemap covering every locale.
08
Integrations & stack
Integrations
- Sanity CMS
- Sanity Image CDN
- Rozetka
- Epicentr
- Telegram
- Viber
Frontend
- Next.js
- React
- TypeScript
- Tailwind CSS
Content
- Sanity
- Embedded Studio
- GROQ
- Image CDN
Delivery
- Incremental static regeneration
- Webhook revalidation
- Structured data
- hreflang
09
Where it landed
- 15
- SKUs published
- 3
- Languages
- 12
- Equipment brands
- Sanity
- Content
Six categories — powders, tablets, liquids, sprays, granules
UA · RU · EN — 29 pages in each
Filterable, and listed per product
Studio at /studio; a publish revalidates the page
A wholesale catalogue that answers the buyer's question on the page instead of in an email thread: dosage, composition, compatibility and the safety sheet all sit on the product they belong to, in three languages, edited by the manufacturer rather than by us.




Every build is designed for the phone as its own experience, not as a narrowed desktop layout.
Got a product that should exist by now?Tell us about it.
Describe what has to change in your business. We will work out what that actually takes — including when it takes less than you think.