Configuration reference
Full reference for allTryOnWidget.init() options.
Base options
| Option | Type | Default | Description |
|---|---|---|---|
apiKey | string | required | Your Wearo API key (starts with wearo_) |
productSelector | string | See below | CSS selector targeting the product image |
brandColor | string | #000000 | Brand hex color. Applied to the overlay button and iframe. |
triggerText | string | Auto-detected | Button label. Auto-detects from <html lang>, URL, or navigator.language. |
triggerSelector | string | '' | Container override for the overlay button placement |
locale | 'en' | 'fr' | Auto-detected | Force language instead of auto-detecting |
Product identification
| Option | Type | Description |
|---|---|---|
productId | string | Product ID for analytics and conversion attribution |
variantId | string | Shopify variant ID |
Injection mode
| Option | Type | Default | Description |
|---|---|---|---|
injectionMode | 'overlay' | 'buybox' | 'both' | 'overlay' | Where the button is rendered |
buyboxSelector | string | '' | Anchor element near the Add to Cart button |
buyboxPosition | 'before' | 'after' | 'prepend' | 'append' | 'after' | Position relative to buyboxSelector |
buyboxBadge | BuyboxBadgeConfig | null | Optional badge on the buybox button (e.g. { text: 'NEW' }) |
Overlay button options
| Option | Type | Default | Description |
|---|---|---|---|
overlayTheme | 'glassmorphism' | ButtonThemeConfig | 'glassmorphism' | Visual theme for the overlay button |
overlayAlignment | 'center' | 'left' | 'right' | 'center' | Horizontal alignment on the image |
overlayAnchorSelector | string | '' | Custom anchor element for overlay positioning |
overlayAutoHide | boolean | false | Hide overlay until hover (desktop) |
overlayBottom | string | '16px' | Distance from the bottom of the image |
Buybox button theme
| Option | Type | Default |
|---|---|---|
buttonTheme | 'glassmorphism' | ButtonThemeConfig | 'glassmorphism' |
ButtonThemeConfig
Full control over button appearance:{
fontFamily?: string,
fontSize?: string,
fontWeight?: string,
letterSpacing?: string,
textTransform?: string,
backgroundColor?: string,
textColor?: string,
borderRadius?: string,
height?: string,
width?: string,
padding?: string,
border?: string,
boxShadow?: string,
hoverBackgroundColor?: string,
hoverTextColor?: string,
backdropFilter?: string, // e.g. 'blur(11px)' — frosted glass effect
backdropOpacity?: number,
backdropHoverOpacity?: number
}
Default productSelector
When noproductSelector is provided, the widget tries these in order:
img[data-product-image],
img.product-image,
.product-image img,
.product__image img,
.product__media img,
.woocommerce-product-gallery__image img
Minimal snippet
<script src="https://wearo.io/widget/tryon-widget.js"></script>
<script>
TryOnWidget.init({
apiKey: 'wearo_xxxxxxxxxxxxxxxxxxxx',
productSelector: '.product__media img',
brandColor: '#000000'
});
</script>
Full example (overlay + buybox)
<script src="https://wearo.io/widget/tryon-widget.js"></script>
<script>
TryOnWidget.init({
apiKey: 'wearo_xxxxxxxxxxxxxxxxxxxx',
productSelector: '.product__image, img[data-product-image]',
productId: '{{ product.id }}',
locale: 'fr',
injectionMode: 'both',
buyboxSelector: 'form[action*="/cart/add"] button[type="submit"]',
buyboxPosition: 'before',
buttonTheme: {
backgroundColor: '#ffffff',
textColor: '#000000',
border: '1px solid #000000',
hoverBackgroundColor: '#000000',
hoverTextColor: '#ffffff',
borderRadius: '2px',
height: '54px',
},
buyboxBadge: { text: 'NEW' },
overlayAutoHide: true,
overlayBottom: '20px',
});
</script>