The Shopify Try-On UX Playbook: Why Most Pilots Fail at Discoverability, Not Tech

TL;DR

Most Shopify Try-On pilots don't fail because the AR doesn't work. They fail because shoppers never find the button. Engagement caps in the teens, the team gets cold feet, the feature gets quietly de-prioritized. This playbook is the UX & communication field guide we built from 40+ pilots across Shopify footwear, bags, and apparel brands: why Try-On pays off for the business, why discoverability is the lever, the eight placement rules, the layouts that work (and don't), the desktop-to-mobile QR handoff, how to badge Try-On items on collection pages to drive PDP traffic, and a 90-minute setup to get all of it live on Day One. Scope: the WEARFITS Shopify plugin — Try-On button on PDPs plus shoes digitization. Heavier setups (sizing/fit prediction, in-store mirrors, 3D viewer + VTO combos, custom web modules) sit on top via our API; see the closing section for that path.

Why a Try-On button is good for business in the first place

Before we dig into where to put it, let's settle why you want one. The Try-On button on a Shopify PDP earns its keep on three lines of the P&L:

Conversion. Engaged shoppers — the ones who actually use the AR view — convert at materially higher rates than non-engaged shoppers on the same SKUs. Across our customer base, the lift on enabled SKUs runs in the 20–30% range when discoverability is done right. Same product, same price, same page, more conversions. The mechanism is simple: a shopper who can see the shoe on their own foot, in their own room, in their own lighting, has dismissed the biggest cognitive risk of buying online — "what will this actually look like?"

Engagement and time-on-page. Sessions with Try-On engagement run 2–3x longer on the PDP than sessions without. That matters for Shopify merchants who care about return visits, retargeting eligibility, and email/SMS capture. A shopper who interacts with your AR is a shopper who is now a real lead, not an anonymous bounce.

Differentiation. Most of your direct competitors do not have AR Try-On yet. Catalogue-wide AR coverage is one of the few PDP enhancements left in 2026 that still feels novel to shoppers. That novelty premium will compress over the next 24 months as adoption grows; brands that ship early own the position.

What Try-On does not do, on its own, is reduce returns by huge percentages — that requires the sizing/fit layer, which is upsell territory and out of scope for this playbook. Plenty of brands launch with the plugin's Try-On + digitization first and add the fit layer later. The conversion lift alone justifies the install for almost every footwear and bags brand we have worked with.

WEARFITS is an AI-powered virtual try-on platform for footwear, bags, and apparel. The Shopify plugin covers Try-On button placement on PDPs and shoes catalogue digitization (photo-to-3D, no CAD files); custom implementations layer sizing, in-store mirrors, viewer + VTO combos, and bespoke web modules on top via our API.

Why pilots fail: it's discoverability, not the AR

Here is the pattern from the 40+ pilots we have run since 2024.

A Shopify brand installs the plugin. The theme block drops in. The catalogue indexes. The AR works — point the camera, the shoe appears on the foot, looks great. Two weeks in, the dashboard says engagement is 9%. Conversion lift is barely measurable. Someone in the Slack channel asks the uncomfortable question: "Is this actually working?"

We open the PDP on a mid-size Android phone. The Try-On button is in the description accordion. Or it's a tiny camera icon with no label. Or it auto-opens on page load and gets dismissed by every shopper. Or it's perfectly placed — but the collection page gives no signal that any of these products even have a Try-On feature, so shoppers click through to the PDP not expecting it and never reach for it.

The AR didn't fail. The communication did.

Here is the principle this playbook is built on: the magic only happens if shoppers find the button. That sounds obvious. It is consistently the single largest gap between the brands that get a 28% lift and the brands that get a 2% lift. The AR engine is identical in both cases. The PDP — and the path to the PDP — is not.

Your job is to drive traffic to the Try-On. From the collection page, from the PDP, from email, from the size guide link. Make it easy to find. Make it look interesting enough to tap. Tell the shopper what they're about to do. Then the AR earns the conversion.

This playbook is that traffic-driving and discoverability work, broken into eight rules, three layouts, and four common failure modes.

The one metric that tells you if your placement is right

Before any of the tactical rules, set up the one metric that judges them. Without it, every placement debate becomes an opinion contest.

Try-on engagement rate. Shoppers who interact with the Try-On feature, divided by PDP sessions on enabled SKUs. The benchmark we see across Shopify footwear merchants is 45–60% when discoverability is done right. Below 25%, your button is buried or your communication is unclear. Above 70% is suspicious — usually a measurement issue where you're counting button impressions instead of meaningful interactions.

Track it from Day One via the Shopify customer events stream as tryon_engaged. Klaviyo, Triple Whale, and Northbeam pick it up automatically — your existing analytics stack doesn't need to learn new tricks. If you want before/after numbers on conversion lift, compare PDP-level conversion on enabled SKUs versus matched controls (similar price, similar category, similar return-rate baseline) over the same two-week window.

The eight placement rules

These are the rules we have settled on after pattern-matching across pilots. Treat them as defaults; you can break any of them with a specific reason, but you shouldn't break them by accident.

Rule 1: Above the fold on mobile, full stop

Sixty to seventy percent of Shopify fashion traffic is mobile. The mobile fold ends roughly 600 pixels below the URL bar. Your Try-On entry point must be visible without scrolling. If it isn't, your engagement rate caps somewhere around 15%, no matter how good the AR looks once a shopper finally reaches it.

The cleanest pattern: a labelled pill button anchored either adjacent to the product image carousel or directly below the size picker. Visible the instant the page loads.

Rule 2: Adjacent to the size picker, not on the other side of the page

The decision moment happens at the size picker. If your Try-On button is in the description accordion, in the FAQ tab, or in a sticky bottom bar that competes with "Add to Cart" — it is not in the right place. It needs to sit directly above the size picker, directly below it, or inline with it.

Our highest-performing layout: the Try-On button styled as a primary CTA below the size dropdown, before "Add to Cart." Engagement on this layout consistently runs in the 55–65% range.

Rule 3: Label the button clearly

"Try On" wins more A/B tests than any other label we have tested. Runners-up that have also won in specific cases: "See on my foot" (footwear), "Try it on" (bags), "View in your space" (large bags / lifestyle products). What loses every single time: icon-only buttons, generic "AR" labels, abbreviated "VTO" labels, and anything corporate ("Virtual Fitting Experience").

The label is communication. The shopper needs to understand what will happen when they tap it. "Try On" is two short words, action-oriented, and zero ambiguity. Default to it.

Rule 4: Make it visually distinct from the rest of the page

The Try-On button should look like a primary action, not a tertiary link. That means: a real button shape (pill or rounded rectangle), real button weight (filled, not outlined), a brand-accent color that contrasts with everything else on the PDP, and a tap target of at least 44 pixels tall.

Brands that style the Try-On button to "fit the rest of the design language" — outlined ghost button, gray secondary — see engagement rates 30–50% lower than brands that let it stand out. The PDP is not the place to be design-shy. Let the button breathe.

Rule 5: Tell the shopper what they're about to do

A one-line label under or beside the button is worth its weight in conversion. Examples that work: "See how they look on your foot," "Use your camera — no app download," "Try in AR, takes 5 seconds." Shoppers who haven't used AR Try-On before need to know three things: (a) it's quick, (b) no install required, (c) what specifically they're going to see.

Without this micro-copy, you lose roughly 20–25% of the shoppers who would otherwise tap. With it, you bring those shoppers back. Cheap conversion gain.

Rule 6: Open in modal, not in a new page

Modal opens win. Full-page launches lose. The full-page launch breaks the PDP context, and the back button on mobile triggers a navigation prompt that scares the shopper off. A modal — full-bleed if you want, but still inside the PDP context — keeps the shopper anchored.

When the shopper closes the modal, they should be returned to the PDP with the size picker still scrolled into view. Not the top of the page. Not a thank-you screen. The state they left.

Rule 7: Don't auto-open the Try-On on PDP load

Counter-intuitive, but pre-emptively opening the AR canvas (no shopper tap required) annoys more shoppers than it serves. Mobile shoppers especially want to look at the product first; auto-launching forces them to dismiss before they engage with anything else.

The shopper needs to choose the experience. A button that opens on tap is a conscious decision. An auto-popping AR canvas is an interruption.

Rule 8: Mobile-first, then port the desktop layout from it

Most Shopify brands design the desktop PDP first, then squash it into mobile. For Try-On placement, do the opposite. Design the mobile experience around the seven rules above, then port it to desktop — usually with a larger canvas, a wider Add to Cart button, and a QR handoff module (see the next section).

The desktop traffic is more likely to convert (higher AOV, more considered purchase), but the mobile traffic is more likely to engage. Optimize the placement for the bigger top-of-funnel; the desktop conversion lift follows.

Mobile vs desktop: the QR handoff is non-optional

Here is the failure mode nobody warns you about: shoppers on desktop. AR Try-On runs on the device's camera. The shopper is on a laptop with no camera pointed at their feet. They tap the button — and now what?

The right answer is a QR handoff. The desktop PDP shows a Try-On module with a QR code; the shopper scans it with their phone, the AR session opens on mobile, and the experience picks up from there. The QR is the bridge between the lean-back desktop browse and the lean-forward mobile try-on.

A few rules for the QR module:

• Label the QR clearly. "Try them on" or "See on your foot" plus a one-liner: "Scan to open AR try-on on your phone." Without the label, conversion on the QR drops by 40–60%.
• Pair the QR with a visual cue. A small phone icon or the AR camera glyph next to the QR. Helps shoppers parse what's about to happen.
• Don't make it the only option. Some desktop shoppers won't scan. Keep the "Add to Cart" button equally visible. The QR is a path, not a gate.
• Track mobile re-entry. The QR opens a mobile URL on the shopper's phone. Pass the same session ID, so when the shopper returns to desktop after the try-on, the PDP recognizes them and shows social proof, a recommended size note, or the standard checkout flow.

The reverse direction matters too — mobile shoppers who started on the phone and want to finish checkout on desktop. Email capture inside the Try-On modal ("Want this on your laptop later? We'll send you the link") creates a cross-device handoff that closes more transactions than people expect.

PLP indication: badge the Try-On enabled items on collection pages

Here is the lever almost no Shopify brand actually pulls: the collection page. The PDP placement work above only matters if shoppers reach the PDP in the first place. The collection page is where they decide which product to click.

If 30% of your catalogue has Try-On enabled, and the collection page gives no signal which 30%, you are wasting the discovery moment. Badging the Try-On enabled products on the PLP drives more traffic to those PDPs — and shoppers who arrive on a PDP already expecting Try-On engage with the button at 2–3x the rate of shoppers who don't know it's there.

The execution is straightforward:

• A small teal "TRY ON" pill in the top-left corner of the product card image. Same color as the PDP Try-On button. Visual continuity matters — the shopper sees the badge on the PLP, recognizes it on the PDP, taps it.
• Don't make it a filter (yet). Adding "Try-On enabled" as a collection filter is a Phase 2 move. In Phase 1, just badge. Filters add friction and reduce browse breadth.
• Apply it consistently. If you have categories with mixed enabled / non-enabled SKUs, badge every enabled one. Inconsistent badging is worse than no badging — it makes shoppers question whether the feature is reliable.
• Don't badge everything. If 95% of your catalogue is Try-On enabled, the badge becomes noise. At that point, flip the script and use a small "no Try-On" tag (subtle, gray) on the 5% that aren't.
• Promote it once at the top of the collection page. A small ribbon: "Now with AR Try-On — look for the badge." One sentence, dismissable, displayed only on first session. Lifts PDP traffic to badged products by 15–25% in our split tests.

This single change — collection page badging — is the highest-leverage discoverability move available to a Shopify brand after PDP placement. It is also the most commonly skipped.

The three layouts that work

Three PDP layouts that have delivered 20%+ conversion lift on enabled SKUs in our pilots.

Layout A: Inline below the size picker, mobile-first

Best for: footwear, single-variant products, brands with a clean PDP.

The "Try On" button is the visual peer of "Add to Cart" — same width, similar prominence, teal where Add to Cart is navy. Mobile-first, ports cleanly to desktop with the QR handoff bolted in.

Engagement rate: 55–65%.

Layout B: Side-by-side, desktop with mobile fallback

Best for: desktop-heavy traffic, brands with rich PDP modules, multi-variant footwear.

Two equally weighted primary CTAs, side by side. Try-On opens in modal. On mobile, the two stack vertically (Try-On on top, Add to Cart below).

Engagement rate: 45–55%.

Layout C: Persistent floating button, mobile-only

Best for: brands with long editorial PDPs where the size picker is deep in the page.

The floating button stays visible during scroll, opens the AR canvas in a full-screen modal. Good for brands committed to long product storytelling who can't sacrifice the editorial space above the fold.

Engagement rate: 50–60%.

The four placements that don't work

Four common failure modes. Each one caps engagement somewhere below 25%.

Try-On tucked inside the description accordion. Not visible without scrolling, and the shopper has no reason to expand the accordion before adding to cart. Engagement rate: 8–15%.

Try-On as an icon-only button with no label. Shoppers don't know what they're tapping. Icon-only entries lose roughly 60% of their potential engagement versus a labelled version of the same button. Engagement rate: 15–20%.

Try-On launching a full-page experience. Modal good, full-page bad. The full-page launch breaks PDP context; the mobile back button triggers a navigation prompt that scares shoppers off. Engagement rate: 20–25%, with conversion drop post-engagement.

Try-On default-open on PDP load. Pre-emptively opening the AR canvas annoys more shoppers than it serves. Mobile shoppers especially want to look at the product first; auto-launching forces them to dismiss before they engage with anything else. Engagement rate (measured as meaningful interaction, not page-load impression): 15–20%.

The 90-minute setup

If you have the WEARFITS Shopify app installed and your catalogue indexed, the following sequence gets you from default install to a tuned Layout A PDP plus PLP badging plus desktop QR handoff in about ninety minutes. WEARFITS, a web-first virtual try-on solution founded in Krakow, installs as a Shopify app and theme app extension, so every step below is either a checkbox in the app dashboard or a copy-paste into the theme editor.

Minutes 0–15: Pick the layout

Look at your current PDP on mobile. Count the elements above the fold. If the size picker is above the fold, go with Layout A. If you have heavy editorial content, go with Layout C. Layout B is for desktop-heavy traffic only.

Minutes 15–35: Drop in the theme block

In your Shopify theme editor, open the product template. Add the "WEARFITS Try-On" app block. Drag it directly below the size picker for Layout A, beside Add to Cart for Layout B, or as a floating element for Layout C. Save the section. Mobile preview: confirm visibility above the fold.

Minutes 35–50: Configure the defaults

In the WEARFITS app dashboard, set:

• Default state on PDP: Closed (entry button visible, opens on tap)
• Open style: Modal (not full-page)
• Button label: "Try On"
• Micro-copy under button: "Use your camera — no app download" (or your variant)
• Button style: Pill, primary, teal accent

Minutes 50–65: Add the desktop QR module

In the same dashboard, enable the "Desktop QR handoff" toggle. Configure the module label ("Try them on") and the helper text ("Scan to open AR try-on on your phone"). The QR auto-generates per SKU and per session; no engineering required.

Minutes 65–80: Enable PLP badging

In the dashboard, switch on "Show TRY ON badge on collection pages." Choose the badge style (teal pill, top-left corner is our default). Add the optional one-sentence ribbon on top of the collection page ("Now with AR Try-On — look for the badge"). Preview a collection page; confirm badges appear on enabled SKUs.

Minutes 80–90: Smoke test

Open three test PDPs on mobile and desktop. Walk through: PLP load → badge visible → tap product → PDP load → Try-On button visible above the fold → tap → modal opens → AR works → close modal → return to PDP state. If any step fails, the most likely fix is in the theme block position. If everything works, push to production.

After 90 minutes, you have the plugin's full Try-On UX live on real traffic.

When you outgrow the plugin: what custom unlocks

The Shopify plugin handles Try-On + shoes digitization for the broad majority of footwear and bags brands. There are scenarios it doesn't cover, where a custom WEARFITS implementation (via API or bespoke web modules) becomes the right path:

• Sizing and AI fit prediction — the heatmap and fit verdict that drive the bigger returns-reduction story, with the size picker reacting to the verdict and a Fit-Confirmed Add to Cart state. Not in the plugin; custom build via the WEARFITS sizing API.
• 3D viewer + VTO combinations — pairing a full 3D viewer (rotate, zoom, inspect material detail) with the AR try-on inside the same canvas. Useful for premium footwear, luxury bags, and high-AOV apparel.
• In-store mirrors and omnichannel deployments — the same Try-On + Fit canvas running on in-store mirrors, with a shared shopper identity across web, mobile, and physical store. We have shipped this for retail customers who want the AR Try-On to follow the shopper across surfaces.
• Apparel generative AI Try-On — the gen-AI apparel layer (already live on WEARFITS) deploys via API for brands with bespoke PDP architectures or marketplace channels (TikTok Shop, branded apps).
• Custom web modules for complex catalogues — multi-variant products with bespoke configurators, made-to-order footwear, or non-Shopify storefronts. The WEARFITS API is the integration path.

If any of these apply, the Shopify plugin is still a useful Phase 1 — it gets your catalogue indexed and your team operating the Try-On UX before the custom layer arrives. WEARFITS deploys across Shopify, mobile WebViews, and in-store mirrors from one integration, so the plugin → API path is upgrade-safe by design.

Frequently asked questions

How long does it take to change my PDP placement?

The 90-minute setup is for a brand starting from a default install. Moving from one layout to another after launch is a 15-minute job in the theme editor — drag the block, save, push. The slow part is deciding the new layout, not implementing it.

Do I need a Shopify Plus subscription for this?

No. WEARFITS works on standard Shopify plans. Theme blocks and app extensions are available across all Shopify tiers.

What if my theme doesn't support app blocks?

Almost every modern Shopify Online Store 2.0 theme supports app blocks. If yours doesn't (older themes from before 2021), the WEARFITS team will provide a Liquid snippet you can paste manually. The placement principles are the same — just an extra five minutes of work to position it.

How does this affect my Shopify theme upgrade path?

The WEARFITS theme block is upgrade-safe. When you upgrade your theme, the app block moves with you because it lives in the app extension, not in the theme code.

Should the same placement work for all my categories?

Layout A (inline below the size picker) is the default for most footwear stores. Layout B (side-by-side) is for desktop-heavy traffic and rich PDP modules. Layout C (floating button) is for editorial-heavy PDPs where the size picker sits deep in the page. If you have multiple collections with different PDP structures, configure the WEARFITS app per collection — the dashboard supports collection-specific defaults.

What about marketplace channels — Amazon, TikTok Shop, etc.?

This playbook is Shopify-specific. The placement principles transfer (above the fold, modal, labelled button, etc.) but the implementation on marketplaces is different because you don't own the PDP. For TikTok Shop specifically, the WEARFITS WebView integration runs in the product detail iframe; that's a custom deployment, not the plugin path.

How do I know if my Try-On UX is "done"?

Two consecutive months where engagement rate is in the target range (45%+ on enabled SKUs) and conversion lift is measurable (15–25%+ versus matched controls). At that point, the plugin is doing its job. Further gains come from layering in the custom sizing/fit tier, expanding to more categories, or moving to in-store and omnichannel.

The shortest version

Most Shopify Try-On pilots fail because shoppers never find the button, not because the AR doesn't work. Drive traffic to it: badge enabled items on collection pages, place the button above the fold on the PDP, label it clearly ("Try On"), open it in a modal, add a QR handoff for desktop. Eight rules, three working layouts, four placements that don't, a 90-minute setup. The Shopify plugin covers Try-On + shoes digitization; sizing, in-store, 3D viewer + VTO combos, and custom apparel sit on top via the WEARFITS API when you're ready.

If you're running a Shopify footwear or bags store and want WEARFITS placed correctly on your SKUs:

• Install the WEARFITS Shopify app →
• Talk to us about custom and sizing →

Further reading

• The Shopify Returns Playbook 2026: How to Cut Footwear & Apparel Returns Without Killing Conversion
• How to Add Virtual Try-On to Shopify, No CAD Files Required
• Virtual Shoe Sizing: How AR Try-On Plus AI Fit Prediction Reduces Footwear Returns
• Must-Have Shopify Apps for Footwear Brands, by Merchant Stage
• DTC Shoe Brand Economics: The 5-Stage Funnel Playbook for 2026