Shopify Out-of-Stock UX: How to Handle Unavailable Products Without Losing the Customer

An out-of-stock product page is a dead end by default — the shopper found what they want, cannot have it, and has no obvious reason to stay. For most Shopify stores, this results in a lost customer. With better UX, the same page becomes a retention opportunity: the shopper signals their intent, you collect their email, and you re-engage them when stock returns.

The Baymard Institute found that 13% of US online shoppers report that they have given up on an online purchase specifically because the item was out of stock and no alternative or notification option was offered. At even modest traffic volumes, this represents significant recoverable revenue.

What Does a Poor Out-of-Stock Experience Look Like?

The Problem: The most common Shopify out-of-stock patterns that damage conversion:

1. Showing out-of-stock variants without a clear message. The shopper selects a size and the page does nothing, or the Add to Cart button remains active but clicking it produces an error. Shoppers interpret this as a broken page and leave.

2. Removing out-of-stock products from the catalog. If a product is temporarily out of stock, removing it means losing all organic search visibility for that product URL. When it comes back in stock, you have to rebuild any rankings from scratch.

3. Showing out-of-stock products in collection pages without labeling. A shopper who clicks through from a collection, spends time reading the product description, and only then discovers it is out of stock feels that their time has been wasted. This is a known usability failure identified in Nielsen Norman Group research on ecommerce.

4. No alternative action offered. An out-of-stock message with nothing else on the page gives the shopper nowhere to go. They leave.

The Fix: Design every out-of-stock state as a path to an alternative action, not a dead end.

What Should an Out-of-Stock Shopify Product Page Include?

1. Clear, immediate labeling. Out-of-stock variants should be visually distinguished (greyed out, crossed out, or labeled "Out of stock" directly on the swatch or dropdown option) before the shopper selects them. Do not make them discover unavailability after selection.

2. A "Notify me when available" form. A single email field with a submit button is the most valuable element on an out-of-stock page. This converts a lost purchase into a lead. Apps including Back in Stock (by Swym), Klaviyo's back-in-stock functionality, and Notify Me implement this in Shopify with automated email when stock is restored.

3. An estimated restock date if known. "Expected back in stock: late June" gives the shopper a reason to return directly and reduces the load on your notification list. If you do not know the restock date, do not guess — just offer the notification.

4. Alternative product recommendations. If you have similar products that are in stock, display them below the out-of-stock message: "You might also like" or "Available now: similar styles." This keeps the shopper in the purchasing mindset with something they can actually buy.

5. An out-of-stock label on collection pages. Avoid showing out-of-stock products in collections without labeling them. Use a small "Sold Out" badge on the product card. Shoppers who are specifically looking for available items will skip the unavailable ones, and those who want to be notified can still click through.

Should You Hide Out-of-Stock Products From Collections?

The answer depends on your restock timeline:

Scenario	Recommendation
Will restock within 4 weeks	Keep visible with "Sold Out" badge, offer notification
Will restock within 3 months	Keep visible if SEO valuable, add "Sold Out" badge and notification
Permanently discontinued	Hide from collections, add redirect or "discontinued" message on product page, keep the URL live if it has search traffic
Seasonal product	Keep URL live during off-season with "Available seasonally" message

Hiding out-of-stock products to keep the collection feeling fresh is a common practice, but it sacrifices both SEO value and the notification opportunity.

How Does Back-in-Stock Email Perform?

Back-in-stock notifications have among the highest conversion rates of any automated email. Klaviyo data shows that back-in-stock emails convert at 14 to 22% for stores that have built effective waitlists, because the shopper has already signaled high purchase intent and the product was already the specific one they wanted.

This is why the "Notify me when available" form is the highest-value element on an out-of-stock page: each submission is a high-intent lead with a measurable conversion value.

Start Here

1. Add a "Notify me when available" form to your out-of-stock product pages. Use Back in Stock by Swym (free tier available) or Klaviyo's native back-in-stock feature. Each email collected is a recoverable sale.
2. Add "Sold Out" badges to out-of-stock product cards in collection pages. This sets expectations before the shopper clicks through, reducing frustration.
3. Add alternative product recommendations to your out-of-stock product pages. If you have in-stock alternatives, show them. A shopper who cannot have their first choice but sees a compelling alternative may convert immediately.