Skip to main content

How to Add the Try-On Button to a Shopify Product Page with AI Frame

Step-by-step guide: how to get the Try-On button live on your product pages

J
Written by Jasmine Jurgens

Thank you for installing AI Frame's Virtual Try-On & Size Chart!
This Shopify app lets your customers see how your products look on them and find their perfect size before they buy, helping you increase buyer confidence, reduce returns and improve satisfaction.

This guide walks you through getting the Try-On button live on your store. It takes less than a minute and no coding is needed.

AI Frame dashboard showing the Get started with Virtual Try-On checklist with all five steps: Choose a theme, App Embed, App Block, Add your first size chart, and Start your free trial

Step 1: Choose your theme

When you open AI Frame from your Shopify admin, you'll see the Get started with Virtual Try-On checklist on your dashboard.

  1. Under Choose a theme, select the theme you want the Try-On button installed on (usually your live theme).

  2. Click Confirm.

Choose a theme step in AI Frame, showing the theme dropdown set to AI Frame's Virtual Try-on & Size Chart (Main) and the Confirm button used to select which theme the Try-On widget installs on

Step 2: Enable the App Embed

This is the quickest way to get the Try-On button live and it works on every Shopify theme.

  1. In the Get started with Virtual Try-On checklist, open the App Embed Quick start (works on all themes) step.

  2. Click Enable App Embed. This opens the Shopify Theme Editor in the Apps section.

  3. Toggle AI Frame – Virtual Try-On on, then click Save.

The Try-On button now appears on your product pages automatically.

App Embed — Quick start (works on all themes) step in AI Frame, showing the Enable App Embed button and instructions for toggling the Try-On button on across all product pages

💡 Tip: Prefer to control exactly where the button sits on your product page? Use the App Block method instead, see the section at the end of this article.

Step 3: Activate your plan

To make try-ons available to your shoppers, you'll need an active plan.

  1. On the dashboard, find Ready to unlock more try-ons?

  2. Click Purchase subscription and choose the plan that fits your store.

Every plan starts with a 7-day free trial, and you can upgrade or downgrade anytime.

Step 4: Verify it's working

  1. Open any product page on your storefront.

  2. Click the Try On button.

If the try-on experience opens, congratulations, you're live! 🎉

Optional: Precise placement with the App Block

Want to control exactly where the button sits on your product page? Use the App Block — Precise placement (OS 2.0) step in the checklist. This method is for Online Store 2.0 themes and lets you place the widget exactly where you want it.

  1. Make sure you're on a supported template (usually your product template).

  2. Click Add App Block (Product), then click Save. This opens the Shopify Theme Editor with the AI Frame block added.

  3. In the Theme Editor sidebar, you can add, remove or reorder the block and adjust its settings.

  4. When you're happy with the placement, click Mark as done back in the checklist.

App Block — Precise placement step in AI Frame, showing the Add App Block (Product) button and instructions for positioning the Try-On widget on the product page

Troubleshooting

If the button doesn't appear after enabling:

  1. Go to Online Store → Themes → Customize.

  2. Click the App embeds icon (the puzzle piece in the left sidebar).

  3. Make sure the AI Frame embed is toggled on.

  4. Preview a product page again.

Still not showing? Read Try-On Button Missing? A Quick Checklist, or send us a message, we're happy to help!

Did this answer your question?