Documentation
Installation
One script tag, pasted once into your product page template. It detects the product on the page, checks whether a model exists, and renders a button only if one does.
<script src="https://cdn.trylook.app/embed.js"
data-store="YOUR_STORE_KEY" async></script> Your store key is in the dashboard under Install. It is public by design — it ships in your page source — and it is safe there because it is read-only, rate-limited, and locked to the domains you register. Anything that writes needs your private key, which never leaves your server.
Shopify
- Online Store → Themes → Edit code.
- Open
layout/theme.liquid. - Paste the snippet immediately before
</body>and save.
On Online Store 2.0 themes you can use the TryLook theme app extension instead, which avoids editing theme code entirely.
WooCommerce
- Appearance → Theme File Editor →
footer.php. - Paste the snippet before
</body>.
A code-snippets plugin is the better option if you update your theme regularly — direct theme edits are lost on update.
Custom storefronts
The script works anywhere. If it cannot detect your SKU automatically, tell it explicitly:
<script>window.TryLookProduct = { sku: "SOFA-LINEN-3S" };</script>
<script src="https://cdn.trylook.app/embed.js" data-store="KEY" async></script>
You can also set data-sku on the script tag, put
data-trylook-sku on any element, or control placement with
data-mount="#your-selector".
SKU matching
The embed tries these in order, and stops at the first that produces a value:
window.TryLookProduct,data-sku, ordata-trylook-sku- Shopify's
ShopifyAnalytics.meta(selected variant SKU first) - Product structured data (JSON-LD
sku,mpnorproductID) - WooCommerce's SKU element or post ID
product:retailer_item_idmeta tag
On our side, that identifier is matched against your product's SKU, handle, or platform ID. If your SKUs are inconsistent — and they usually are somewhere — set the mapping by hand in the dashboard. Manual override is always available.
Capture guide
This is the part that decides whether your models are good. It matters more than any setting in the dashboard.
- 20–40 photos in a full circle around the product.
- Move the camera, not the product. A turntable is fine, but then the background must turn with it, or stay perfectly plain.
- Even, diffused light. An overcast window or a softbox. Never a bare flash.
- Plain background in a contrasting mid-tone — mid-grey works for almost everything.
- 60–70% overlap between consecutive photos.
- Vary your height. A ring of eye-level shots leaves the top and underside guessed at.
- Fill the frame, but never crop part of the product away.
- Sharp focus throughout. One blurred photo is worse than one missing photo.
Also: measure the product and enter its real dimensions. AR places it at whatever size the model claims, and a sofa that appears at 70% scale in someone's living room is worse than no AR at all.
Products that will not reconstruct well
Photogrammetry has hard limits. We flag these when you add a product, before you spend a credit:
| Material or shape | Why it fails | What to do |
|---|---|---|
| Glass, transparent parts | No trackable surface features | Supply a CAD/3D model |
| Mirrors, chrome | Every photo sees a different reflection | Supply a CAD/3D model |
| High gloss, lacquer | Moving highlights confuse matching | Diffused light, no flash |
| Solid black | Absorbs light, no visible texture | Bright even light, mid-grey background |
| Pure white | Blows out to a featureless shape | Mid-tone background, underexpose slightly |
| Thin structures | Wire, chain and slim legs vanish or fuse | More angles, much closer |
Performance
The embed script is under 4KB gzipped, loads asynchronously, and defers its work to browser idle time. The 3D viewer is a separate bundle fetched only when a shopper clicks. Models are served in multiple levels of detail — phones and slow connections get a light version first — with meshopt geometry compression and KTX2 textures, from a CDN with immutable caching.
Nothing we ship runs before your page paints.
Troubleshooting
The button does not appear
- Add
data-debugto the script tag and check the browser console — it logs which detector matched and what SKU it found. - Confirm the product has an approved model. Models in review do not serve.
- Confirm your storefront domain is registered in the dashboard.
- Check the SKU on the page matches the SKU on the product in TryLook.
The AR button is missing on iPhone
iOS AR Quick Look needs a USDZ file. If the model has no USDZ, iPhone shoppers get the 3D viewer without AR. The product page in your dashboard says so explicitly when that is the case.
The model is the wrong size in AR
Check the dimensions on the product. AR uses them, and if they were entered in centimetres rather than metres the product will appear a hundred times too large.