A buyer finds the right jacket, chooses a color, then discovers that their size cannot be ordered. The product page still has work to do. It needs to explain what is unavailable, whether that situation is expected to change, and which alternatives preserve the buyer’s original choice.
A gray button labeled “Sold out” answers only the first part, and sometimes does not even answer that accurately. Is every version sold out? Is the selected size gone? Can a nearby store supply it? Does the seller expect another shipment?
Start with the selected variant. Build the next action around what the business actually knows about that variant, including the possibility that it does not know when stock will return.
Separate the product from the selected option
A product can be available while the version a shopper wants is unavailable. Keep both facts visible. The title might describe an entire jacket range; the purchase area must describe the specific color and size currently selected.
Consider this fictional example: the Field jacket comes in moss and ink. Moss is available in small and large, while medium is temporarily unavailable. Ink is available in medium. A general “In stock” message above the options is misleading for someone choosing moss medium. A general “Out of stock” label hides the possibility of buying ink medium.
The useful message is closer to: “Moss / Medium is unavailable. Medium is available in Ink.” Let the buyer choose the alternative deliberately. Silently switching the color may produce an order, but it also changes what the buyer believes they are purchasing.
In its product-page research, Baymard describes shoppers discovering unavailable sizes only after interacting with a selector. That supports making availability visible where choices happen. It does not establish that one particular selector layout will improve every store’s conversion rate.
Match the action to the stock state
The following is an editorial decision matrix, using hypothetical states rather than promises about a real retailer.
| What is known about the selected variant | Purchase-area explanation | Useful next action |
|---|---|---|
| Available for the selected delivery method | Name the variant and current fulfillment expectation | Add that variant to cart |
| Temporarily unavailable, with a supported restock estimate | State that it cannot ship now and identify the estimate as an estimate | Notify me, or a genuine pre-order option |
| Temporarily unavailable, with no reliable estimate | Say the restock date is unknown | Notify me or compare a relevant alternative |
| Permanently discontinued | Say this version will not return | See a replacement, with differences explained |
| Availability has not loaded or cannot be confirmed | Explain that availability could not be checked | Retry or use a supported assistance route |
The last row matters. A failed inventory lookup is a technical uncertainty. Presenting it as “Sold out” turns a system problem into a product fact. Conversely, leaving an enabled purchase button beside stale availability can invite an order that cannot be fulfilled as shown.
Have the merchandising and fulfillment teams agree on these states before choosing the words. Otherwise, a designer may write “Coming soon” for an item whose replenishment has never been confirmed.
Keep notification and ordering separate
“Notify me” should mean the shopper has requested an update. It should not suggest that an item has been reserved, a place in a queue is guaranteed, or a purchase has been made unless those things are genuinely part of the service.
For the fictional moss jacket, a confirmation could read: “We’ll email you if Moss / Medium becomes available. This does not reserve a jacket.” The product, size and destination address should be easy to check before the request is completed.
Pre-orders require a different decision. A customer may be committing money or authorizing a later payment. Do not disguise that commitment as a restock alert. The page needs the actual payment and fulfillment terms beside the action. Baymard’s out-of-stock guidance favors accepting orders with a later delivery date when replenishment is expected, and treats alerts as a supplement. Whether that is possible depends on the merchant’s actual supply and fulfillment commitments.
If a notification service does not exist, do not add an inert form because the design looks more complete. A useful alternative product or a clear explanation is better than collecting an email address without an operational follow-through.
Make alternatives answer the same need
An alternative should preserve the constraint that brought the buyer to the page. For the jacket example, that might be size, weather protection, color or price. A carousel of unrelated bestsellers forces the buyer to start again.
Describe the relevant difference in ordinary language: “Same jacket, available in ink” is more useful than “You may also like.” For a replacement model, explain any meaningful change in fit, materials or included components, using supported product information.
Avoid implying equivalence merely because two products share a category. A different connector, fit or capacity can make an accessory unsuitable. When compatibility is unresolved, make that uncertainty visible and offer a way to check it before purchase.
Give the alternative a clear route back to the original item. A shopper comparing colors should not lose the size they selected, the product they were considering or their place on the page.
Carry the selected variant through the journey
The unavailable state should remain consistent between the product page, cart and any restock request. If stock changes while the shopper is deciding, explain the change at the point it affects the order.
In an illustrative cart recovery, the message might say: “Moss / Medium is no longer available. Your other items are still in the cart.” Keep those other items intact. Offer removal or an explicitly chosen replacement; do not substitute an available size automatically.
Dynamic availability changes also need an accessible implementation. W3C’s guidance on status messages explains how certain updates can be communicated to assistive technology without moving focus. A developer should choose the appropriate mechanism for the actual interaction, rather than assuming that a visually updated label reaches every shopper.
Inspect the awkward cases before release
Walk through the page with a short set of deliberate scenarios: an unavailable default variant, a switch from available to unavailable, a switch back, a failed stock lookup, and inventory changing after an item enters the cart. Check the experience on a small screen and with keyboard navigation.
For each scenario, ask someone unfamiliar with the design to identify the selected product, whether they can buy it now, and what the available action will do. If they describe a reservation when the form only requests an email, the copy has left a material misunderstanding unresolved.
Measure these states separately after release. Restock registrations, alternative purchases and successful orders are different outcomes. A rise in alert requests does not show that lost sales were recovered. Likewise, a lower add-to-cart rate may reflect clearer availability information rather than a worse shopping experience.
Use the broader product-page question review to check the rest of the offer. For an unavailable item, the immediate standard is simpler: the buyer should leave the purchase area knowing exactly what cannot be supplied and what useful choice remains.