Skip to content
Silka

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.

Visit the live site
  • Website
  • Catalogue
  • CMS
  • i18n
ONSE home page — professional care for coffee equipment
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

  1. L0
    Sanity StudioShips with the site at /studio
  2. L1
    Content lakeProducts, categories, documents, copy
  3. L2
    Revalidation webhookPOST /api/revalidate
    Next.js App RouterPrerendered, revalidated
  4. L3
    UA · RU · ENhreflang on every URL
    Catalogue & product sheets15 SKUs, six categories
    Five enquiry formsWholesale · samples · private label
  5. L4
    Sanity image CDNPer-breakpoint srcset
    Structured data & sitemapProduct · FAQ · breadcrumbs
    Sales 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
One content lake behind three language versions. The site is prerendered and served from cache; a publish in the Studio is what invalidates it, so nobody deploys to change a dosage.

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

Six categories — powders, tablets, liquids, sprays, granules

3
Languages

UA · RU · EN — 29 pages in each

12
Equipment brands

Filterable, and listed per product

Sanity
Content

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.

ONSE catalogue with category chips, equipment filter and sort
The catalogue, filtered
ONSE Coffee Cleaner 900 g product sheet with SKU, format and dosage
A product sheet
ONSE private label page with the manufacturing offer and its terms
Private label
ONSE on mobile
Mobile

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.