Variants and inventory without a messy product page

Product variant UX should show the choice that changes the object, and keep every other combination off the page. If a size is gone, say so on the control. Leave the shopper where they are. An error page is the wrong answer to a stock question.

A product page has one object and a small set of real differences: the color, the size, the length, the material you actually sell. The moment those differences become a spreadsheet, the page stops explaining the product and starts explaining your database.

The choice that changes the object

List the attributes a person can see or wear. For a shirt, that is often color and size. For a watch, it might be the band. For a print, it might be the paper size. Each attribute gets one control, placed near the price, with a label in words.

Select a sensible default. The default should be a combination you can sell, shown in the photograph above it. If the default is sold out, do not pretend. Pick the first available combination, and make the selected state obvious.

Update the things that depend on the choice in the same moment: the photo, the price, the stock line, and the button. A page that changes the picture and leaves yesterday’s price is how a variant UI corrupts a sale. The shopper should never have to wonder which state the button will buy.

Name the control for what it is. “Color” and “Size” beat “Option 1” and “Option 2.” If the choice is not obvious from a swatch, add the word. A swatch alone fails when two colors are close, and it fails for anyone who does not see the hue. The W3C’s Web Content Accessibility Guidelines are the reference for this: controls should have names, and information should not rely on color alone. A selected swatch needs a visible ring or a written “selected,” and the accessible name should include the color word.

Hide the matrix

A matrix lists every combination, usually as a table: each size against each color, with stock counts in the cells. It is useful in an admin. It is a mess on a product page. Shoppers do not buy a table. They buy one object in one configuration.

Show one choice at a time. After they pick a color, the sizes can reflect what that color still has. Or show size and color together if both are short lists, and disable pairs that do not exist. Disabling a pair is different from printing every pair as its own row. The page stays a page.

Do not create a variant for differences that do not change the object. “Gift wrap” is a service, not a second product, unless the wrap changes what you warehouse. “Engraving” can be a field under the choices, not a fake size. Extra variants multiply the matrix and the photography. Each one needs a state: in stock, out, pictured, priced.

If the catalog has products that are only cousins, give them their own pages. A wool coat and a cotton coat are often two products that share a template, not six variants of a generic coat. Variants are for a choice inside one product. When the description, the care, and the price structure diverge, a new page is the clearer design. The product page that explains the thing, then steps aside, depends on this boundary.

Unavailable is a state, not an error

Stock is a message on the control.

• In stock: the choice looks available, and the button can submit.
• Low, if you truly want to say so: a short line, “Only a few left,” used with a rule so it does not appear on everything.
• Unavailable: the choice remains visible, marked sold out or unavailable, and it cannot be submitted.
• Not made: hide it. A size you have never cut should not appear as a failure.

Leaving the unavailable size visible matters. People look for their size. If it vanishes, they assume the page is broken, or they assume you do not make it. A struck-through size with the words “Sold out” answers the question. A redirect to an error, a 404, or an empty category does not.

Say what they can do next, in one line under the control. If you accept a waitlist, the line is the waitlist, tied to that size and color, not to the whole product. If you do not, the line can name the nearest in-stock size when it is honestly wearable as the same piece. Do not push a different color as if it were the same choice they made.

The button follows the state. “Add to bag” when the selection is buyable. “Sold out” when it is not, as text on the button or directly beside it, not as an alert that looks like a crash. Keep them on the URL of the product. Updating the address to reflect the chosen variant is fine when the URL is shareable and still resolves. Sending them to a generic error URL is not.

Inventory language

Write stock in the brand’s voice, and keep the vocabulary small. Pick one phrase for unavailable and use it on the grid and the product page. “Sold out,” “Unavailable,” and “Gone” are three systems. One of them is enough.

Avoid fake precision. “14 left” is right only if the number is true and you are willing to maintain it. A number that lies is worse than silence. “Ships in two days” belongs here only when operations can keep it. The confirmation page will have to repeat whatever you promise.

Back-in-stock notes should be dated or omitted. “Coming back soon” with no owner becomes litter. If a founder will not write the date, do not show the sentence.

On the grid, repeat only the fact that changes scanning. A tile can say “Sold out” or show the colors that remain. It should not preview the full size chart. The grid’s crop and background stay consistent. A sold-out state is a label, not a different photograph with a sad filter.

One page, one object

Structure the page so the variant work does not bury the product.

The photograph, the name, and the price come first. The controls sit with the price. A short description follows, then materials, fit, and care. The size guide is a disclosure or a nearby link if the chart is long. It is not a second page they must visit before the control makes sense. If sizing needs a sentence, put that sentence under the size control: “This style runs small. The chart uses body measurements.”

Images follow the selected color, at the same crop as the rest of the shop. Do not swap in a lifestyle frame for one color and a packshot for another. That is the mixed-crop problem hiding inside a single product.

Keyboard and screen-reader order should match the visual order. A shopper tabbing through should hit color, then size, then the button, and hear the current selection. Focus should be visible. These are ordinary quality bars from the same accessibility reference, and they are cheaper to build with the control than to patch after launch.

Hanabi designs this as part of the product interface: a few states, named in the component, rather than a plugin that prints every combination. The page stays something a stranger can read.

The page around those controls still has a job, which is to explain the object and then get out of the way. That piece is product pages that explain the thing, then step aside.

When you want the product page and its variants designed as one interface, see Hanabi’s services. The studio builds the shop so the choice that matters is the choice on the screen.