Customize your Try-on button

The Try-on button is the entry point to the TryX experience. This guide shows you how to control where it appears and how it looks on your store.

💡Where to find this setting: TryX → Settings → Try-on button

Preview changes in real time before saving.

Display preferences
Control which products show the try-on button. Under “Button is displayed on,” choose from:

• All products — the button appears on every product page. Best for stores where most products are try-on-friendly (clothing, accessories, eyewear).
• Specific collections or products — the button only appears on what you select. Use this if you sell a mix of try-on-friendly items and others (home goods, gift cards, digital products).

Button Type
TryX offers three button types. Pick the one that fits your store’s design:

1. Embedded — appears inline on the product page, similar to an Add to Cart button.
   
2. Overlay — adds a compact “Try on” button that floats on top of the product images. Less intrusive but always visible. Best for stores that want a more subtle entry point.
3. Embedded and Overlay — shows both at the same time. Useful if you want maximum visibility.
   
   

Button position

Control exactly where the Try-on button appears on your product pages. There are two ways to position it:

App block placement (recommended)
Use the Try-on button app block to let Shopify handle placement within your theme.

• When the status is Inactive: Click Add block to open the Theme Editor. In the Apps section, select Virtual Try-on > Try-on button, then drag the block to place it where you want on the product page.
• When the status is Active: The button is already live. Open the Theme Editor, navigate to a product page template, and drag the app block to reposition it as needed.

CSS selectors (advanced)
If your theme requires custom placement, enable Use CSS selectors and enter a selector for the element where the button should appear. Most stores won’t need this. If you need help with custom placement, feel free to contact us via chat or email — we’ll be happy to help.

Button appearance
Customize the background and style of your try-on button under the appearance.

Custom CSS
For advanced styling beyond the built-in options, add CSS overrides in the Custom CSS box.

Example: .tryon-trigger { border-radius: 0; }

Use Custom CSS only if you're familiar with it or the built-in styling options don’t meet your needs. Incorrect CSS can break the button’s appearance. Don't hesitate to get in touch with support.

Text & Translations
Customise every text label on the try-on button in the texts and translations field. This is especially useful for stores that serve non-English-speaking customers.