GraphQL Search & Product Filtering Updates Improve Shopper Experience
BigCommerce merchants have historically had to use third-party integrations to customize and extend native search capabilities for their storefronts. We recently released an update to improve this experience.
Headless merchants using BigCommerce will now be able to put our GraphQL Storefront API to use in order to customize and extend our native search functionality for their storefronts, which eliminates the cost of integrating a third-party search solution. In addition, headless merchants will now be able to use customer attributes to personalize the shopping experience.
By leveraging GraphQL as an aggregated API endpoint and ElasticSearch as a performant full-text search and recommendation engine, merchants will be able to deliver relevant, personalized search results that dramatically improve user experience!
Why these updates?
We heard from our user base that there was a desire to build interesting functionality and alternate presentations of search for their websites, but we didn’t offer a public API to make it possible. Adding search into GraphQL was a natural fit because we want all storefront functionality to be accessible via the Storefront GraphQL API.
These updates provide a much smoother shopping experience on the storefront that can lead to an increase in conversions and sales for merchants. It’s a major win-win, and a direct response to feedback from our developer community.
To learn more about how to implement these updates on your own store, check out our Developer Documentation on Faceted and Textual Search.
What is Textual Search?
Textual search results index product titles, descriptions, and category structure, reorganizing plural searches, correct spelling mistakes, and supporting synonyms included in the tags. It allows shoppers to use a textual search bar to look for items on a site and find the most relevant results.
This update allows merchants using Headless and Stencil to enhance their customers’ online shopping experience by delivering more relevant and accurate search results without the need for third-party search integrations. Headless merchants, who previously didn’t have search capabilities in GraphQL, now will for the first time! Stencil merchants, on the other hand, have already had access to additional search features out-of-the-box. This update provides functionality for developers who want to customize their search with access to a public API that can be used to implement various customizations.
This API update gives BigCommerce stores the ability to customize fetch data on navigation facets, collection, or other objects matching the search term.
Product Filtering
Additionally, we’ve updated product filtering to now employ faceted search, which makes it easier for shoppers to navigate products by allowing them to search the way they want to.
What is faceted search? A faceted search allows shoppers to refine product searches based on multiple attributes like price, color, size, and reviews.
This update to product filtering allows Headless and Stencil merchants to analyze, organize, and filter large sets of their product inventory based on filters like size, color, price, and brand without the need for third-party search integrations. More importantly, it vastly simplifies a shopper’s experience by allowing them to zero-in on the products they arrived at a store looking for, while filtering out items that don’t match their query.
These advanced product filtering capabilities give merchants the ability to customize search terms to auto-select the navigation facets and the list of other product filters.
What do these changes look like to developers?
Let’s start by taking a look at filtering products and facets. To use the Faceted and Textual Search feature, you’ll specify a filter in the argument for SearchProducts. For Faceted Search, you can filter by price, rating, among other features and attributes of products. For Textual Search, use the searchTerm field.
Check out the code example below:
searchProducts( filters: { searchTerm: “Sample” price:{ minPrice:11, maxPrice:200 }, rating: { minRating:3, maxRating:5 }, categoryEntityId:24, searchSubCategories:false, categoryEntityIds:[23], brandEntityIds:[35], productAttributes:[ { attribute:”Color”, values:[“Black”] } ], isFreeShipping:true, isFeatured:true, isInStock:true } ...)
Both the products and facets returned are affected. For example, filtering by rating returns only products that are within the specified rating range, as well as only facets that have products within the rating range.
Check out our Developer Documentation for more implementation examples and code snippets!
Why GraphQL?
By leveraging GraphQL as an aggregated API endpoint and ElasticSearch as a performant full-text search and recommendation engine, you’ll be able to provide shoppers with relevant, personalized search results that dramatically improve their user experience (and your sales!).
If you aren’t familiar with GraphQL, here are just a few of the benefits of using a GraphQL API:
- It fetches only the exact and specific data you want in a single request vs. too much data or sometimes not enough, making it fast and simple to interact with.
- You have total flexibility to customize and extend our native search functionality to personalize your customer shopping experience.
- It enables you to reduce costs by trimming down the number of 3rd party integrations your business relies on.
- GraphQL improves efficiency by denormalizing data sources, which improves not only your overall store performance, but most importantly your customers’ shopping experiences.
If you want to learn more about BigCommerce’s GraphQL Storefront API, read through our documentation.
Additional Resources
Want to learn more? Find additional details and information in the BigCommerce Dev Center.
Are you using textual or faceted search in your BigCommerce store? Let us know in the comments how you’ve utilized this new capability and what you think!
