AI Frame is a Shopify theme app extension. After you install the app, you add it in Theme Editor. No code.
Follow this once on your live theme, then Save.
The three surfaces
App embed: the switch that turns AI Frame on for the whole theme. You need this. With the embed on, AI Frame auto-places Try On, Size Chart, and Sizing assist on product pages.
App blocks: optional. Use them if you want to pin the Try On pill, Size Chart link, or Sizing assist to an exact spot. If you skip them, auto-place still runs.
Theme Editor: add, remove, preview, and Save. In Get started, Turn on in Theme Editor and Add try-on block are Theme Editor deep links.
You need the app embed on every theme. App blocks are extra control, not a replacement for the embed.
Before you start
In Shopify admin go to Apps → AI Frame – Virtual Try-On.
Open Get started with AI Frame. If you have more than one theme, pick the live one on the Turn on AI Frame step (Theme dropdown), so Theme Editor opens on the right theme.
Surface 1: App embed (every theme)
The app embed is the switch that makes AI Frame run on your storefront. Once it is on, shoppers see:
Try On: a pill on the first product image. Default position is bottom-centre. Shoppers tap it to start a virtual try-on.
Size Chart: a text link next to the Size option. Shoppers can open the chart without starting a try-on. It only shows when a published Size Chart is assigned to that product.
Sizing assist: a card just above Add to cart: Help us find your size, with Estimate my size. After an estimate it reads Your size: M. It shows when a chart is assigned and Size Recommender is on (Starter and above).
These three are independently reachable. A shopper who only wants a size can use Size Chart or Estimate my size without uploading a photo.
Deep link: Turn on AI Frame
In the app, open Get started with AI Frame.
Open Turn on AI Frame.
Click Turn on in Theme Editor. Theme Editor opens on Theme settings → App embeds, with AI Frame – Virtual Try-On selected.
Toggle it on.
Click Save.
Manual path (same result)
Go to Online Store → Themes.
On your live theme, click Customize.
Click the App embeds icon (the puzzle piece) in the left sidebar.
Find AI Frame – Virtual Try-On.
Toggle it on, then Save.
Turn the embed off
In Theme Editor, open App embeds again and toggle AI Frame – Virtual Try-On off, then Save.
Surface 2: Optional app blocks
App blocks let you pin placement in Theme Editor. Add them to the product template, and to any custom product templates you use. If a product uses a different template, add the same blocks there too, or rely on the embed's auto-place.
There are three blocks:
Virtual Try-On: hosts the Try On pill on the product image.
Size Chart link: place this on the same row as your Size option label. Shoppers see Size Chart.
Sizing assist: place this between the size picker and Add to cart. Shoppers see Help us find your size / Estimate my size.
If your theme cannot add blocks (Shopify vintage themes), this step is hidden. Keep the embed on; auto-place still puts Try On on the first product image and Size Chart by the size picker.
Deep link: Show try-on on product images
In the app checklist, open Show try-on on product images.
Click Add try-on block. Theme Editor opens on Default product.
In Add block → Apps, choose Virtual Try-On.
Click Save. Repeat for every product template you use.
The pill appears on the product image in a fixed position (set under Virtual Try-On → Try-on pill on product image).
Then, if you want Size Chart and Estimate my size pinned to an exact spot, open the next checklist step Add sizing to your product page and use Add Size Chart link and Add Sizing assist. Or click Skip — using App embed auto-inject — the embed still places both when a chart is assigned.
Manual path: add, remove, reorder
Go to Online Store → Themes → Customize.
At the top, open the page selector and choose Products → Default product (or the custom product template you need).
In the left sidebar, click Add block (or Add section → Apps, depending on your theme).
Under Apps, add Virtual Try-On, Size Chart link, and Sizing assist as needed.
Click Save.
To remove a block: select it in the sidebar and click Remove. To reorder: drag it in the sidebar. The canvas is a live preview, you see the change before you Save.
Surface 3: Theme Editor settings and preview
With a block selected in Theme Editor:
The right sidebar shows that block's settings.
The centre canvas is a live preview. Move a block and you see it before you Save.
Click Save or the change is lost. If Theme Editor asks to discard, choose Save first.
You do not need to publish a new theme. Saving on the live theme is enough.
Check it on the storefront
Open a product page on the live store. Use a product that has a published Size Chart assigned in the app.
Confirm Try On sits on the first product image.
Confirm Size Chart sits next to the Size option.
If Size Recommender is on, confirm Help us find your size sits above Add to cart.
If Try On is missing, the app embed is off, the plan is not activated, or that product type is excluded under Exclude product types. See Try-On Button Not Showing? A Quick Checklist.
If Size Chart is missing on one product but present on another, that product has no published chart assigned or its template has no Size Chart link and the embed is off. Assign the chart, then Save. Exclude product types never hides Size Chart or Sizing assist.