3D product configurator (Retrodajnia)
Retrodajnia hand-builds tiered plant stands in dozens of color and finish combinations β and the customer had to imagine the result from a description. We built them a bespoke configurator in which the customer assembles the product themselves and instantly sees a realistic preview: they choose the color separately for each shelf, pick the rim and the leg finish, and the tool repaints the photo of the plant stand live. This is not a ready-made marketplace plugin β it is a tool written from scratch for this specific product. You can open it and click through with the button above.
How it works β step by step
Enter the configurator
The customer opens the tool on the store page β no login, it just works.
Choose the model
They pick a plant-stand model. The price is fixed regardless of configuration β no surprises.
Color of each tier
They pick a color separately for each of the four shelves β 11 laminated board colors.
Rim and legs
They choose the rim color and the leg finish β the whole thing swaps the base photo of the plant stand.
Live preview
A canvas engine repaints the product in real time β with no reloads.
Real color in photos
For each shelf the customer can view the true shade in photos of finished pieces β honestly.
Add to cart
The finished configuration goes into the order β the store knows exactly what the customer built.
What you get
They buy what they see
A realistic preview reduces uncertainty and the risk of disappointment after the purchase.
Hundreds of combinations
11 colors across 4 tiers plus rim and legs β every customer builds their own variant.
Preview with no reloads
The canvas renders instantly, not from ready-made images β which is why every combination looks realistic.
Honesty toward the customer
A clear note that the preview is indicative, plus real photos of the color β it builds trust.
Tailored to the product
A tool built from scratch for this specific range of handmade goods, not a marketplace off-the-shelf.
Lightweight and standalone
A single self-contained file, without heavy plugins β it runs fast and everywhere.
Details
Why the customer needs a configurator
For a product with dozens of color variants, a description and a few photos are not enough β the customer does not know how their combination will turn out. The configurator lets them build the plant stand their way and see the result immediately. That reduces pre-purchase uncertainty, sets the handmade brand apart and genuinely helps the customer decide to order.
How the preview is created
The preview is not a collection of ready-made images for every combination β there would be hundreds of them. Instead a canvas engine takes the base photo of the plant stand and repaints each shelf pixel by pixel, applying the chosen color over a shadow map. As a result each of the hundreds of combinations looks natural, preserving light, shadow and texture.
Honesty and real color
Colors on screen always differ from the real boards, so the tool does not hide it: under the preview there is a clear note that the visualization is indicative, and for each shelf a "Real color in photos" button shows the true shade in photos of finished pieces. The customer orders with full awareness.
For the curious β how it works under the hood. The configurator is a single self-contained HTML file with an engine rendering on a 2D canvas, no backend, no framework and no build step. Repainting the shelves is a pixel operation: per-tier alpha masks + a shadow map applied over the base photos.
Canvas rendering engine
For each tier we keep a sparse alpha mask (arrays of pixel indices and opacity values) and a shared shadow map as Float32. For each shelf the render is: out = baseΒ·(1βa) + colorΒ·shadowΒ·a, computed only on the mask pixels, and the result goes through putImageData onto a buffer, scaled to the view accounting for DPR. Hence the smooth, realistic real-time repaint.
Variants as photo composites
The rim and leg finish are not a color applied programmatically, but a choice of base-photo set β we have 12 sets (4 rims Γ 3 leg finishes), each with a base photo and four shelf masks. Choosing the rim/legs switches the set, and the shelf colors are layered on the canvas. All images are in base64 right inside the file, so the tool works offline too.
Self-sufficiency and performance
The whole thing is one file: 69 images embedded as data URIs, a loading progress bar with asset decoding, lazy preview scaling and zero external dependencies (aside from Google Fonts). No backend means the tool is easy to embed and fast. In the portfolio we serve it as a copy marked noindex.