AR Shoe Try-On UI: The Overlay That Builds Trust

AR try-on can be genuinely persuasive: seeing shoes on your own feet answers “will these look right?” in a way photos cannot. The short answer: build the overlay from a free VP0 design with a clear guidance state, a loading indicator, the live try-on with size and color controls, and a graceful fallback, then power it with ARKit and RealityKit. The payoff is real: Shopify has reported that product interactions with AR content showed up to 94% higher conversion, so the UI around the AR is worth getting right.

The UI is what makes AR work

The 3D magic fails without good interface scaffolding. Start with a guidance state that tells the user exactly what to do (“Point at your feet, in good light”), because an AR view with no instructions just looks broken. Show a clear loading state while the model downloads and tracking initializes. During the try-on, keep controls simple: switch size and color, capture a photo, and a prominent “Add to cart.” Crucially, plan for failure: poor light or a surface the system cannot track needs a friendly message and an obvious fallback to normal product photos. Apple’s Human Interface Guidelines and its augmented reality guidance stress clear onboarding and coaching for AR.

Build it from a free design

VP0 is a free iOS design library for AI builders. Pick a camera-overlay, scanning, or product design, copy its link, and have Cursor or Claude Code rebuild it in SwiftUI, then wire the AR with ARKit and RealityKit, using the system coaching overlay to guide tracking. Keep the AR as an enhancement, not a gate: the normal product page with photos, size, and price must still work for everyone, including those who decline camera access. Request camera permission in context with a clear reason, and design the denied state. For the related capture pattern, see barcode scanner viewfinder UI mobile, and for the fashion storefront it lives in, see fashion ecommerce app UI free.

AR try-on states

Design the whole sequence, especially the unhappy paths.

State	What the user sees	Note
Guidance	”Point at your feet, good light”	Coaching overlay
Loading	Model and tracking initializing	Clear progress
Try-on	Live overlay, size and color	Simple controls
Capture	Save or share a photo	Optional, easy
Fallback	Back to product photos	When tracking fails

Common mistakes

The first mistake is dropping users into an AR camera with no instructions, so they do not know what to point at. The second is no loading state, making the wait feel like a crash. The third is no fallback, leaving people with bad lighting stuck. The fourth is gating the product behind AR, so anyone who declines the camera cannot shop. The fifth is mishandling the camera permission, asking with no context or breaking on denial. AR should add delight, never become a barrier to buying.

A worked example

Say a shopper taps “Try on.” Your VP0-built overlay shows a coaching prompt to point at their feet in good light; a brief loading state covers the model download; then the shoes appear, with size and color switchers and an “Add to cart” button. If the room is too dark to track, a friendly message offers “View product photos instead.” Camera permission was requested in context, and declining still lets them shop normally. Because the AR helped them feel confident, fewer of them return the order. For an honest data screen in another domain, see crypto portfolio pie chart UI mobile, and for the empty-cart save it can prevent, see empty cart state UI with recommended products.

Key takeaways

• AR try-on can lift conversion and cut returns, but only with a clear guiding UI.
• Build the guidance, loading, try-on, and fallback states from a free VP0 design.
• Power it with ARKit and RealityKit, and use the system coaching overlay.
• Keep AR an enhancement; the normal product page must work without the camera.
• Request camera permission in context and design the denied and tracking-failed states.

Frequently asked questions

How do I build an AR shoe try-on overlay? Build the guidance, loading, try-on, and fallback states from a free VP0 design, then power the AR with ARKit and RealityKit, using the coaching overlay to help the camera track.

Does AR try-on actually help sales? It can. Shopify has reported product interactions with AR content showing meaningfully higher conversion, and seeing an item on yourself reduces uncertainty, which can also lower return rates.

What happens if AR tracking fails? Design for it. When lighting or the surface prevents tracking, show a friendly message and a clear fallback to normal product photos so the shopper can still browse and buy.

Should AR be required to use the app? No. Keep AR as an optional enhancement. The standard product page with photos, size, and price must work for everyone, including users who decline camera access.