Filtered search helps in restricting the search results to a specific domain or section of the website. Being a Shopify store owner, custom filter search can help your customers in getting results faster than ever. They can quickly get their desired product by applying some filters. But, unfortunately, the default Shopify search bar does not have an option to filter the products except tags. Indeed, they are quite puzzling since it is way hard to reach a decent conclusion just by applying a tags filter.
Here’s the step-by-step guide to getting Shopify custom filter search in less than five minutes. Without any further ado, let’s get started.
Get Shopify custom filter search 14-day free trial
Steps to get Shopify Custom Filter Search
You can get a custom filter search by installing a product filter app from the Shopify store. Well, Expertrec smart search bar wins by offering you so many helpful features that worth the price.
Install Expertrec smart search bar for filtered search
- Click on the Expertrec smart search bar and install it from the Shopify app store.
- Click Add app -> Install the app -> Start free trial.
- Refresh your Shopify store and that’s how you have the Shopify custom filter search in less than 2 minutes.
This is the easiest step and you’ll get access to the Expertrec dashboard. Here, you can customize your search bar and the results to be shown on the page. Also, you can play around with the Expertrec dashboard to get acquainted with so many awesome features that worth your time.
The best part is that the Expertrec smart search bar shows merely the products in the search bar. Therefore, you won’t have to go anywhere in search of getting product lists avoiding the blog pages. Because we understand that your online store has visitors that are in search of some products.
Copy the code from the Expertrec dashboard to get facets and filters
While Expertrec smart search bar will easily suffice the needs, you can go for the Expertrec custom search engine. All you need is to copy the code from the Expertrec dashboard and paste it into the Shopify theme.liquid file. Do not worry, we are going to show you each and every step.
- Click Expertrec custom search engine and log in with your Google account.
- Enter your online store URL and click on next to proceed further.
- In the dashboard, click on Install -> Code and copy the code and the HTML tag.
- Now, open your Shopify admin panel. Click Online store -> Themes -> Actions -> Edit code.
- In the layouts folder, click on
theme.liquidfile. Paste the Expertrec code just below <head> tag and paste the HTML tag in the <body> section between the two <div>. Save the code.
That’s all. Refresh your website and you will get the Expertrec custom search bar. In the dashboard, there’s an option for facets and filters. You can apply them and witness the benefits. Here’s how it will look like. You can apply as many as filters that you want.
FAQ
What exactly is a filtered search?
Filtered search is an essential feature of a good search bar. You should have decent filters whenever visitors pass a search query. Using a filtered search is closely related to the last stage of the buyer’s journey. It is because your buyer already knows what he wants. He is sure about the color, size, style, brand, and other crucial features. It signifies that the buyer has already done the research and made his mind to go for a product.
When you have a Shopify custom search filter on your online store, visitors can look for their version of the product. And, it will not only increase the chances of sales but also the visitor will become a loyal customer since your store vanishes the distance between the buyer and his desired product in a matter of seconds.
How to restrict the Shopify search results to product pages?
The easiest way is to install the Expertrec smart search bar as it will automatically restrict the Shopify search results to the product pages. Since it’s a Shopify plugin, so you can add a custom filter search according to your storefront.
Still, there’s one more lengthy option that you can implement in your default search bar. For that, you will have to play around with the Shopify search.liquid template. In order to achieve our target, we’ll edit the search form snippet of the theme. It will specify the pages that are being searched. Debut is one of the most popular Shopify themes. We’ll edit the search form that appears in the search.liquid template and the search-form.liquid snippet.
If you are someone who likes to build things from scratch, then it will also work for you. Even you can add it wherever you think it fits perfectly. And, yes, if you are making some changes to an existing theme, then you should find the search form in any of the search-related liquid files.
After finding all the search form instances, we’ll add a hidden field in the search form before the closing </form> tag that will look like this:
<input type="hidden" name="type" value=“product">It will result in restricting the storefront search results from showing any other pages except the product pages. Once you add this code, the overall search form would be similar to this:
<form action="/search" method="get" class="search-header search" role="search">
<input type="hidden" name="type" value="product">
<input class="search-header__input search__input"
type="search"
name="q"
placeholder="{{ 'general.search.placeholder' | t }}"
aria-label="{{ 'general.search.placeholder' | t }}">
<button class="search-header__submit search__submit btn--link" type="submit">
{% include 'icon-search' %}
<span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
</button>
</form>On the flip side, if you want the blogs and articles to show up in the search results then, you can substitute the value="product" with value="blog" or value="page". It is all up to you to manage the search results page although being an online seller, product pages are the best options.
The noticeable thing is to be mindful of your storefront needs and customer demands. After all, your store should help the customers in getting a desired product or service and openly speaking the issues and offerings. We understand your aim for making your search bar faster than ever. That’s why the Expertrec smart search bar plays a crucial role in optimizing your Shopify store search bar.
How do I customize my Shopify search bar?
The default search bar gives very few customization options. Thankfully, we have an Expertrec smart search bar listed on the Shopify store. In order to customize your Shopify search bar, install the app and start customizing it.
If you want to continue using the default search bar, then you should be familiar with the Shopify edit code section so that you can make changes and get the desired result. Still, you can’t get as much flexibility that a custom search bar like Expertrec can offer. Although goals like sorting the search results on the basis of product availability, enable partial word matches and search for certain types merely can be performed using a chunk for code.
For instance, if there are some products that are out of stock and you want to either show, hide or sort then according to availability by sending at the last, you can make changes in search.liquid for it. All you need to do is to ass a hidden field in the search form inside the search.liquid. For that copy the code below and paste it into that section.
<form method="get" action="/search"> <input type="hidden" name="options[unavailable_products]" value="show" /> ... </form>Here, value ="show" means that the search results will be sorted according to relevance. value="hide" means the search results will be sorted according to the relevance buy all the unavailable products will be hidden and not shown in the search results. Last but not the least, using value="last" will result in sorting the search results based on the availability first and by relevance last. It means that all the unavailable products are compelled to get at the bottom of the matching search results.
That’s a great way to show users what exactly they want. Although it’s not a good thing to manipulate the search results according to the availability of stocks. Instead of that, install the Expertrec custom search bar and get easy search analytics, so that you can restock the products if they are in demand.
