storefront-popover.md

group	title	ee_only
live-search	Storefront Popover	true

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.

{:.bs-callout-info} 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

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.

.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)]({{ page.baseurl }}/guides/v2.4/frontend-dev-guide/css-topics/css-overview.html) in the [Frontend Developers Guide]({{ page.baseurl }}/guides/v2.4/frontend-dev-guide/bk-frontend-dev-guide.html).

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>

Disabling the popover

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

bin/magento module:disable Magento_LiveSearchStorefrontPopover