Introduction to Live Search
Live Search is a service for Adobe Commerce that replaces the standard search capabilities. The Live Search module is installed with Composer and connects your Commerce installation to the Live Search service. When it is configured, the default search text field is replaced with the Live Search text field. Live Search also installs the Product Listing Page (PLP) widget which provides robust filtering capabilities when browsing search results.
Live Search appears on the Marketing menu under SEO & Search in the Commerce Admin.
The Adobe Commerce side of the architecture includes hosting the search Admin, synchronizing catalog data, and running the query service. After Live Search is installed and configured, Adobe Commerce begins sharing search and catalog data with SaaS services. At this point, Admin users can set up, customize, and manage search facets, synonyms, and merchandising rules.
Live Search components
- Live Search popover widget is the box that opens under the search field that contains the search results.
- Product Listing Page widget provides a searchable product listing page with facets and synonym support.
- AEM CIF components: The Popover widget and the PLP Widget allow AEM sites to take advantage of Live Search.
- Live Search Admin is where rules, facets, and synonyms are configured.
Workflow overview
Live Search works by moving catalog data to the Adobe Commerce SaaS infrastructure and building indexes that are used for quickly delivering search results as users type.
1. Installation
Live Search is installed into your Adobe Commerce instance through Composer. This installs the required modules that connect to the service and configures the Commerce instance to override the default search field. It also installs Commerce Admin options for configuring the service.
2. Sync data
Live Search moves catalog data to Adobe’s SaaS infrastructure. The data is indexed and search results are delivered from this index directly to the storefront. Depending on the size and complexity, indexing can take from 30 minutes to a couple hours.
3. Configure data
Getting your product data configured correctly ensures good search results for your customers. There are a couple setup steps required: assigning categories and configuring attributes.
Assign categories
Product returned in Live Search must be assigned a category. In Luma, for example, products are put into categories such as “Men”, “Women”, and “Gear”. Subcategories are also set up for “Tops”, “Bottoms”, and “Watches”. This allows for better granularity when filtering.
Searchable and filterable fields
Products are assigned attributes that can be used for searching and filtering. Attributes are things such as “Color”, “Size”, “Material Type”. With these attributes, users can look for “green tops”. Each product may have many attributes defined in the Commerce admin.
Each of these attributes can be defined as “searchable” in the admin. When set as “searchable”, those attributes are available to be searched by Live Search.
Facets are product attributes that are defined in Live Search to be filterable. Any filterable attribute may be set as a facet in Live Search but there are limits to how many facets can be searched at one time.
Synonyms are terms that you can define to help guide users to the correct product. Users looking for pants might type in “trousers” or “slacks”. You can set synonyms so that these search terms will get users to the “pants” results.
Live Search workspace
The Live Search workspace is the area in the Admin where you configure Live Search features such as synonyms, facets, and Category Merchandising.
Events
Live Search uses events to calculate Intelligent Merchandising and performance dashboards. Eventing is provided with default implementations. Eventing for headless storefronts should be manually enabled.
Customizing widgets
Most store owners will want to ensure that the Live Search widgets conform to their store look and feel.
The popover and PLP widgets can be styled by defining custom CSS rules as needed. See Styling Popover Elements and Product Listing Page Widget.
If you wish to extend the functionality of the widgets, the source code for each is available in a public repo.
In this scenario, you can customize the JavaScript for your own needs and then host your custom code on your CDN. This custom script communicates with the Live Search service and returns the results like normal, allowing you to control the functionality of the widget.
Get more details about Live Search in the Technical Overview.
Live Search demo
Watch this video to learn about Live Search:
For a more in-depth video of how to use and configure Live Search, see the Full Demonstration on Live Search topic.