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

# Styling, labels, and terms

> Match virtual.fit to your storefront and configure shopper-facing text 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

```javascript theme={null}
bitstudio('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:

```css theme={null}
.bitstudio-tryon-container {
  --bitstudio-overlay-offset-x: 20px !important;
  --bitstudio-overlay-offset-y: 20px !important;
  --bitstudio-overlay-z-index: 50;
}
```

## Style the button

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

  --bitstudio-button-hover-bg: #333333 !important;
  --bitstudio-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`:

```javascript theme={null}
bitstudio('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

```javascript theme={null}
bitstudio('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

```html theme={null}
<div id="virtual-fit-terms" hidden>
  <p>Full merchant virtual try-on terms...</p>
</div>
```

```javascript theme={null}
bitstudio('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`.

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

## 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](/operations/privacy-and-consent) for data-handling guidance.