Styling Popover Elements

Last update: 2024-01-18
  • Created for:
  • Admin

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 and product elements in the popover.

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

Container Class Selectors

.livesearch.popover-container

Popover container

View all footer

Product Class Selectors

.livesearch.products-container

Product container

.livesearch.product-result

Product result

.livesearch.product-name

Product name

.livesearch.product-price

Product price

Product result

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