Adding AR try-on to a Shopify store in 5 minutes
WearRoom installs on Shopify with a single script tag. Add a product in the WearRoom dashboard, copy the embed snippet, paste it into your product template, and the Try it on button appears next to Add to cart. Works on Online Store 2.0 themes and classic themes. PageSpeed and Lighthouse scores do not move.
What you need before you start
A WearRoom account (14-day free trial, no card to start). Two or three clear product photos for the piece you want to try-on enable. Edit Code access on the Shopify theme you publish from, or a section editor that supports custom HTML.
Step by step
First, sign up at trywearroom.com and add your product in the dashboard — upload your photos, set the SKU to match your Shopify SKU, choose the metal, add a short description. The AI pipeline starts generating a 3D model in the background.
Second, open the product in your WearRoom dashboard and copy the embed snippet. It is two lines — a div carrying the SKU, and a script tag that loads the widget.
Third, in Shopify open Online Store, Themes, Edit code. Open product-template.liquid on a classic theme, or main-product.liquid on Online Store 2.0. Paste the WearRoom embed where you want the Try it on button to appear — usually right next to the Add to cart block.
Fourth, save and preview a product page. The Try it on button appears. Tap it on your phone and the try-on opens in a modal.
What shoppers see
On a phone, the modal opens fullscreen, asks for camera permission, then renders the piece in real time on the shopper wrist, neck, or finger. The render uses PBR materials and a camera-derived environment map so metal reads as metal. The shopper can rotate, screenshot, and add to cart without leaving the try-on.
On a desktop laptop, where webcams are awkward for jewelry, WearRoom shows a QR code instead. The shopper scans it with their phone, and the try-on opens on the device that has a usable camera.
What about page speed
The loader is a 2.4 KB async script. The heavy try-on code only downloads when a shopper taps the button. PageSpeed and Lighthouse scores do not move; the embed does not run in the critical path of the product page render.
What you might want to know later
The widget reads SKU from a data attribute, so variants are supported by passing the variant SKU. Shopify Plus, headless storefronts, and Hydrogen all work the same way — the embed is plain HTML and JavaScript. If you want to deepen the integration later (auto-mapping from Shopify variants, attribution tracking through to purchase), it is a configuration change, not a redo.