How to Add Virtual Try-On to Shopify: A Step-by-Step Setup Guide

How to add virtual try-on to Shopify: what to check before installing, a step-by-step setup, common mistakes, and what to measure in the first 30 days.

By Karim Salem, Founder of Traion6 min read
Fashion store owner setting up an app on a laptop, with a smartphone on a stand and a clothing rack in the background

Short answer: To add virtual try-on to Shopify, install a try-on app from the Shopify App Store, approve its plan, switch on its app embed in the theme editor and save, then style the button and test it on a real phone. Before you install, check that the app suits your products, your theme, and your page speed.

That's the whole job on paper. In practice, most of the time goes into the decisions before the install and the checks after it, so this guide covers both. The middle section walks through one real setup, click by click, so you know what each screen asks of you.

Before you install: four decisions that apply to any try-on app

These questions are the same whichever app you choose. Answering them first saves you from installing, testing, and uninstalling three apps in a week.

Match the app type to what you sell

"Virtual try-on" covers several different technologies, and they suit different products:

  • Photo-based AI try-on places the garment on a photo the shopper uploads. This is the common choice for clothing, footwear, hats, and bags. For shoe-heavy catalogs, our guide to virtual try-on for shoes compares it with AR.
  • AR try-on overlays a product on a live camera view. It's built for rigid items like eyewear and jewelry.
  • Size recommendation tools suggest a size from the shopper's measurements. They answer "which size?", not "how will it look on me?"

If your returns are mostly "wrong size", a size tool may matter more than a visual preview. If shoppers hesitate because they can't picture the item on themselves, visual try-on is the better fit. Our side-by-side comparison of try-on apps shows which apps fall into each group.

Check how the app attaches to your theme

Most try-on apps add their button through a Shopify app embed, which you switch on in the theme editor. According to Shopify's Help Center, app embeds can be used with any theme version, while app blocks only work with compatible themes. If an app needs you to edit theme code, that's a reason to ask more questions before installing.

Check what it costs your page speed

A try-on feature shouldn't slow down every product page to serve the few shoppers who click it. Look for an app that loads a small script with the page and only loads the full try-on experience when a shopper taps the button. If you already run several apps, read our guide to keeping app bloat off your product pages before adding another.

Pick a pricing model you can test cheaply

You won't know whether try-on works for your catalog until it has run on real traffic for a few weeks. A free allowance or small package lets you find out without committing to a recurring bill. Our breakdown of pay-as-you-go versus monthly try-on plans does the math at different volumes.

Step by step: adding Traion AI Virtual Try-On to a Shopify store

Here's a complete setup using our own app as the worked example. The steps match the setup checklist inside the app. Other apps follow a similar pattern with different screens.

Step 1: Install the app from the Shopify App Store

Open the app's listing on the Shopify App Store, click Install, and approve the connection to your store. Once it's installed, the app opens inside your Shopify admin with a setup checklist, and the first item, "App installed", is already ticked.

Step 2: Approve the Pay As You Go plan

Shopify asks you to approve the app's plan before any try-ons can run. Traion's plan has no monthly fee, nothing is charged when you approve it, and your store starts with 10 free try-ons. You only pay later if you buy a try-on package.

Step 3: Turn on the app embed and save

This is the step that puts the button on your store, and the one most often missed.

  1. In the app's checklist, click Open Theme Editor. You can also get there from Online Store, then Edit theme on your live theme.
  2. In the theme editor sidebar, open App embeds.
  3. Find "Traion AI Try-On" and switch the toggle on.
  4. Click Save in the top-right corner.

The app checks for the embed and marks the step complete once it detects it. If it doesn't, the embed is usually switched on but not saved.

Step 4: Style the Try Me button

Back in the app, you can change the button text (the default is "Try Me"), the icon, shape (pill, rounded, or square), width, font size, colors, border, shadow, and hover effect. You also choose where it sits: under the price, under the Buy Now button, above checkout, or between the variant options. Pick the spot your shoppers already look at before they add to cart.

Step 5: Test on a real phone

Open a product page on your phone, not just in a desktop browser preview. Tap the button, upload a photo, and wait for the result. The average render time is about 5 seconds. Check that the button looks right next to your other buttons, the photo upload works from both the camera and the gallery, and you can get back to the product page easily.

Common setup mistakes and how to fix them

The button doesn't appear. Usually the app embed was switched on but not saved, or it was saved on a theme that isn't live. Shopify's Help Center also notes that if you change your published theme, apps aren't active in the new theme by default, so you have to switch the embed on again. A typical version of this: a store publishes a new seasonal theme the night before a launch, and the Try Me button quietly disappears because the embed was only ever switched on in the old theme.

You only tested on desktop. Many fashion shoppers browse on their phones, and that's where buttons get squeezed and photo uploads fail. Test on at least one iPhone and one Android phone before you announce the feature.

You expected to choose which products show the button. Some try-on apps let you limit the button to certain collections. Traion doesn't: once the embed is on, the button appears on every product page. If part of your catalog isn't suited to try-on, like accessories with fixed sizes, factor that into your choice of app.

Try-ons ran out in the middle of a campaign. When a store's try-on balance hits zero, Traion keeps the button visible but shows shoppers a short "unavailable" message instead of a try-on. Turn on automatic refills, or top up before a big sale, so a busy weekend doesn't end with a broken experience.

Your product photos fight the AI. Try-on works best when the garment is fully visible and clearly lit. Folded flat-lays, heavy layering, or cropped shots give weaker results, so check the products you'll promote most.

What to measure in your first 30 days

A new button gets clicks out of curiosity, so don't judge the install by try-on count alone. Over the first month, watch:

  • Add-to-cart rate on products with try-on, compared with the 30 days before
  • Conversion rate on those product pages, with traffic sources held as steady as you can
  • Which products get the most try-ons and which of those turn into carts
  • Return reasons on orders that included a try-on, once the return window has passed

To separate the effect of the feature from the kind of shopper who uses it, run a simple split across a collection. Our guide to reading virtual try-on analytics explains how, and the conversion and returns guide covers what to expect and when try-on doesn't help.

Ready to set it up?

If visual doubt is what stops your shoppers, the setup above takes one sitting. Traion is free to install and includes 10 free try-ons, so you can run it on real traffic before you spend anything. Install free

Frequently asked questions

Quick answers to the questions merchants ask most about this topic.

Do I need to edit my theme code to add virtual try-on to Shopify?

Usually not. Most virtual try-on apps attach through a Shopify app embed that you switch on in the theme editor under App embeds, then save. If an app asks you to paste code into your theme files, ask the developer why before you agree.

Does virtual try-on work with older (vintage) Shopify themes?

If the app uses an app embed, yes. Shopify's Help Center says app embeds can be used with any theme version, while app blocks only work with compatible themes. Check the app's listing or documentation to see which one it uses.

How much does it cost to add virtual try-on to Shopify?

It depends on the app's pricing model. Many try-on apps charge a monthly subscription with a set number of try-ons. Traion is free to install with 10 free try-ons, then sells try-on packages ($19 for 100, $69 for 500, $109 for 1,000) with no monthly fee, and unused try-ons don't expire.

Are shoppers' photos stored when they use virtual try-on?

That depends on the app, so read its privacy policy before you install. Traion's privacy policy states that shopper images and AI-generated results are kept for no longer than 48 hours and then permanently deleted.

Can I turn virtual try-on off later without uninstalling?

With Traion, yes: you can switch the Try Me button off from your store settings at any time, and it disappears from product pages until you turn it back on. Other apps usually let you switch off their app embed in the theme editor.