Home > widget-integration > InstantSearchController > applyWidgetStyles

InstantSearchController.applyWidgetStyles() method

Apply widget styles to the ISW container element.

Called once during initWithContext() after the initial render so the container element exists in the DOM. Override to apply shop-specific inline CSS custom properties or extra class names.

Signature:

protected applyWidgetStyles(container: HTMLElement): void;

Parameters

Returns:

void

Example

window.boostWidgetIntegration.extend('InstantSearchController', (InstantSearchController) => {
  return class CustomController extends InstantSearchController {
    protected applyWidgetStyles(container) {
      super.applyWidgetStyles(container);
      // Tint the search overlay for this brand
      container.style.setProperty('--boost-primary-color', '#ff6600');
    }
  };
});