Product variants: make the exact choice clear

Repeat the selected value in words

Under Armour shows Selected: Medium while MD is highlighted among size chips and Black / White names the color. Hollister pairs a named size with color swatches and a Size Guide. The text summary gives people something more durable than a colored outline to confirm, especially when abbreviated sizes differ from everyday language.

Bind image, price, stock and purchase payload to the same effective variant identity. When one option changes, recalculate valid combinations before enabling Add to bag. If a previous size no longer exists in the new color, explain what changed instead of silently choosing the first available size. Preserve still-valid selections so people do not have to start over.

Make each option a real accessible choice with its name, availability and selected state. A swatch needs a color name; a small crossed-out circle should not be the sole sold-out signal. Keep the size chart reachable without clearing the pending selection. When the customer returns from that chart, restore the same product position and current variant summary.

Let unavailable sizes explain the next action

HBX marks sizes Sold Out directly in the size menu. Lyst uses Alert me beside unavailable sizes and marks a remembered My Size separately. That distinction matters: a preference can still be relevant when a product is not purchasable. Do not collapse the customer’s size preference and current stock into one selected checkmark.

Define the difference between a combination the catalog never offers and a real variant that is temporarily out of stock. A restock action makes sense only when your service supports it for that variant. Keep unavailable options legible enough to explain the missing choice, but do not let them appear ready to buy. Disabled controls still need discoverable reasons.

Check stock again when adding to bag and when confirming the order. If availability changed, retain the customer’s choice and show the new state rather than submitting a nearby substitute. A retry should not create a second line item after the first request succeeded late. Include product identity in recovery copy so a person returning from a wishlist knows which item failed.

Size labels need a system and a product context

Zalando offers UK and Manufacturer sizes in its selector. FARFETCH explicitly says that unisex pieces are displayed in men’s sizes. These details explain the meaning of a number before the customer uses it. A familiar size label can still refer to a different chart, gender convention or manufacturer.

Do not implement regional switching as a cosmetic text replacement over an unrelated size index. Keep the underlying variant identity and the displayed conversion tied to product data. If an exact equivalent is unavailable, avoid presenting a rounded conversion as a guarantee of fit. A size guide can explain measurements while the selector remains responsible for the actual purchasable option.

Retain the chosen display system when returning from help, but do not silently transfer a size to another product with a different chart. Make long labels wrap without hiding availability or extra charges. For assistive technology, announce the system along with the selected value, rather than reading an isolated 4 that has lost its context.

Stock and delivery messages belong to the chosen size

Moda Operandi’s sheet pairs EU and US values with individual Notify Me and low-stock messages. Another Zalando state includes Long-distance item £3.99 on a size row. The consequences of selection can therefore extend beyond whether the chip is enabled. A customer may be choosing a different fulfillment route as well as a different garment size.

If a variant changes price, delivery charge or delivery timing, update those values together and expose the change near the selected option. Do not leave an old headline price above a newly selected expensive variant without explanation. A low-stock message should reflect supported inventory data, not a permanent decoration designed to create urgency.

Separate Save size from Add to bag when both exist. One updates a preference; the other requests an item. The same applies to Notify me, which should clearly explain whether it saves a wishlist item, subscribes to a restock alert or both. Do not collect an email address under a vague Continue button that looks like a purchase step.

Wishlist entry still needs the full variant contract

adidas shows a size-selection sheet over a wishlist with the message that this size is not currently available. Lyst’s One Size sheet demonstrates the opposite extreme: there may be only one candidate. Neither situation eliminates the need to communicate what action will happen next.

A saved product may not include a saved variant. If a wishlist item lacks a size, ask for it before moving the item to the bag. If it includes one, revalidate it and preserve the old value when unavailable. For a one-size product, avoid a redundant picker unless it provides a real stock, seller or configuration decision; a clear One Size summary may be enough.

Keep the surrounding saved-item experience consistent with the product page. Test changing color after size selection, a sold-out remembered size, a stale wishlist and a failed bag request. Measure wrong-variant corrections and unexpected price complaints alongside successful purchases. An increase in button taps alone cannot establish that customers bought the intended item.

A configuration test with a changing catalog

Prepare a test product with two colors and three sizes. Make one combination unavailable, one available at a different price and one absent from the catalog entirely. Ask a shopper to choose a size first and then switch colors. The interface should retain a valid choice or explain why it was cleared, while the image, price and purchase action all resolve to the same variant.

Open the size guide before adding the item. On return, confirm that the current system, size and color remain visible. Switch between regional and manufacturer sizing and verify the selected variant identity, not merely the text label. A conversion that looks familiar can still point to a different item if the implementation uses row positions instead of stable records.

In a controlled inventory fixture, sell out the selected size just before Add to bag. The app should report the change without replacing it with another size. Preserve enough context to choose an alternative. Repeat a request after a delayed response and inspect the bag for duplicate quantities or two versions of what looked like one action.

Finally, move the product from a wishlist that remembered an old selection. Ask the shopper to state the exact size, color, price and availability before commitment. If they cannot, improve the summary before optimizing button prominence. The point of the test is correct configuration, not the fastest possible tap sequence.

Test configuration before payment

Use these checks on a working build, not only on the polished reference state.

• ✓Use one variant identity for displayed image, price, stock and bag submission.
• ✓Distinguish a remembered size, a recommendation and an explicit current selection.
• ✓Explain sold-out and non-existent combinations without silently substituting.
• ✓Preserve choices across size-guide visits and valid option changes.
• ✓Surface variant-specific delivery or price changes beside the decision.
• ✓Check duplicate requests, stale stock and returning from the wishlist.
• ✓Verify swatch labels, size-system names, large text and unavailable-state explanations.

Related design decisions

The filter and sort article addresses narrowing a catalog. Keep those multi-product constraints separate from configuring one product.

The order-tracking examples show why the same variant identity must remain recognizable after purchase.