> ## Documentation Index
> Fetch the complete documentation index at: https://docs.virtual.fit/llms.txt
> Use this file to discover all available pages before exploring further.

# Troubleshoot Custom JavaScript

> Resolve origin, catalog, product matching, mount, SPA, styling, and analytics issues.

Check the storefront in this order: allowed origin → product match → product availability → mount selector → shopper flow → commerce events.

## The widget does not appear

| Check          | Expected state                                                  |
| -------------- | --------------------------------------------------------------- |
| Allowed origin | The exact `window.location.origin` is saved in virtual.fit.     |
| Installation   | The generated script URL loads successfully.                    |
| Site key       | `siteKey` belongs to the same custom storefront.                |
| URL rule       | The live tester matches the page to the expected product.       |
| Product        | The product is enabled and has a usable garment image.          |
| Mount          | `document.querySelector(mount)` returns the main media wrapper. |

Check the two page-specific values in the browser console:

```javascript theme={null}
window.location.origin
document.querySelector('.product-media')
```

The first must exactly match an allowed origin. Replace the example selector with your configured `mount`; it must return an element on every supported product template.

## The browser reports 401 or 403

* Save the exact scheme, host, and port under **Allowed Origins**.
* Do not include a path such as `/products`.
* Check whether the page redirects between `www` and non-`www` hostnames.
* Add staging and production as separate origins.
* Confirm your content security policy permits the script and service URLs shown in virtual.fit.

## The URL tester extracts the wrong value

* Prefer a path template over last-segment matching.
* Match by `handle` only when the URL contains the synced handle.
* Match by `product_id` only when the URL contains that external ID.
* Put the desired value in the first capture group of a custom regex.
* Account for locale segments such as `/en/` or `/et/`.

See [Resolve product URLs](/custom-js/product-resolution).

## The mount target is missing

* Mount to the full product gallery wrapper, not one image.
* Use a selector present on every product template.
* Avoid generated class names that change on deploy.
* For an SPA, call `init` once, then update the product after the route and gallery have rendered.

## The widget appears more than once

* Include the hosted script once.
* Call `init` once per page lifecycle.
* Remove duplicate tag-manager or theme-manager installations.
* Use `setProduct` or `setContext` after application state changes.

## SPA navigation shows the previous product

Call `setProduct` after each product route is ready:

```javascript theme={null}
bitstudio('setProduct', {
  id: nextProduct.virtualFitProductId,
  title: nextProduct.title,
  imageUrl: nextProduct.featuredImage
});
```

For color or style variants, pass the selected variant's unique synced ID. Changing only `imageUrl` does not change the prepared garment used for try-on.

## Product images do not prepare

* Open each image URL in a private browser window.
* Confirm it loads without cookies or a temporary signed session.
* Replace expired or short-lived image URLs.
* Use clear garment media instead of charts, collages, or unrelated assets.
* Prepare the product again after updating its images.

## Styling does not apply

* Apply the documented variables to `.bitstudio-tryon-container`.
* Load overrides after your storefront theme styles.
* Check whether the theme applies a more specific font, button, or color rule.
* Re-test hover, focus, disabled, and mobile states.

## Commerce events are missing

* Send events only after the cart, checkout, or order action succeeds.
* Set customer context after login and logout when consent permits.
* Use the same product IDs and handles synced to virtual.fit.
* Send one checkout and purchase line-item event per item.
* Avoid sending the same event from both a callback and a tag manager.

Follow the [Commerce events verification flow](/custom-js/commerce-events#verify-events).

## Contact support

Include:

* Site ID and only the public site key prefix. Never send a secret API key.
* Affected page URL and exact origin.
* Synced product ID and handle.
* URL resolution mode and mount selector.
* Browser and device.
* Visible browser errors and failed requests.
* Approximate test time and timezone.

Contact [virtual.fit support](https://virtual.fit/support) with this information.