Introduction
See It On You, also shown in Tolstoy as Virtual Try-On, lets shoppers visualize how products may look on them directly from a product page. It helps merchants reduce shopper hesitation, make the buying experience more interactive, and give customers more confidence before purchasing.
You do not need to be on a paid plan to create or publish the widget. However, live usage is connected to AI Shopper credits and monthly usage limits. If the account runs out of credits or exceeds its overage limit, the widget may pause until the next billing cycle or until billing is updated.
How to Set Up
Log in to Tolstoy. Click to Virtual Ttry-On → Experiences → See It On You
Start setup.
Choose product.
Pick a sample photo or upload your own → Continue
Choose the model. Pick speed or quality. You can change it anytime. Nano Banana Pro renders the sharpest, most realistic try-on but is slower. Nano Banana Lite trades a little detail for a much faster result → Generate try-on
Continue
Set the product-page CTA shoppers use to start the Virtual Try-On flow
Entry point skill - Choose which skill activates when a shopper clicks this button. This determines the initial chat experience after photo upload. You can choose between Virtual Try-on and Shade Finder.
Label - This is the text on your Virtual Try On button that shoppers will see.
Style
Outlined
Filled
Pill
Luxe
Position
Inline
Full-width
Floating
Accent color
Leading icon
Sparkle
Pulse dot
None
Placement and eligibility - Limit where the CTA appears, or leave it available on every eligible product.
Colors - background, text, border, accent
Hover Design
Custom hover colors - Change button colors when customers hover over it
Hover Background Color
Hover Text Color
Hover Border Color
Button Width
Desktop Width Mode
Mobile Width Mode
Mobile Width
Shape and Style
Link Style (text with Underline) - Removes button styling when enabled
Show Icon - Upload a custom icon or use the default sparkle icon
Icon Position
Before Text
After Text
Border Radius
Border Width
Text Alignment - Only relevant when Custom Percentage is selected for Button Width Mode
Left
Center
Right
Font
Font Family
Font Size
Letter Spacing
Visibility
Blacklist by Collection - Add product collections where the widget should not appear.
Continue
Upload flow
This is what shoppers see before uploading. Set the words and rules once - See It On You, Beauty Try-On, and Video Try-On all use them → Continue
Before showing the result
Decide when identity appears in the shopper journey. The best default asks after their photo passes checks.No sign-in required - Anyone can generate; a dismissible prompt to sign in and save appears after the result.
Sign in before viewing the result (Recommended) - Photo is checked first, so sign-up feels earned.
See the full shopper flow
Click "See it on you" to open the try-on exactly as your shoppers will — the last check before you publish. Click the Publish button when ready.
Publish it to your store yourself (please see the full publishing step-by-step guide on the How to Publish part below), or book a free setup call and we'll publish it with you.
Advanced settings
Enhanced, animated, and size upgrades for your try-ons.
How to Publish
For Shopify Stores
Click Publish in the Tolstoy platform.
If prompted, enable the Tolstoy app embed:
Click Open Shopify theme.
In Shopify, open App embeds.
Turn Tolstoy on.
Click Save in Shopify.
In the publish dialog, click Add block.
Shopify will open your product page template.
Add the "see it on" you app block to the product page template.
Click Save in Shopify.
Open a live product page and confirm the widget appears and works.
If Shopify app blocks are unavailable, use No app blocks? Use code instead and paste this into the product Liquid template where the widget should appear:
<see-it-on-you class="see-it-on-you" data-product-id="{{ product.id | default: "" }}"> </see-it-on-you>
For Non-Shopify Stores
Click Publish.
Copy the provided code snippet.
Paste it into the product page template or page section where the widget should appear.
Replace
PRODUCT_IDwith the product ID from your site or catalog.Click Publish Widget in Tolstoy.
Open the product page and confirm the widget appears and works.
<see-it-on-you class="see-it-on-you" data-product-id="PRODUCT_ID"> </see-it-on-you>
Best Practices
Place the button near the Add to Cart area so shoppers find it at the moment they are deciding. Use clear text like “See it on you” or “Try it on” and make sure the button styling matches your store’s theme. Test the widget on desktop and mobile before publishing, and exclude collections where virtual try-on is not relevant.
Troubleshooting / FAQs
I published the widget, but I don’t see it on my Shopify store.
Make sure the Tolstoy app embed is turned on, the app block was added to the product page template, and the Shopify theme was saved.
The button is not appearing next to Add to Cart.
In the Design tab, set placement to Inline. If needed, add the Add to Cart button selector so Tolstoy knows where to place the widget.
The widget does not appear on some products.
Check whether the product belongs to a blacklisted collection in the Settings tab.
The non-Shopify widget is not showing.
Confirm the code snippet is on the product page, PRODUCT_ID was replaced with a real product ID, and the widget was published in Tolstoy.
Can I unpublish it?
Yes. Open the widget in Tolstoy and click Unpublish. The widget will no longer appear on your store.
Why does the widget show as paused?
The widget may pause if your account exceeds its monthly AI Shopper usage or overage limit. It should resume on the next billing cycle, or you can update billing from your plan settings.