WRIST STUDIO — PRODUCT PAGE INTEGRATION

Place the two lines in product-page-snippet.txt beside the product purchase controls
in your product template. Install once per template; every product supplies its
own title, reference and image. No shopper account or API key is required.

RAFFI JEWELLERS
The current Raffi public storefront exposes Product JSON-LD. The widget reads
that page data directly, including its first front-view image. Its tested public
product URL does not support Shopify's .js endpoint, so adding a Shopify theme
block alone may not change this custom storefront. Add the snippet to the
storefront's product template/component. Individual product descriptions can
also link to their dedicated fitting room. The M79360B-0002 product now has
a Try this watch on your wrist link in Product Details.

STANDARD SHOPIFY THEMES
Add a Custom liquid block in the product template below the purchase controls.
Paste shopify-custom-liquid.liquid into it, save and publish the template.
The supplied product JSON avoids needing an API request. The widget reads the
selected variant ID from the product form each time it opens. Variant image and
SKU take priority; variants without their own image use the product front image.
A custom storefront can instead call WristStudio.open(product) after its own
variant selection. It can call WristStudio.update(product) to update an open modal.

OTHER STORES
The plain snippet supports Product JSON-LD (including arrays and @graph), and
common product gallery markup. For custom data, define window.WristStudioProduct
before a shopper clicks, or call window.WristStudio.open with:
{
  id: "your-product-id", title: "Watch name", brand: "Brand", sku: "Reference",
  image: "https://your-store.example/front-view.png",
  images: ["https://your-store.example/front-view.png"],
  url: "https://your-store.example/products/your-watch"
}
Use a real public HTTPS image URL. Optional fields: variant, scale (10–160),
rotation (-180–180), anchor:{x:0.5,y:0.5} (dial centre within the image), and
background:"transparent" when providing a transparent cutout. For a specially
prepared try-on image, use it as image, ahead of lifestyle/gallery shots.
An existing button can use data-wrist-try-on instead of the mount div. Call
WristStudio.mount(container) after custom client-side navigation inserts a new mount.

PHOTO REQUIREMENTS
Upright, straight-on watch, centred dial, white or transparent background. The
original product image is used; there is no AI redraw of the watch. The widget
removes only near-white background attached to the image border and preserves
image proportions. Lifestyle photos, angled watches and dark backgrounds need
a prepared transparent front view. A 2D photo cannot establish real physical fit
or create a 3D model. A small bottom shadow may remain from a product photograph.

CAMERA AND PRIVACY
The camera opens only after the shopper taps Start camera. Tap the wrist, adjust,
then Apply watch to freeze and save. Closing the modal removes the iframe and
stops its camera. Camera and wrist photos remain in the fitting room on-device;
no camera frames are sent to the merchant page. Only public product data/image
passes into the fitting room. No login, camera upload or paid image service.

SECURITY HEADERS
Both pages must use HTTPS. The iframe includes allow="camera". If the merchant
sets Permissions-Policy: camera=(self), it must also allow
"https://wrist-studio.raff-jewellers.chatgpt.site" for the camera directive.
If the merchant has a Content-Security-Policy, its script-src and frame-src must
permit the fitting-room origin. Do not remove unrelated security policies.
Open separately keeps the selected product and image when an iframe camera is
unavailable. It needs a CORS-enabled image URL; images that only load through
the parent bridge must be used inside the product-page fitting room.
Product image hosts must permit anonymous image use in a canvas (CORS). Shopify
CDN images tested successfully. For same-origin store images without CORS, the
parent widget attempts to pass only that public product image to the frame.

TEST BEFORE STORE RELEASE
Open a product, click Try it on your wrist, and confirm title/reference/image.
Select another variant, reopen and confirm its image. Test iPhone Safari and
Android Chrome, Apply/Save and modal close. Verify the camera indicator turns off
on close. A physical phone camera has not been tested by the assistant.

EXAMPLE
https://wrist-studio.raff-jewellers.chatgpt.site/product-demo.html