Styles

You can adjust the styling to your branding and the style of your website. All available options are under the styles property.

NOTE: if you change these values while in development mode, you must restart the server to see your changes.

colors

object | required

The colors to use.

Key	Type	Description
primary	string	The accent color, typically the main color of your branding.
secondary	string	The secondary color, for most of the text content.

Internally, we use CSS custom properties with a static fallback for browsers that don't support it. If you want to leverage CSS custom properties (e.g., to implement multiple color themes), you can set the color variables as your initial values (and fallback for older browsers). Then, you can override them in the desired context by setting the corresponding CSS custom properties in your website's CSS.

text

object | required

The font stack to use.

Key	Type	Description
fontFamily	string	The global font stack.

If you want to use the same font stack as your main website, we recommend you change the value to inherit.

breakpoints

object | required

The different screen width at which the UI responds to provide variable styling.

Key	Type	Description
sm	number	The breakpoint for small devices.
md	number	The breakpoint for medium devices.
lg	number	The breakpoint for large devices.

We've adapted the design of Unified InstantSearch E-Commerce to the provided default breakpoints. If you change them, make sure the layout still works the way you expect.

baseZIndex

number | required

The base z-index for the entire search UI.

Make sure to set a value that's higher than any z-index you've set in the CSS of your website so that the search UI is always on top of it.