Skip to main content

​
Configuration reference

Full reference for all TryOnWidget.init() options.

​
Base options

OptionTypeDefaultDescription
apiKeystringrequiredYour Wearo API key (starts with wearo_)
productSelectorstringSee belowCSS selector targeting the product image
brandColorstring#000000Brand hex color. Applied to the overlay button and iframe.
triggerTextstringAuto-detectedButton label. Auto-detects from <html lang>, URL, or navigator.language.
triggerSelectorstring''Container override for the overlay button placement
locale'en' | 'fr'Auto-detectedForce language instead of auto-detecting

​
Product identification

OptionTypeDescription
productIdstringProduct ID for analytics and conversion attribution
variantIdstringShopify variant ID

​
Injection mode

OptionTypeDefaultDescription
injectionMode'overlay' | 'buybox' | 'both''overlay'Where the button is rendered
buyboxSelectorstring''Anchor element near the Add to Cart button
buyboxPosition'before' | 'after' | 'prepend' | 'append''after'Position relative to buyboxSelector
buyboxBadgeBuyboxBadgeConfignullOptional badge on the buybox button (e.g. { text: 'NEW' })

​
Overlay button options

OptionTypeDefaultDescription
overlayTheme'glassmorphism' | ButtonThemeConfig'glassmorphism'Visual theme for the overlay button
overlayAlignment'center' | 'left' | 'right''center'Horizontal alignment on the image
overlayAnchorSelectorstring''Custom anchor element for overlay positioning
overlayAutoHidebooleanfalseHide overlay until hover (desktop)
overlayBottomstring'16px'Distance from the bottom of the image

​
Buybox button theme

OptionTypeDefault
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 no productSelector 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>