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

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-05-31, updated 2026-06-02. 4 min read.
> Source: https://vp0.com/blogs/ar-shoe-try-on-ui-overlay-template

The AR magic only lands if the UI guides it: tell the user where to point, what is loading, and what to do when it cannot track.

**TL;DR.** An AR shoe try-on overlay helps shoppers see a product on themselves, which can lift conversion and reduce returns. Build the UI from a free VP0 design: a clear scanning and guidance state, a loading indicator while the model loads, the live try-on with size and color controls, and a graceful fallback when tracking fails. Power it with ARKit and RealityKit, keep instructions obvious, and never block the plain product photos.

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%](https://www.shopify.com/) 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](https://developer.apple.com/design/human-interface-guidelines/) and its [augmented reality guidance](https://developer.apple.com/augmented-reality/) 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](https://developer.apple.com/documentation/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](/blogs/barcode-scanner-viewfinder-ui-mobile/), and for the fashion storefront it lives in, see [fashion ecommerce app UI free](/blogs/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](/blogs/crypto-portfolio-pie-chart-ui-mobile/), and for the empty-cart save it can prevent, see [empty cart state UI with recommended products](/blogs/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.

## 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.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*