Where to Put the Virtual Try-On Button on Your Product Page

A try-on button hidden three scrolls down is a feature your shoppers will never meet. You paid for it, so let them find it.

Where should the virtual try-on button go?

Close to the purchase controls. That is where a shopper is deciding whether the jacket will suit them, and the try-on answers exactly that question.

Docs from several try-on apps, including GlamAR and Tolstoy, say the same thing: keep it near Add to Cart and avoid burying it low on the page. That is vendor advice, not a study, so use it as the default and not as proof.

• Best default: directly under the size picker, next to or just below Add to Cart.
• Alternative: under the price and title, before the shopper reaches the size picker.
• Avoid: below the description, inside a tab, or under a long review block.

With Corlen's Shopify app the button is a theme app block. You add it in the theme editor, inside the product information section, and move it up or down like any other block. Install steps are in our guide to adding virtual try-on to a Shopify store.

What should the button say?

Say what happens. "Try it on" and "See it on you" both tell the shopper they will upload a photo and get a preview. "Experience the magic" tells them nothing, and magic is not a thing people click on a hoodie page.

The block also has a line of helper text under the button, such as "See it on your own photo in seconds". Use it to answer the one worry people have, which is usually the photo. A short privacy line in the popup helps too, and you can edit that text in the block settings.

How should it look next to Add to Cart?

Add to Cart is the main action, so the try-on button should read as a close second. Same width and height, a different fill or an outline, and spacing that makes it clearly part of the same group.

1. Open the block settings and set the accent colour to something from your palette that differs from the Add to Cart fill.
2. Keep the button the same height as Add to Cart so the two look intentional.
3. Preview the product page with the longest title and the most sizes you sell, since that is where layouts break.

What changes on mobile?

Most of your shoppers are holding a phone, and the product page there is one long scroll. If the button lands under the description it might as well not exist.

• Check the button is visible without scrolling past the gallery and size picker.
• Make sure it does not push Add to Cart off the first screen.
• Test on a real phone, not only the desktop preview in the editor.

Weight matters too. The block loads after the page and stays hidden until a shopper opens it, which we cover in does virtual try-on slow down a Shopify store.

How do you test two positions?

Do not argue about it in a meeting. Run it.

1. Pick one product category and note its add to cart rate and return rate for the last full period.
2. Duplicate the product template and put the button in position A on one and position B on the other.
3. Run each for the same number of weeks, changing nothing else on the page.
4. Compare try-on starts, add to cart rate and returns using how to measure virtual try-on results.

If the two positions come out close, keep the one nearer Add to Cart and move on to a problem that matters more, like your garment photos.

To see how the button and popup feel from the shopper side, run the live demo with your own photo. If your store is not on Shopify, the API lets you place the button wherever your design needs it.