If you build product pages with PageFly, you can still use AI Frame. Keep the app embed on, then place the Virtual Try-On block where you want the overlay. Size Chart and Sizing assist are separate. They are not a combined “Try-on & Size Chart” button.
Before you start
Make sure AI Frame is installed and its app embed is enabled on your theme. The embed is what runs Try On, Size Chart, and Sizing assist. See How to Install AI Frame's Virtual Try-On & Size Chart on Your Store.
PageFly's App blocks element works on Online Store 2.0 themes. AI Frame is added through that element. It does not appear in PageFly's built-in integrations list.
Step 1: Open your product page in PageFly
In your Shopify admin, open the PageFly app.
Select a product page.
Open that page in the PageFly editor.
Step 2: Add an App blocks element and publish
PageFly allows one App blocks element on a page. Put it on the product media, on the first product image. That is where the Try On pill should sit.
In the element catalog, open Third-party elements.
Drag App blocks onto the product media area.
Click Save, then Publish.
Step 3: Open the Shopify theme editor
In your Shopify admin, go to Online Store, then Themes.
Click Customize on your live theme.
Open a product that uses this PageFly product page.
Step 4: Add the AI Frame block inside the app section
The AI Frame block goes inside the PageFly App blocks section, not as its own section on the page.
In the theme editor, find the App blocks section PageFly added.
Click that section.
Inside it, click Add block.
Click Apps.
Choose Virtual Try-On under AI Frame – Virtual Try-On. That overlay is the Try On pill on the product image.
Click Save in the top right.
Check it worked
Preview a product page. Confirm Try On sits on the first product image. Confirm Size Chart next to the Size option if a published chart is assigned. If Size Recommender is on, confirm Help us find your size / Estimate my size above Add to cart. Those last two come from the app embed, or from the Size Chart link and Sizing assist blocks. They stay off the PageFly element, because that element can only sit in one place on the page.
What's next? Make the widget match your store: How to Customise the Try-On Widget to Match Your Brand.
Need a hand? If Try On isn't appearing on your PageFly page, send us a message, we're here to help!