Whenever you enter a product name in the search box and press enter, the detailed search results page is displayed. The search details are rendered on top of this page.

<aside> ℹ️ Usually, styling this element takes from-to: 1-2h

</aside>

Where this element can be seen?

Search details can be found on the following elements:

How should this element be designed?

Label and search query designs should be represented, additionally, no results page should be designed.

Untitled

Design example #1

How to develop styles for this element?

The SearchPage route extends CategoryPage.

How to theme category details?

The SearchPage route method renderSearchHeading is responsible for rendering the search details.

To style a component, override its .style.scss file. You can also customize how it is rendered by overriding the .component.js file.

How to override JavaScript classes?

How to override styles?

Implementation example #1