DEV Community

RAMO
RAMO

Posted on

Our best "content" page has almost no text: building small calculator tools on a hardware store

Most of the SEO advice I read for online stores comes down to "write more." More category copy, more blog posts, more FAQ blocks under the product grid. We did some of that at RAMO, a home improvement and plumbing store in Israel, and it helped a bit. But the page I'm most happy with right now is a small tool with a few inputs and a result box.

It's a pipe diameter selector. You tell it roughly what you're feeding (a sink, a garden line, a few points in a bathroom) and it suggests a sensible pipe size. That's it.

Here's why we built it and a few things I'd do the same way again.

The question behind it

People kept asking us the same thing over WhatsApp: "which pipe do I need?" The honest answer is "it depends," and then a short back-and-forth about how many points, how long the run is, what pressure they have. That conversation is basically a decision tree. A decision tree is something a page can do better than a paragraph, because the visitor only sees the branch that matters to them.

A blog post answering "how to choose pipe diameter" has to cover every case. A tool only has to cover yours.

Keep it a normal page, not a widget

The first instinct was to drop a client-side calculator into a modal on the plumbing category. I'm glad we didn't. The tool lives at its own URL under /tools, and it's a regular Next.js route:

  • The page shell, headings, short explanation and FAQ render on the server, so crawlers and slow phones get real content immediately.
  • Only the input form is a client component. It's small and doesn't pull in anything heavy.
  • The logic is a plain function with no React in it. That made it easy to test with a handful of input/output cases, and it means the same function can be reused later (for example by our support bot) without copying rules around.
// lib/tools/pipe-diameter.ts
export type PipeInput = { points: number; use: 'indoor' | 'garden'; longRun: boolean };

export function suggestDiameter(input: PipeInput) {
  // simplified example of the shape, not our full rule set
  if (input.use === 'garden') return input.longRun ? '25mm' : '20mm';
  if (input.points <= 2 && !input.longRun) return '16mm';
  return '20mm';
}
Enter fullscreen mode Exit fullscreen mode

The values above are a simplified illustration, not a plumbing standard, so please don't size your house from this snippet.

Structured data that matches what's on screen

We added BreadcrumbList and a FAQPage block for the short questions under the tool. The rule we follow: every FAQ answer in the JSON-LD must also be visible on the page, word for word. It's tempting to stuff extra Q&A into the schema only. Don't. It's the kind of mismatch that looks fine until a search engine decides it isn't.

Link out to products, but only from the result

The result box suggests a size and then links to the matching items in the plumbing category. We deliberately don't put product carousels above the tool. Someone who just wants an answer gets it first; someone who's ready to buy has a single obvious next step.

What changed (qualitatively)

I don't have clean numbers I'd stand behind yet, so I won't make any up. What I can say: the "which pipe?" messages now often start with "the tool said 20mm, do you have it?", which is a much shorter conversation for both sides. And the page gives us something specific to link to when we answer the same question on forums, instead of a generic category page.

If you run a niche store

Look at the questions your support team answers more than once a week. If the answer is "it depends on X and Y," that's probably a tool, not an article. Build it as its own server-rendered page, keep the logic in a plain testable function, and let it link to products only after it has actually helped.

Curious if others have done this. Did your calculator pages pull their weight, or did they end up as nice-looking dead ends?

Top comments (0)