Styling Popover Elements

The storefront popover always displays the product name and price, and the selection of fields is not configurable. However, popover elements can be styled using CSS classes. For example, the following declarations change the background color of the popover container and footer.

.livesearch.popover-container {
    background-color: lavender;
}

.livesearch.view-all-footer {
    background-color: magenta;
}

Container visibility

The parent component of the .livesearch.popover-container is .search-autocomplete. The .active class indicates the visibility of the container. The .active class is conditionally added when the popover is open.

.search-autocomplete.active   /* visible */
.search-autocomplete          /* not visible */

For more information about styling storefront elements, refer to Cascading style sheets (CSS) in the Frontend Developer Guide.

Class selectors

The following class selectors can be used to style the container, suggestion, and product elements in the popover.

  • .livesearch.popover-container
  • .livesearch.view-all-footer
  • .livesearch.suggestions-container
  • .livesearch.suggestions-header
  • .livesearch.suggestion
  • .livesearch.products-container
  • .livesearch.product-result
  • .livesearch.product-name
  • .livesearch.product-price

Container Class Selectors

.livesearch.popover-container

Popover container

.livesearch.view-all-footer

View all footer

Suggestion Class Selectors

.livesearch.suggestions-container
Suggestions container

.livesearch.suggestions-header
Suggestions header

.livesearch.suggestion
Suggestion

Product Class Selectors

.livesearch.products-container
Product container

.livesearch.product-result
Product result

.livesearch.product-name
Product name

.livesearch.product-price
Product price

Working with a modified theme

The storefront popover can be used with a customized theme that inherits the required files from Luma. The top.search block in the header-wrapper of the Magento_Search module must not be modified.

<referenceContainer name="header-wrapper">
   <block class="Magento\Framework\View\Element\Template" name="top.search" as="topSearch" template="Magento_Search::form.mini.phtml">
      <arguments>
         <argument name="configProvider" xsi:type="object">Magento\Search\ViewModel\ConfigProvider</argument>
      </arguments>
   </block>
</referenceContainer>

Disabling the popover

To disable the popover and restore the standard Quick Search functionality, enter the following command:

bin/magento module:disable Magento_LiveSearchStorefrontPopover

On this page