Styling, labels, and terms

The widget inherits storefront button styles where possible. Use initialization fields for placement and copy, then CSS variables for deliberate visual overrides.

Position the overlay

virtualfit('init', {
  siteKey: 'site_pub_your_key',
  mount: '.product-media',
  overlayPosition: 'bottom-right'
});

Supported values are top-right, top-left, bottom-right, and bottom-left. Fine-tune spacing on the mounted container:

.virtualfit-tryon-container {
  --virtualfit-overlay-offset-x: 20px !important;
  --virtualfit-overlay-offset-y: 20px !important;
  --virtualfit-overlay-z-index: 50;
}

Style the button

.virtualfit-tryon-container {
  --virtualfit-font-family: "Inter", Arial, sans-serif !important;
  --virtualfit-button-bg: #111111 !important;
  --virtualfit-button-text: #ffffff !important;
  --virtualfit-button-border: 1px solid #111111 !important;
  --virtualfit-button-radius: 0 !important;
  --virtualfit-button-padding-y: 12px !important;
  --virtualfit-button-padding-x: 18px !important;
  --virtualfit-button-font-size: 14px !important;
  --virtualfit-button-font-weight: 600 !important;
  --virtualfit-button-line-height: 1.2 !important;
  --virtualfit-button-text-transform: uppercase !important;
  --virtualfit-button-letter-spacing: 0.04em !important;
  --virtualfit-button-shadow: none !important;

  --virtualfit-button-hover-bg: #333333 !important;
  --virtualfit-button-hover-text: #ffffff !important;
}

Test hover, focus, disabled, loading, and mobile states. Preserve visible focus indicators and sufficient color contrast.

Configure labels

Pass translated interface copy through labels:

virtualfit('init', {
  siteKey: 'site_pub_your_key',
  mount: '.product-media',
  labels: {
    triggerButton: 'Try it on',
    uploadHint: 'Use a clear full-body photo in fitted clothing',
    generateButton: 'Generate try-on',
    processing: 'Processing',
    loginRequired: 'Sign in to use virtual try-on',
    loginAction: 'Sign in',
    successTitle: 'Try-on complete',
    successMessageGallery: 'Your result is available in the product media.'
  }
});

Common label keys

Area	Keys
Primary actions	`triggerButton`, `generateButton`, `close`, `tryAgain`
Upload	`uploadHint`, `addPhoto`, `selectPhoto`, `removePhoto`, `invalidFileType`, `maxFileSize`
Processing	`processing`, `preparingTryOn`, `processingTryOn`, `uploadingPhoto`, `generating`
Authentication	`loginRequired`, `loginRequiredError`, `loginUploadRequired`, `loginAction`
Limits and safety	`dailyLimitReached`, `maxPhotos`, `maxConcurrentTryOns`, `imageRejected`, `safetyFiltered`
Results	`tryOnResult`, `viewTryOnResult`, `downloadImage`, `successTitle`, `successMessageGallery`
Terms	`termsTitle`, `termsShowMore`, `termsShowLess`, `termsAccept`
Email	`emailLabel`, `emailOptional`, `emailPlaceholder`, `emailRequired`, `emailInvalid`

Some messages accept placeholders:

maxFileSize: {maxSizeMB}
maxPhotos: {maxPhotos}
maxConcurrentTryOns: {maxConcurrent}
showAlternateImage: {label}

The loader does not provide an automatic translation registry for custom sites. Pass the appropriate labels when the storefront language changes.

Configure terms

Keep legal and disclaimer content in terms, not labels.

Inline HTML

virtualfit('init', {
  siteKey: 'site_pub_your_key',
  mount: '.product-media',
  terms: {
    summaryHtml: 'This AI preview is illustrative. Actual fit may differ.',
    fullHtml: '<p>Full merchant virtual try-on terms...</p>'
  }
});

Host-page selector

<div id="virtual-fit-terms" hidden>
  <p>Full merchant virtual try-on terms...</p>
</div>

virtualfit('init', {
  siteKey: 'site_pub_your_key',
  mount: '.product-media',
  terms: {
    summaryHtml: 'This AI preview is illustrative. Actual fit may differ.',
    fullSelector: '#virtual-fit-terms'
  }
});

Use fullSelector when the storefront already owns the legal HTML. The element may stay hidden; the widget reads its innerHTML.

Sanitize any merchant-managed HTML before placing it in the page or passing it to fullHtml. The browser renders this content in the shopper interface.

Copy principles

Describe the output as an AI visualization, not a sizing guarantee.
State that actual fit, color, and proportions may differ.
Tell shoppers what photo works best.
Explain age, image-rights, retention, and prohibited-use requirements.
Keep error messages actionable.
Review translated legal text independently from interface labels.

See Privacy and consent for data-handling guidance.

Get started

Shopify

Custom JavaScript

Recommendations

Operate

API reference

Styling, labels, and terms

Position the overlay

Style the button

Configure labels

Common label keys

Configure terms

Inline HTML

Host-page selector

Copy principles

​Position the overlay

​Style the button

​Configure labels

​Common label keys

​Configure terms

​Inline HTML

​Host-page selector

​Copy principles

Position the overlay

Style the button

Configure labels

Common label keys

Configure terms

Inline HTML

Host-page selector

Copy principles