# Designing an Online Fitting Room Journey

Map an online fitting room from arrival to a counted outcome: one-garment previews, size information beside the image, and events that define success this week.

**An online fitting room is a path, not a widget. A shopper arrives, explores a small set of products, sees one garment on their own photo, and still gets size information the photo cannot supply. They can move to a second product without uploading again. Success is a completed preview plus a counted next step, not time spent in the room.**

![Three fitting-room curtains, a floral dress in the center stall, and numbered cards on the floor](/images/blog/merchant-100/online-fitting-room-journey-fashion.webp)

*The dress, the tape, and the numbered path are the whole room. Editorial image in Classic Antla disposable-camera style.*

Calling a button a fitting room is how the project stays a button. A physical fitting room is a sequence: you arrive with something in mind, you take in a small pile, you look, you check a size, you come out with a yes, a no, or a different size. The online version needs the same beats, or shoppers get a photo and nowhere to stand.

Definitions of the technology sit next door. [Try before you buy](https://antla.io/blog/try-before-you-buy-virtual-try-on) and [what a virtual try-on engine is](https://antla.io/blog/what-is-a-virtual-try-on-engine) name the tool. This is the path around it: arrival, a small set of products, one preview at a time, size information that the preview does not replace, and events that say whether the room did its job.

## Map arrival to exploration

I would map six stages and refuse to skip any of them in the design, even if the shopper skips one in practice.

| Stage | What the shopper is doing | What the page owes them | A broken version |
|---|---|---|---|
| Arrival | Ad, search, email, or a direct URL | The product or collection the link named | A homepage that ignores the link |
| Orientation | Deciding what is even in the room | A small set, not the full catalog | Every SKU, with a try-on icon on each |
| Selection | One product in view | Title, price, color, photos | An upload prompt before a product is chosen |
| Preview | One garment on their photo | A result next to that product | A result with no product facts |
| Decision | Size, cart, or another piece | Size information and a way to the next product | A modal that can only close |
| Exit | Order, or a counted stop | A recorded outcome either way | "They spent four minutes" and nothing else |

Arrival should carry context. A product ad that lands on a collection, and makes the shopper find the coat again, has already failed the room. Orientation is where fashion teams overbuild. A fitting room with four hundred garments is a store with a curtain graphic. Cap the set: one collection, one campaign, or the pieces in a single look. [Product pages that convert before you scale ads](https://antla.io/blog/fashion-product-pages-convert-before-ads) is the reminder that the room cannot rescue a page that does not answer basic questions.

Do not ask for a photo at orientation. The upload is effort. Spend it after a product is selected, when the shopper can tell what they are agreeing to see. A room that opens with a camera permission and an empty rail will lose people who would have tried the coat.

The exit matters as much as the entrance. Some shoppers will preview and leave. That is a finished visit if you recorded the preview and the product. It is a mystery if you only stored "time on page."

## Combine visualization with size information

The photo and the size facts do different jobs, and the room has to hold both or shoppers will use the photo for the job it cannot do.

What the photo can settle: color against their own photo, pattern scale, whether a neckline or a length looks plausible, whether the piece resembles the campaign shot once it is on a person. What it cannot settle: which size fits, how a fabric feels, or whether the garment runs small in the shoulder. Say that near the result, in one line, every time.

[Baymard's apparel survey](https://baymard.com/research-articles/apparel-and-accessories-quantitative-ux-insights-2026), 1,922 US shoppers, published 12 June 2026, found that size accuracy and fit details are the leading reason people read reviews (48%), ahead of quality and durability (43%). Reviews are doing fitting-room work because the page did not. Put that evidence where the decision happens:

- The size selector, with no size preselected
- Measurements or a size guide that returns them to the same product
- A fit note if you have one ("roomy in the body, true in the shoulder")
- The review lines that mention size, not the average star rating alone

[Measuring sizing uncertainty](https://antla.io/blog/measure-sizing-uncertainty-conversion-cost) is how you tell whether those elements are getting used. [Size recommendation and virtual try-on](https://antla.io/blog/ai-size-recommendation-vs-virtual-try-on) should stay side by side in the room rather than being introduced as rivals. [Size charts are not the same thing as try-on](https://antla.io/blog/virtual-try-on-vs-size-charts-why-they-re-not-the-same-thing). A room that offers only the image has deleted the tape measure and kept the mirror.

Some merchants have seen returns fall by as much as 30% after adding try-on, compared with those merchants' own earlier return rates. That is the top of a reported range. Antla merchant reporting, cohort dates not published. Read it as an association across stores, not as a promise that size-related returns will move. Check the return reason. Appearance complaints and "ordered two sizes" are different sentences, and only one of them is in the photo's territory.

## Handle multi-product try-on

Shoppers rarely mean one garment when they say they want a fitting room. They mean the jacket and then the trouser, or three dresses. The honest implementation is a sequence of single previews, not one image of an outfit you cannot actually render.

Rules that keep the sequence from feeling like a reset:

- **One generation, one product.** The result is labeled with that title and that variant.
- **The photo can carry forward.** [Antla](https://apps.shopify.com/antla) keeps the last photo the shopper uploaded so the next product can be tried without a second upload, as long as they have not cleared it. That is the closest thing to "staying in the room." It is not a profile, and it is not a stacked outfit.
- **The next product is chosen, not implied.** A pairing link goes to that product's page, where its own preview can run. [Virtual try-on](https://antla.io/features/virtual-try-on) stays on the product. Do not promise a combined render of jacket plus trouser.
- **A short list of this visit's previews** can live in the theme, built from generation events, so they can hop back to the jacket after looking at the trouser. That list is yours to build. Antla does not ship a customer lookbook of saved outfits.

Multi-product is also where variant discipline slips. The second product must open on a real color, and the result must match the color they are buying. If the room remembers the photo and forgets the variant, you have saved them an upload and sold them the wrong picture.

I would cap how many products you invite into the first version of the room. One collection, sequential previews, a list of what they already generated this visit. Adding "try the whole look at once" before that works is how the project stalls in a mock.

Watch the handoff, not the count of generations. A shopper who previews six products and adds none may be browsing with a camera. A shopper who previews two and adds the second, with the same photo and the right color, is the journey you designed. Those sessions should not share one success metric.

## Define success events

Success has to be an event you can point at. "Engaged with the fitting room" is not an event.

Antla's current [event docs](https://antla.io/docs) are DOM events on the page. The ones that map cleanly onto the stages:

| Stage | Event | Success means | Do not call it a success when |
|---|---|---|---|
| Entered | `antla_modal_open` | They opened the room on a product | The modal opened by accident and closed at once |
| Photo in | `antla_image_upload_success` | They supplied a photo | An upload error (`antla_image_upload_error`) |
| Preview done | `antla_image_generated_success` | A result exists for a product | `antla_image_generated_error` |
| Commerce step | `antla_product_added_to_cart` | That product moved to the bag | A later remove you failed to notice |
| Order | Shopify `checkout_completed` | An order, joined by product | A preview with no line item |

A completed preview with no add is still a successful preview. It is not a conversion. Report both rates or you will "optimize" the room by making the photo harder to finish.

The rates I would put on one page:

- Opens divided by product views, for products in the room
- Uploads divided by opens
- Successful generations divided by uploads
- Adds divided by successful generations
- Orders divided by adds

Each drop points somewhere else. Few opens means the entrance is easy to miss, which is a placement problem on the product page. Uploads that fail mean the ask or the file type. Generations that error are a tool problem, not a merchandising opinion. Adds that do not become orders belong to checkout, shipping, and price, and the room should stop taking the blame.

Join them to Shopify's standard events rather than inventing a parallel order. Current [Web Pixels](https://shopify.dev/docs/api/web-pixels-api/standard-events) docs list `product_added_to_cart` and `checkout_completed`. Use those as the commerce half. Use the Antla events as the room half. The [payload](https://antla.io/payload) already carries `product_data`, `selected_variant`, and `output_try_on_image`, so the join key is the product, not a vibe.

[Try-On Intelligence](https://antla.io/features/try-on-intelligence) can cross-check volume and try-on-to-purchase. If the dashboard and your event funnel disagree for a week, fix the instrumentation before you redesign the curtains.

## Where the journey breaks

Four breaks show up more often than a bad model:

- The upload is required before a product is chosen.
- The result covers the size selector.
- The second product demands a new photo even though the first photo is still stored.
- The only reported "success" is minutes spent.

Fix those before you add a stylist chat, a soundtrack, or a share contest. The room is already a long path. Extra steps need their own events or they become decoration.

## One collection this month

Turn the room on for a single collection. For two weeks, record the five rates above, split by mobile and desktop. Repair the worst drop first. If opens are fine and adds after a successful generation are not, the result screen is the work, not the entrance. If the second product in a session always asks for a new photo, the carry-forward is broken and the "room" is still a series of unrelated widgets.

---

**About the author:** [Aaron](https://x.com/AaronfromAntla) founded Antla and still counts a fitting room by what the shopper did next, not by how long the curtain was closed.

## For agents

- Markdown: send `Accept: text/markdown` to this URL (and any other HTML page).
- OpenAPI: https://antla.io/openapi.json
- llms.txt: https://antla.io/llms.txt
- Sitemap: https://antla.io/sitemap-index.xml
- Docs: https://antla.io/docs
- CLI: npx antla info (npm package antla)
- Scope: antla.io is an informational marketing and docs site. The Shopify try-on backend is not on this origin. Install the app from https://apps.shopify.com/antla.