Elma Ultrasonics NZ: a custom store built around choosing the right equipment

For Elma New Zealand, supplied locally by Techspan, I built the customer shop and the administration system together. Customers can research and buy equipment, while the team can maintain the catalogue and follow a sale through in the same system.

Someone who knows an Elmasonic model number can search directly. Someone who only knows what they need to clean needs a different route.

The store lets customers browse by application or series, filter by tank capacity and compare specifications. The homepage's tank-size control brings nearby models into view as the visitor adjusts the volume. Find my cleaner asks about the work before suggesting options.

Product pages bring the practical details together: photographs, specifications, availability and the buying or quote action, with manuals and compatible accessories where they apply. A customer can read the detail before buying or asking the team for advice.

The homepage's Elmasonic P 120 H is a live 3D scene. Visitors can rotate it, try the simulated controls and use See inside to reveal an illustrative cutaway of the tank and the equipment beneath it.

The product photography was a visual reference for the build. The current implementation constructs the cleaner's geometry in code using Three.js, with proportions based on Elma's published dimensions. The front-panel artwork is drawn on a canvas, with the positions of the display, buttons and controls measured from a product photograph. Materials and lighting give the steel housing, blue panel and tank their appearance in the browser.

The simulated controls change the settings shown on the display. The cutaway lets a visitor look past the casing and see an illustration of the equipment beneath the tank. The internals are an educational illustration, rather than a manufacturer's engineering model.

A photographic rotation sequence provides an alternative when the live 3D scene is unavailable.

The making-of article explains the photographic references, code-built model and interactive cavitation explainer in more detail.

A photograph can show the machine's shape. It cannot show sound moving through liquid or a cavitation bubble collapsing against a surface.

The homepage introduces that process in its How it works section and links to a separate interactive cavitation explainer. The explainer follows the process through the transducers, pressure patterns in the tank and the growth and collapse of a bubble. Visitors can change settings and inspect the visual explanation instead of relying on a paragraph of technical terminology.

The explainer includes browser-based acoustic and bubble models, alongside published reference information. Its notes distinguish estimates and illustrative settings from measured facts. It is designed to explain the mechanism, with the limitations visible beside it, rather than certify the performance of a particular cleaning job.

The homepage model introduces a specific machine. People who want to go further can open the cavitation explainer, work through the process and return to the product range.

A straightforward purchase can go through the cart and card checkout. A buyer who needs advice or a formal offer can request a quote instead. The custom platform supports a quote being reviewed and accepted before it continues into the order workflow.

Behind the shop, catalogue and content tools sit alongside enquiries, quotes, customers and orders. That keeps the information needed to manage the range close to the work of following up a sale. The system also supports fulfilment progress, tracking information and order paperwork.

The product page and the order record need to make sense together. Once someone has chosen a machine or asked a question, the team needs to see what happens next. I discuss that connection in Custom e-commerce: the business behind the online shop.

The customer journey works across desktop and phone layouts. Search, filtering and the product buying action remain part of the small-screen experience, while guides, manuals and support information give people somewhere to return after their initial research.

The team can maintain product information and site content as the range changes. The migration also accounted for existing content and addresses, with page titles, product data, sitemaps and redirects supporting the new structure.

The finished NZ store brings the catalogue, interactive product presentation and day-to-day sales tools into one custom build. A customer can explore the equipment and choose how to buy; the team has the tools to maintain the information and carry the sale through.