Skip to main content

​
Brand color & styling

​
brandColor

The brandColor option sets the color of the overlay button and is passed to the widget iframe. 
TryOnWidget.init({
  apiKey: 'wearo_xxxxxxxxxxxxxxxxxxxx',
  brandColor: '#E91E63'
});
  • Accepts 6-digit hex only (#RRGGBB)
  • Defaults to #000000

​
Full button theming

For complete control over the button’s appearance, use buttonTheme (buybox) or overlayTheme (overlay image button) instead of brandColor. 
TryOnWidget.init({
  apiKey: 'wearo_xxxxxxxxxxxxxxxxxxxx',
  injectionMode: 'both',

  // Buybox button (near Add to Cart)
  buttonTheme: {
    backgroundColor: '#ffffff',
    textColor: '#000000',
    border: '1px solid #000000',
    hoverBackgroundColor: '#000000',
    hoverTextColor: '#ffffff',
    borderRadius: '2px',
    height: '54px',
  },

  // Overlay button (on the product image)
  overlayTheme: 'glassmorphism',
});
See Configuration reference for all ButtonThemeConfig properties.

​
Overlay button position

Control where the button sits on the image: 
overlayAlignment: 'center',   // 'center' | 'left' | 'right'
overlayBottom: '20px',        // distance from bottom of image
overlayAutoHide: true,        // hide until hover on desktop

​
CSS override

For spacing adjustments, target #tryon-trigger-host: 
#tryon-trigger-host {
  margin-top: 12px;
}
If the button appears misaligned because the image container is wider than the image: 
.your-product-image-container {
  width: fit-content;
}