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

Styling popover elements

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.

1
2
3
4
5
6
7
.livesearch.popover-container {
    background-color: lavender;
}

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

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

Disabling the popover

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

1
bin/magento module:disable Magento_LiveSearchStorefrontPopover