Skip to content

Virtual try-on on your website

Bring Previaly's virtual try-on to the product pages of your online store. You paste a snippet of code once; from then on, every frame that exists on both sides gets a Try on now button (or an icon over the photo) that opens the try-on on top of your website, with the camera, just like on your Previaly storefront.

Before you start: the model number

Your website recognizes the frame by its model number. For each frame in the Previaly dashboard, use the same SKU (code) the product has in your online store as the model number. Uppercase and spaces don't matter: rb-3025 and RB-3025 are the same code.

If the code isn't the same on both sides, the button simply doesn't show up on that product — and nothing else changes on your website.

The snippet

Copy it in the Previaly dashboard (in Portuguese) under Configurações → Provador no seu site. It looks like this, with your store's address in place of my-store:

<script src="https://previaly.com/provador.js" data-loja="my-store" async></script>

That's also where you choose between the button above Buy and the icon over the product photo. The choice applies to every product and you can change it anytime, without touching your website.

The button follows your website's language: on a page with <html lang="en"> it says Try on now; with lang="es", Probar ahora.

Where to paste it on each platform

Shopify

  1. In your Shopify admin, go to Online Store → Themes and, on your current theme, click Customize.
  2. On the product page, add a Custom Liquid block and paste the snippet. Save.
  3. Alternatively: … → Edit code, open theme.liquid and paste the snippet right before </body>.

Nuvemshop / Tiendanube

  1. In your admin, go to Settings → External codes (in Spanish, Configuración → Códigos externos).
  2. Paste the snippet in the codes field and save.

You don't need to edit the theme or use FTP.

WooCommerce (WordPress)

  1. Install a code snippets plugin, such as WPCode, and create a footer snippet for product pages — or paste the snippet into your child theme's footer.php, before </body>.
  2. Save and open a product page to check.

Any other website

Paste the snippet before </body> on every product page. If your website doesn't show the SKU on the page, you can point to the frame directly: add data-sku="CODE" to the snippet on that page, or data-armacao="ID" with the frame's ID (the 12 characters at the end of its Previaly address).

How to check

Open the page of a product whose code exists on both sides. The Try on now button shows up above Buy, at the same height (or the icon, over the photo). When tapped, the try-on opens on top of the site and asks for the camera. Closing it takes you back to your website, without reloading.

Frequently asked questions

Can this break my website? The snippet only adds a button and a window on top; it doesn't change forms, the cart or checkout. When it doesn't recognize the page or the code, it does nothing.

The try-on didn't open inside Instagram. The in-app browsers of Instagram and Facebook don't allow the camera inside another page. In those cases the try-on opens in a new tab, on your Previaly storefront.

Can I turn off PD and fitting height measurement? Yes, in Configurações → Provador. The choice applies to your Previaly storefront and to your website.

I want a different selector for the Buy button. Add data-botao-comprar=".my-class" to the snippet; for the icon, data-foto=".my-gallery". This is for people who edit the theme — in most cases you won't need it.