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

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

object | required

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.

Styling the search button

Unified InstantSearch E-Commerce generates the search button for you in the inputContainer that you specify. It comes with default styles, which you may want to customize, or remove entirely.

To do so, you can edit the CSS in the src/components/SearchButton.scss file. To delete the default styling, you can delete the file.

Style conflicts

Unified InstantSearch E-Commerce is designed not to conflict with your website's style, by scoping our own CSS rules. However, if you have CSS that applies too globally, they might interfere with ours.

If this happens, we recommend to either scope your own CSS (e.g., styling .myApp h1 instead of h1), or leveraging the all CSS shorthand property.