Today I wanted to show you one of the easiest additions you can make to your theme to improve the customer experience on your store. When a customer types in to your predictive search bar, you can add a Shopify Liquid filter to your results which will bold the exact text they entered. You can also apply this to non predictive search themes on the search results page.
This is a simple but effective way to help the customer find exactly what they are looking for.
Find the full code here on Github.
Prefer Video?
If you’d rather follow along with video enjoy, otherwise read on!
About the Highlight Filter
The highlight filter: “Wraps all instances of a specific string, within a given string, with an HTML <strong> tag with a class attribute of ‘highlight’.” Essentially it wraps included text in a strong tag making it bold. You can learn more here.
Adding the Highlight Filter to Predictive Search
The first step is to find the search results page(s) of your theme. Depending if you utilize predictive search or not you may have 2 liquid pages to add this too. The predictive search dropdown and the results page that shows after hitting ‘Enter’.
This should be pretty straightforward. If you search your theme for files including ‘search’ there are only a few options.
After finding the files you need to manipulate, we will simply add the Highlight Filter. In the predictive_search.liquid file, I will add it like so:
<p class="predictive-search__item-heading ...">{{ query.styled_text | highlight: predictive_search.terms }}</p>I’m going through the predictive-search.liquid file and adding that filter to any <p> tag that is outputting predictive search results on the screen.
After saving we should be able to see our highlighting on the predictive search section.
Adding the highlight Filter to Search Results Page
Next I am going to navigate to our main-search.liquid file. This file references a snippet called card-product.liquid that is used in a few places across the theme. This snippet is what is rendered on the main-search.liquid section after the search is typed in and ‘Enter’ is pushed We will pass the search terms to this snippet so when a search has been made, we can easily apply it to our product titles.
In main-search.liquid where the card-product snippet is rendered I will add the search terms like so:
{% render 'card-product',
card_product: item,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
lazy_load: lazy_load,
search_by: search.terms <!-- Add this line -->
%}Note that in this file we are referencing search.terms instead of predictive_search.terms.
And then in the card-product.liquid file I will add the highlight filter to the title output like so:
<a
href="{{ card_product.url }}"
id="CardLink-{{ section_id }}-{{ card_product.id }}"
class="full-unstyled-link"
>
{{ card_product.title | escape | highlight: search_by }}
</a>
Now we should see it successfully on our search results page.
Conclusion
After just a few lines we should successfully see our search terms highlighted using the built in Shopify Liquid Highlight Filter. I hope you enjoyed this tutorial and stay tuned for more Shopify Development related content.
Github link: https://github.com/ndrishinski/blogs/tree/master/search-terms-highlight