Work B2B product catalogue
A 212-product catalogue with an enquiry list
The product side of the marine supplier concept: 212 products in 15 ranges, searchable, with a list buyers fill as they browse and a four-step propeller enquiry.
Concept project Part of the same October 2026 proposal as the marine company website. It is not live on the company’s own website yet, and the company is not named here.
The catalogue’s ranges
Propulsion and steering
- Propulsion20
- Stern gear29
- Hydraulic steering7
- Steering systems14
Engine room
- Engine and generator room16
- Electrical9
- Pumps, plumbing and sanitary14
- Watermakers8
On deck and aboard
- Marine air-conditioning5
- Dashboard and controls28
- Deck and hull18
- Lighting9
- Accessories20
- Galley7
- Safety8
212 products in 15 ranges
- Type
- B2B product catalogue
- Status
- Concept, not launched
- Role
- Data clean-up, design and build
- Built with
- HTML, CSS and JavaScript, no framework
From a pile of entries to a range buyers can use
- 263product entries on the existing site, unreachable from its menu
- Duplicates merged; one product had appeared four times
- Placeholder names replaced
- Drawings separated from products
- Products moved into the right ranges
- 212products
- 15ranges
- 3Propulsion and steering, Engine room, On deck and aboard
Try the search
A working copy of the catalogue’s search, using its real product and range names. Add a few products to see the enquiry list fill the way it does in the build.
0 products in your enquiry list
Hover the screen to scroll through the real range page.
The propeller enquiry, in four steps
Vessel and engine
Type, hull, length, engines. Every field optional.
Current propeller
Diameter and pitch, in inches or millimetres.
Items to quote
Propeller, shaft, stern tube, nozzles, brackets, class survey.
Your details
The only required step.
What was built
| Item | Part | What it does |
|---|---|---|
| 01 | Search across the whole range | Typing filters all 212 products at once. |
| 02 | Ranges grouped by where they sit on a vessel | Propulsion and steering, engine room, on deck and aboard. |
| 03 | Product detail panel | Opens beside the list, so the buyer keeps their place. |
| 04 | Enquiry list | Stored in the visitor’s browser, counted on the header button and carried into the quote request. |
| 05 | Four-step propeller enquiry | Vessel and engine, current propeller, items to quote, contact details. Only the contact details are required. |
| 06 | Unit switches | Feet or metres, inches or millimetres, chosen per field. |
Screens
Company name, logo and phone numbers have been replaced in these screenshots. Product photos and names belong to the company and its suppliers.
Quality verification
- Method
- Checked in an automated Chromium browser.
- Date
- 13 October 2026
Checked and passed
- The catalogue data holds 212 products in 15 ranges, matching what the pages state
- Searching “cutlass” narrows the list to the matching bearing
- Adding two products sets the header count to 2, and both appear in the quote request on the contact page
- Catalogue and enquiry pages fit the screen at 360, 390, 768 and 1440 pixels wide, with no script errors
Not yet covered
- The enquiry list lives in one browser. It does not follow a buyer to another device
- Enquiries open the visitor’s email app. A live catalogue would send them to a sales inbox or CRM
- Not yet tested on physical phones, in Safari and Firefox, or with a screen reader
Why it matters to a business
Most industrial suppliers in the UAE sell by quotation. A catalogue for that kind of business does not need a checkout. It needs to help a buyer find the right part and tell you exactly what they want priced.
A clean catalogue is also an asset inside the company: one agreed list of what you sell, which sales, stores and the website can all work from.
Live demo
The working build carries the company’s name and product photos, so it is shown privately. Ask for a walkthrough.
Ask for a walkthroughTell me what your business needs built. A few lines are enough to start, and I reply with questions, not a sales pitch.