Troubleshoot Custom JavaScript

​

The widget does not appear

window.location.origin
document.querySelector('.product-media')

​

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/.

​

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

virtualfit('setProduct', {
  id: nextProduct.virtualFitProductId,
  title: nextProduct.title,
  imageUrl: nextProduct.featuredImage
});

​

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 .virtualfit-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.

​

Contact support

• 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.