Try it on you: every ring on the shopper's own hand

What the shopper sees

Above your product grid sits a Try it on you switch. The shopper turns it on, agrees to the same privacy card as AR try-on, and either uploads a photo of the back of their hand or uses Capture image, which takes the photo by itself once the whole hand is held still inside the outline. Every product card then shows its own ring on that photo, on the ring finger, cards at the top of the page first. A button on each card opens the ring full screen, where the shopper can zoom in on it. On a product page, the ring on their hand joins the product's pictures and follows the metal and shape they pick.

The photo is kept only for that browser tab. Turning the switch off, or closing the tab, removes it. Every picture is drawn in the shopper's browser; the photo is never sent to us or to your store.

Create it

Try it on you is its own kind of embed, next to Ring Builder and Media Only. Open Dashboard → Embeds and choose Create Try it on you. It comes with the same plans as the Ring Builder: one on Retailer and Manufacturer, as many as you need on Enterprise.

A new one starts with the look of your newest Ring Builder or Media Only embed: its metals, lighting and try-on settings. The rings on your grid then look as they do on your product pages.

Its Try it on you settings:

• On your product grid shows or hides the switch on your store.
• Soften the background keeps the hand and ring sharp and blurs the rest of the photo.
• On product pages adds the ring on the shopper's hand to the product's pictures.
• Photo taken by itself lets Capture image take the photo once the hand is held still.
• Switch label changes the words on the switch.

It needs AR try-on and its Photo mode in your plan. A change reaches your store within about a minute. The same settings can be changed through the API.

Add it to your store

One script tag does it. Install & embed on the embed shows it with its ID filled in; paste it once, just before </body>, on every page with products:

<script src="https://3djewelrydesigner.com/try-it-on-you.js" data-embed="YOUR_EMBED_ID" defer></script>

On Shopify, open Online Store → Themes → Edit code → theme.liquid and paste it just before </body>. Nothing else is needed: the script finds your product cards by their product links and reads each one's SKU, metal and shape from Shopify. The switch appears above the product grid on collection and search pages. To show it only for some products, add their product types, separated by commas:

<script src="https://3djewelrydesigner.com/try-it-on-you.js" data-embed="YOUR_EMBED_ID"
  data-product-types="Engagement Rings, Wedding Rings" defer></script>

On any other site, mark each product card's picture with the ring's SKU. The metal and the stone's shape and carat are optional:

<div class="card-picture" data-3jd-tryon='{"sku":"R-1001-W","metal":"14K White Gold","head":{"shape":"oval"}}'>
  <img src="ring.jpg" alt="Oval solitaire">
</div>

The script matches the SKU to your rings in 3JD the way your ring builder does. A product it has no ring for keeps its own photo.

On product pages, put an empty <div data-3jd-tryon-pdp></div> where the picture should show. On Shopify it follows the variant the shopper picks; on other sites give it the ring as on the cards. To put the switch in a place of your own, add an empty <div data-3jd-tryon-switch></div> there.

Before it draws the switch, the script reads the embed's settings, so turning it off in your dashboard hides the switch everywhere. Its words can be changed, for example into another language; the Script tab under Install guides lists everything it reads.

What it counts

The embed's Analytics page shows Try it on you: shoppers who added a photo of their hand, rings shown on it, rings opened full screen, clicks from a try-on picture to its product, and adds to cart after one. Only these counts are kept. The hidden pictures it draws are not counted as visits or as try-on opens.