Storefront Popover

When Live Search is installed, a popover appears in the storefront as shoppers type in the Search box. With each character typed, the popover is updated with suggested products and thumbnail images of the top search results.

Live Search returns results for a query of two characters or more. For a partial match, the maximum number of characters per word is 20. The number of characters in a “search as you type” query is not configurable.

The Live Search storefront popover is available only for stores that use the Luma theme, or a customized theme that is based on Luma. The Luma theme is included in the Commerce sample data. The popover does not support the Blank theme. See Working with a modified theme for more information.

Searchable attributes

The following attributes are always searchable:

sku
name
categories

Review the set of product attributes that are searchable (searchable=true) to produce highly targeted results. Some attributes that are search-enabled by default, such as description, can have the opposite effect and reduce the precision of search results. For example, if a person searches for “shorts” and there are shirts in the catalog with a description that includes “short sleeves”, the shirts are also returned. To improve the relevancy of the results, make attributes searchable that contain content that has a clear and concise meaning. Avoid using attributes that contain less precise, lengthy text.

Storefront popover

The popover always displays the product name and price, and the selection of fields is not configurable. However, elements of the popover 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 Developers 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

.livesearch.view-all-footer

Suggestion Class Selectors

.livesearch.suggestions-container

.livesearch.suggestions-header

.livesearch.suggestion

Product Class Selectors

.livesearch.products-container

.livesearch.product-result

.livesearch.product-name

.livesearch.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>

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

bin/magento module:disable Magento_LiveSearchStorefrontPopover