Dero: a 3D bike rack configurator embedded without code

Dero is a bike parking manufacturer in Minneapolis, Minnesota, and a PlayCore company. It makes commercial and custom bike racks, public bike repair stations, bike shelters, bike lockers, site furnishings and streetscape products, and has supported its customers since 1995, from homeowners buying a single rack to architects planning a bike room for hundreds of riders. Its product pages carry what specifiers look for: brochures, submittal sheets, installation guides, CAD, Revit and SketchUp files and CSI specifications.

Seven of those pages now also have a 3D bike rack configurator, built in Simplio3D and headed simply 3D Viewer. It is deliberately basic. A visitor picks how the rack is mounted, adds a lean bar where the rack offers one, and tries its finishes, and the rack changes in 3D. There is no price, cart or form, and putting it on dero.com took a pasted embed snippet rather than code.

The solution: a 3D bike rack configurator on seven product pages

On dero.com every rack has its own product page, with a description, documents and downloads, and Dero’s own options to buy or get a quote. Seven of them, from the Hoop Rack, which Dero calls the bike parking standard, to the Bike Bike Rack, shaped like a bicycle, now have a section headed 3D Viewer further down the page.

Each 3D Viewer is a basic configurator. The rack turns and zooms on a light grey background, and the panel beside it holds no more than three choices: the mount, the lean bar and the finish. Nothing is priced, nothing is added to a cart and nothing is sent. Its one job is to show the rack, which is why there was so little to set up.

Mount, lean bar and finish, shown on the rack in 3D

The three choices are the ones that change how a rack looks once it is installed:

• Mount. A dropdown with Surface and In-Ground. Surface shows the rack on the base plates it is bolted down with; In-Ground swaps them for longer legs that go into the ground.
• Lean bar. A switch on the Hoop Rack, Hoop Rack Heavy Duty, Downtown Rack and Arc Rack. Switched on, a horizontal bar appears across the rack; the other three racks simply do not show the switch.
• Finish. 22 swatches, the same on every rack: Galvanized and Stainless, then Black, Flat Black, White, Light Gray, Red, Yellow, Bright Yellow, Orange, Blue, Sky Blue, Green, Light Green, Hunter Green, Sepia Brown, Bronze, Silver, Dark Purple, Wine Red, Beige and Iron Gray. The galvanised swatch shows the mottled texture of galvanised steel rather than a flat colour.

A small (i) button under the panel opens the Configuration Summary, which lists the choices in words: on the Swerve Rack, for example, Select Mount: Surface and Select Finish: Wine Red. A visitor can take that straight to the buy or quote options on the same page.

A preview beside Dero’s own buy and quote options

Dero’s product pages already sell. Each one has Dero’s own options to buy or get a quote: finish, mount and, where it applies, the lean bar, then a quantity, Add to cart and Add to quote, with larger quantities going through the quote list. The 3D Viewer sits on the same page and leaves all of that alone.

It has no price, no cart and no form of its own, and it sends nothing anywhere. A visitor looks at the rack in the mount and finish they have in mind, then makes the same choices in Dero’s options. Keeping it that small is what made it quick to put live: there was no product to link, no price to keep in step and no form to route to anyone.

Embedded without writing code

Every Simplio3D configurator has a share link and an iframe snippet to copy. On each Dero product page that snippet sits under the 3D Viewer heading, at full width. There is no plugin, no script and no connection to the store, so putting a viewer live meant pasting one snippet into one page.

Because the page holds only that snippet, the 3D Viewer itself is looked after in Simplio3D. A new finish or an updated model is changed there and shows on dero.com the next time the page loads, without anyone editing the product page. More on viewers like this: the 3D product viewer.

What a project like this would add today

None of this section is part of Dero’s 3D Viewers described above, which run on the earlier version of Simplio3D. For a maker of bike racks or site furnishings starting now:

• The rack where it will stand. Augmented reality places the configured rack on the pavement or in a bike room through a phone, with no app: AR Quick Look on iOS, Scene Viewer on Android, and a QR code from a desktop browser.
• Details on the model. Hotspots add markers with information pop-ups, for example the tube size or how many bikes the rack parks, and Scenery switches the background and camera.
• The viewer and the order form in step. An embedded configurator announces each change as a browser event, simplio3d:option.changed, so a site that wants to can pre-select the same finish and mount in its own order form with a few lines of its own script.
• The rest of the range, faster. A first configurator for another rack can be generated from a written description, and bulk-add by category turns a finish range from the shared material library into a swatch set without authoring each swatch by hand.
• Checking every viewer. The AI assistant can audit option coverage and conditional logic, for instance that every finish has a material, and propose repairs. An AI client such as Claude, connected to the workspace over MCP with a scoped connection, can run the same checks, and changes to prices or SKUs only ever arrive as pending changes that a person applies.