How to add the try-on button to your product pages
MirrorNex uses Shopify's native app blocks, so you can add the try-on button anywhere on your product pages without writing any code. You control exactly where it appears.
What you need to enable
There are two things you need to turn on in your Shopify theme editor:
- App embed — This loads the MirrorNex widget code on your store
- Button block — This places the "Try On" button on your product pages
Both are required for virtual try-on to work. The MirrorNex app will check these for you and show their status on the onboarding screen.
Step-by-step setup
Open your Shopify admin
Go to your Shopify admin and navigate to Online Store → Themes.
Click "Customize"
Find your current theme and click the Customize button to open the theme editor.
Turn on the app embed
In the theme editor, click on App embeds (the puzzle piece icon at the bottom left of the sidebar). Find Mirrornex Try-On and switch it ON. Click Save.
Go to a product page template
In the theme editor, use the page selector dropdown at the top. Select Products → Default product (or any product template you want to add try-on to).
Add the button block
In the left sidebar, find a section where you want the button (usually near "Add to cart"). Click Add block and look for Mirrornex Try-On Button in the Apps section.
Position the block
Drag the MirrorNex block to your desired position. Most stores place it right below or above the "Add to cart" button.
Save your changes
Click Save in the top right corner. The try-on button is now live on your product pages!
Verify your setup
After completing these steps, go back to the MirrorNex app and click "Check again" on the onboarding screen. The app will verify that both the app embed and button block are correctly enabled.
Button on your storefront
After adding the block, here's how the try-on button will appear to your customers:
Where should I place the button?
We recommend placing the try-on button:
- Near the "Add to cart" button — This is where customers make purchase decisions
- Below product images — Keeps it visible without scrolling on mobile
- In the product info section — Alongside size, color, and other options
Adding to multiple templates
If you have different product templates (e.g., for clothing vs. accessories), repeat the steps above for each template where you want try-on enabled.