Every day our clients ask us to help enhance their Shopify stores with the latest features and other ideas to help improve their customer’s experience + their business. In this series, we share our daily learnings in the endeavor of helping merchants on their way to success. This is a running series about our daily learnings that we hope brings value to the Shopify community.
Today I learned…[002]
how the brand new predictive_search liquid object works (Released on Aug 31, 2021). The Predictive Search API has been around for the last two years, however it wasn’t until now that with Sections Everywhere, Shopify has decided to scale this functionality to the next level by allowing DOM editing of these type of results from liquid sections with this new type of object.
Using liquid code in interaction with Javascript logic to achieve dynamic results requires using the JS DOMParser function to achieve frontend and backend interaction. I found this very interesting, as this is the first time I have seen this type of logic shared in official Shopify documentation. I had previously used this type of approach for custom logics like infinite scrolls or product variant enhancers, but somehow, not being included in Shopify’s documentation, it always seemed like a potential risk to me. No more!
Here are some resources to implement predictive search to your themes:
[tutorial]: https://shopify.dev/themes/navigation-search/search/predictive-searchThe predictive-search object
[doc]: https://shopify.dev/api/liquid/objects/predictive-searchPredictive Search API
reference: https://shopify.dev/api/ajax/reference/predictive-search#get-search-suggest