Customer picks window, door and garage door colours

Three colour rows on the estimate the customer can change themselves right up until they approve, saved to the job rather than to one link.

What it is

Window, door and garage door colour pickers with swatches drawn from the shared palettes. Picks are optimistic in the UI and written to the canonical job record. Once the estimate is approved the colours are locked as contractual. A note on the page warns that a colour change may affect pricing.

Also called: colour selection · let the customer choose colors · trim colour picker · colour options on the quote

See it, piece by piece
01

The customer picks window, door and garage door colours themselves

Three rows on the quote open into swatch grids from your palettes, and the customer can change their mind right up until they approve. No phone call, no email thread, no trying to remember what they said the trim was. A note on the row tells them a colour change may affect pricing and to speak to their rep, and the picks lock as contractual once the estimate is approved.

Your Custom Building — colors
Your Custom Building
Dimensions
40' wide x 64' long x 16' tall
Roof Steel
Burnished Slate
Wall Steel
Light Stone
Trim
Brite White
Window Color
Whitechange
Door Color
Blackchange
Garage Door Color
Brownchange
Choose your garage door color
1 color is currently unavailable
You can change this any time before approving.
Changing the window, door, or garage door color may affect pricing. Reach out to your sales rep for current color pricing.
A colour row opened into the swatch grid, with the current pick ringed. The real screen, drawn from the product’s own design system. Sample data — no customer information appears here.
02

The choice survives a re-quote

Colour picks are written to the job, not to one estimate link. Re-quote the building and the customer's choice is still there and still visible on your side. When it was stored on a single revision's snapshot, exactly one customer view could see the pick and every admin view opened after the re-quote could not — which is how a trim colour gets lost between quote and order.

03

A colour you override comes with a written reason

If you swap a colour or mark one unavailable, the customer gets a pinned banner at the top of the quote, a warning marker on the affected row, and your typed explanation — instead of finding out at delivery. Unavailable colours are struck through in the picker and cannot be chosen, and a selection that has since become unavailable is flagged as needing a new pick rather than left sitting there.

04

Roof, wall, trim and wainscot colours are named on the document

The finishes chosen in the 3D builder show read-only above the hardware rows, each with a swatch and the colour name. They display rather than pick because they are design decisions already made and priced. Without them the customer sees three white hardware swatches and nothing about the Burnished Slate roof the model beside it is rendering.

Your Custom Building

Your Custom Building

Dimensions
40' wide x 60' long x 14' tall
Square Footage
2,400 sq ft
Roofing System
48" on center pre-engineered trusses with a 4/12 pitched roof.
Support Structure
8' on-center laminated columns
Siding
29 ga wall steel
Roofing
29 ga roof steel.
Overhangs
12" boxed overhangs
Openings
(2) 12' x 14' overhead doors, (1) 3' x 6'8" walk door, (3) 3' x 4' windows
Concrete slab
4" concrete pad with 24" rebar spacing
Attached buildings/porches
12' x 40' lean-to porch, open
Roof Steel
Burnished Slate
Wall Steel
Light Stone
Trim
Brite White
Window Color
Whitechange
Door Color
Brite Whitechange
Garage Door Color
Almondchange
Changing the window, door, or garage door color may affect pricing. Reach out to your sales rep for current color pricing.
Delivery Address
5719 Pine Grove Rd, Columbia, MO 65201
Roof Steel, Wall Steel and Trim, above the rows the customer can change. The real screen, drawn from the product’s own design system. Sample data — no customer information appears here.
How it works
  1. 1A pick updates local state instantly, then POSTs /api/client-portal/update-color
  2. 2The server validates the field is client-editable and the value exists in the palette
  3. 3It resolves link to (org, job) and writes to job_meta, not to the estimate snapshot
  4. 4A rejected or failed write rolls the swatch back and surfaces the reason
  5. 5Writes are refused with a clear message once the link is approved
Why we built it

A customer's colour picks were reachable from exactly one link and invisible to the builder. Every re-quote created a fresh link with a blank slate and the office view only ever read the newest one, so a pick made before a revision vanished and the builder ordered the wrong colour. A background refresh also overwrote the customer's choice seven to twelve seconds after they made it — the click-then-snap-back symptom — and failed saves were swallowed silently, leaving the colour on the customer's screen and nothing on the server.

The problem
  • Colour picks scoped to a single estimate revision and lost on re-quote
  • Optimistic UI reverting because of a background poll
  • Silent write failures that split what the customer saw from what the builder had
  • Colour changes after the estimate is contractual
Sound familiar?
What you get
The customer configures their own finishes without a phone call
The pick survives every re-quote because it lives on the job
A failed save says so instead of pretending
What's inside

See it on your own jobs

Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.

or keep browsing features →