A colour picker with shade-based pricing for a paint retailer

Paint is never one price. A pale tint and a deep, heavily-pigmented shade cost the store different amounts to produce — but a shopper just wants to pick a colour and see the right price. The retailer needed exactly that on the product page, for a catalogue of hundreds of colours, without a clunky variant dropdown and without a price script that quietly falls apart somewhere between the cart and the tax report.

The experience on the product page

The product page shows only the colour chart and White — no variant selector in sight. A Color Code control offers White or Colored; choosing Colored opens a colour-picker modal.

Inside the modal the customer works exactly the way they would with a physical fan deck:

• Filter the full range by Palette (the catalogue) and Tone (the shade family).
• Use NEAR to jump to the closest match.
• Browse a grid of swatches, each labelled with its exact colour code.
• Click a swatch to apply it — and the price updates to that colour’s shade tier.

Shade-based pricing, done natively

The pricing is the part most builds get wrong. It is tempting to reach for a price script, but scripts have a habit of being right on the product page and wrong everywhere that actually matters — discounts, taxes, and order reports.

So we did it with native Shopify variants. Every product carries four hidden tier variants, and picking a colour selects the matching one behind the scenes:

Tier	Shade	Price
1	White / base	Base price
2	Light	+10%
3	Medium	+20%
4	Dark	+40%

Because the price lives on a real variant, it is correct everywhere — product page, cart, checkout, discount codes, tax calculation, and the store’s order and finance reports. No scripts, no reconciliation surprises.

Built for fulfilment, and for the future

Two things made this genuinely usable day to day:

• Every order is fulfilment-ready. The exact colour name and code are captured as line-item properties, so they travel through the cart, the checkout, and onto the order the warehouse actually reads.
• The client stays in control. New colours are added and mapped to a tier from inside Shopify, with the correct surcharge applying automatically — no developer needed after launch. We classified the initial colour set and mapped each colour to its tier so the system started fully populated.

The result

A product page that feels effortless to the shopper — pick a colour, see a price — sitting on top of pricing and fulfilment logic that stays completely native to Shopify. A genuinely complex requirement, delivered as something the merchant can run and grow on their own.