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 — turns AI Frame on for the whole theme. This is the switch you need. It works on every theme, including vintage themes. With the embed on, AI Frame auto-places the shopper buttons on product pages.
App blocks — optional, Online Store 2.0 only. Use them if you want to pin Size Chart or sizing assist to an exact spot. If you skip them, auto-place still runs.
Theme Editor — add, remove, preview, and Save. The Enable App Embed and Add App Block buttons in AI Frame 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's Virtual Try On & Size Chart.
Under Get started → Choose a theme, pick the theme you want (usually your live theme) and click Confirm.
If you skip this, Theme Editor may open on the wrong theme.
Surface 1 — App embed (all themes)
The app embed is the switch that makes AI Frame run on your storefront. Once it is on, shoppers see:
Try On — a button overlaid on the first product image (the main photo). Default position is the bottom-centre of that photo. Shoppers tap it to start a virtual try-on.
Size Chart — a text link next to the Size option label. 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 a Fit Profile is saved it reads Your size: M (or whichever size matches). 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 (fastest)
In the app, open Get started with Virtual Try On.
Open App Embed — Quick start (works on all themes).
Click Enable App Embed. Theme Editor opens on Theme settings → App embeds, with AI Frame – Virtual Try On & Size Chart selected.
Toggle it on.
Click Save.
Manual path (same result)
Go to Online Store → Themes.
On the theme you confirmed in the app, click Customize.
Click the App embeds icon (the puzzle piece) in the left sidebar.
Find AI Frame – Virtual Try On & Size Chart.
Toggle it on, then Save.
Turn the embed off
In Theme Editor, open App embeds again and toggle AI Frame – Virtual Try On & Size Chart off, then Save.
Surface 2 — Optional app blocks (Online Store 2.0)
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, which still covers templates that have no block.
There are three blocks:
Virtual Try-On — hosts the Try On overlay 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.
Deep link (Virtual Try-On)
In the app checklist, open App Block — Precise placement (OS 2.0).
Use a supported template (product).
Click Add App Block (Product). Theme Editor opens on your product template with the Virtual Try-On block ready to add.
Click Save.
Then add Size Chart link and Sizing assist in Theme Editor if you want exact placement. If you skip them, the embed still auto-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.
Vintage themes cannot add app blocks. Use the app embed only — auto-place still puts Try On on the first product image and Size Chart by the size picker.
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 is filtered out. 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.