How to Customise the Try-On Widget to Match Your Brand

The try-on widget is designed to feel like part of your store, not a bolt-on. With a few quick settings you can match it to your branding and thanks to the live preview, you see exactly what your shoppers will see while you work. Here's how:

Where to find these settings

In your Shopify admin, go to Apps → AI Frame – Virtual Try-On, then open Virtual Try-On in the app's left menu. Scroll to Widget customization. On the right you'll see a Live preview, it updates as you make changes, so you always know how the widget will appear to shoppers.

Add your logo

Upload your logo (PNG, JPG or SVG) so it appears in the try-on widget - a simple touch that makes the experience instantly recognisable as yours.

Set your hero image or video

Choose the image or video shoppers see when they first open the widget. Click Replace to upload your own, or Choose from library to pick from the built-in collection - a great spot to show your brand or your products at their best.

Different hero per category

Want your jewelry pages to open with a different hero than your clothing pages? Under Hero image by category, you can set a hero image or video per product category (Clothing Top, Clothing Bottom, Jewelry, and more). Any category without its own hero falls back to the global one above.

Hero image by category The Hero image by category section in AI Frame, where merchants can override the hero image or video for specific product categories such as clothing tops, clothing bottoms and jewelry.

Choose your brand colour

Set the main colour used for buttons, highlights and active states in the widget so it matches your store's look.

Set your button text and icon

Try-on button text: change what the button on your product pages says -see How to Change the Try-On Button Text.
Main button icon: under Main button icon, choose the icon displayed in front of the try-on button on your product page - a measuring tape, garment, ruler, and more - or pick No icon for a text-only button. Click Save.

Main button icon picker The Main button icon setting on AI Frame's Virtual Try-On page, showing the icons that can be displayed in front of the try-on button on the product page, including a No icon option.

Save and preview

Save your changes and check the live preview - then open a product page on your storefront to see the widget in your store's colours. Adjust any time; your changes apply right away.

💡 A little tip: styling for the size chart table (header and row colours, and the Size Chart button icon inside the widget) lives on the Size Chart page - see How to Style Your Size Chart.

What's next? Reward shoppers for sharing their branded look: How to Set Up the Share-for-Discount Reward.

Need a hand? If anything's unclear, send us a message, we're here to help!