Project 72, E-commerce and business

Product Variant Picker

Every clothing shop needs this. Pick a colour and the hoodie changes, pick a size and you see the real stock, and the link always points to your choice.

Main API: URLSearchParams
Image: Inline SVG
Dependencies: None
Your browser: Checking

Choose your hoodie

Pick a colour and a size. Sold out sizes are crossed out, and the address bar updates so you can share the exact variant.

Everyday Hoodie

Heavy organic cotton, brushed inside

Colour:

Size: choose one

How it works

Stock per variantStock is kept per colour and per size. Changing colour redraws the sizes and disables any that are sold out.
One picture, many coloursThe hoodie is an inline SVG, so changing colour just updates one fill. With photos, swap the image source instead.
Shareable URLURLSearchParams writes the colour and size into the address bar with replaceState, and reads them back when the page opens.

const params = new URLSearchParams(location.search);
let color = params.get("color") || "plum", size = params.get("size") || "";

function update() {
  sizes.forEach((s, i) => inputs[i].disabled = stock[color][i] === 0);
  hoodie.setAttribute("fill", colors[color]);
  history.replaceState(null, "", "?" + new URLSearchParams({ color, size }));
}