Empty Cart State UI With Recommended Products

An empty cart screen is one of the most-viewed and most-wasted screens in any shopping app. The short answer: treat it as a soft restart, not an apology. Build an empty cart state from a free VP0 design with a warm one-line message, a clear button back into the catalog, and a few genuinely relevant suggestions, recently viewed, saved for later, or popular items. Done well, a dead-end screen becomes the start of the next purchase.

Why the empty cart deserves design

Most teams style the populated cart and leave the empty one as default text, even though shoppers hit it constantly: after removing items, after an order, or on a fresh session. A blank “Your cart is empty” with no way forward feels broken and ends the visit. A designed empty state does three things: it reassures (nothing went wrong), it orients (here is how to get back to shopping), and it helps (here is something you might actually want). That last part is where revenue hides. Apple’s Human Interface Guidelines call for empty states that explain and guide rather than just sit there.

Build it from a free design

VP0 is a free iOS design library for AI builders. Pick an empty-state or product-grid design, copy its link, and have Cursor or Claude Code rebuild it in SwiftUI or React Native. You get the illustration, message, button, and a recommendation rail fast. The substance is the recommendations: pull from recently viewed and saved items first, since those are real intent, then popular or seasonal products. Recommendations are not filler: McKinsey has estimated that around 35% of what people buy on Amazon comes from product recommendations, so relevance here drives real revenue. Given that cart abandonment averages around 70% per the Baymard Institute, a helpful empty cart and saved-cart persistence can recover some of that intent rather than losing it. For the screen right after this one, see eCommerce checkout screen UI mobile.

What to show in an empty cart

Order matters: lead with the user’s own intent, then broaden.

Slot	What to show	Why it works
Message	Friendly, brief reassurance	Confirms nothing broke
Primary action	Back to shopping or browse	Clear next step
Recently viewed	Items they already considered	Highest intent
Saved for later	Their own wishlist	Easy to resume
Popular picks	Best sellers, seasonal	Useful fallback

Common mistakes

The first mistake is a blank screen that looks like an error. The second is no primary action, leaving people stranded. The third is irrelevant recommendations: random products read as filler and lower trust. The fourth is losing the cart entirely, so a returning user who had items finds nothing; persist the cart server-side. The fifth is over-designing the empty state into a pushy upsell with banners and timers, which undermines the calm, helpful tone the moment calls for.

A worked example

Imagine a shopper removes the last item from their cart. Instead of blank text, your VP0-built empty state shows a small illustration, a line like “Your cart is empty, but you were eyeing these,” a “Continue shopping” button, and a rail of their recently viewed items followed by two best sellers. If they leave and come back tomorrow, their saved items are still there. Nothing feels broken, and there is always a next step. For turning another low moment into momentum, the post-purchase or low-balance flow, see gift card redemption screen UI, and for the scanning entry point many shoppers use, see barcode scanner viewfinder UI mobile.

Key takeaways

• An empty cart state is a soft restart, not a dead end; design it on purpose.
• Build it from a free VP0 design with a warm message, a clear action, and a recommendation rail.
• Lead recommendations with the user’s own intent (recently viewed, saved), then broaden.
• Persist the cart server-side so returning shoppers do not lose their items.
• Keep the tone calm and helpful, not a pushy upsell.

Frequently asked questions

What should an empty cart state show? A friendly brief message, a clear button back to shopping, and a few relevant recommendations led by recently viewed and saved items, then popular picks.

How do I make an empty cart drive sales without being pushy? Recommend things the user already showed intent for, keep the layout calm with one clear action, and avoid banners, timers, or aggressive upsell copy.

Should the cart persist when it is empty? Persist saved and previously added items server-side so a returning shopper can resume, even if the active cart is currently empty.

How do I build an empty cart screen quickly? Start from a free VP0 empty-state design, rebuild it with Cursor or Claude Code in SwiftUI or React Native, and wire the recommendation rail to recently viewed and saved items.