Shopify is a great platform to launch your ecommerce store. Unfortunately the default search function is not so great. So it would need some customization to make it perform better. In this article we will check out how to create a Shopify search results page in the easiest way possible.
Customization by editing the search.liquid
You can edit your storefront search to customize the kinds of results that are displayed. This can be done by editing your theme code. There are a few different ways that you can customize your storefront search:
Searching only for certain types
You can restrict the type of objects that are returned by the online store search. For example, you can choose to return products, but not pages or articles. To control the objects that are returned, you need to use the
The options are:
product– Search results contain matching products only.
article– Search results contain matching blog articles only.
page– Search results contain matching pages only.
type parameter can include any combination of
article separated by commas. For example, if you only want to search for
article results, then the
type can be specified as
The default type is
article,page,product, which means that search results will contain matching blog articles, pages, and products.
You can set the
type parameter by using a hidden field in the search form within
<form method=“get” action=“/search”> <input type=“hidden” name=“type” value=“product” /> … </form>
Sorting search results based on product availability
You can use the
unavailable_products option in your theme code to change the order in which search results are returned based on product availability. The options are:
show– Search results are sorted by relevance.
hide– Search results are sorted by relevance, and unavailable products will not appear in the search results.
last– Search results are sorted by availability and then by relevance. This means that unavailable products are pushed below other matching search results.
The default value is
If you want to sort
unavailable products by another value than the default, then you can add a hidden field in the search form within
<form method=“get” action=“/search”> <input type=“hidden” name=“options[unavailable_products]” value=“show” /> … </form>
Enabling partial word matches
You can specify whether a partial word match should be applied to the last term in a search query. This means that the search will attempt to complete the last word of the search query. For example, if a query is made on
winter snow, then a search will be made on all resources that contain the term
winter and a term that starts with
snow such as
Partial word matches can be enabled by setting a
prefix option in your theme code. The options are:
last– Partial word matches are enabled for the last search term.
none– No partial word matches are performed.
The default value is
If you want to enable partial word matches on the last term, then you can add a hidden field in the search form within
<form method=“get” action=“/search”> <input type=“hidden” name=“options[prefix]” value=“last” /> … </form>
Easy Way- Customizing Using an App
An easy way to add the search results page in Shopify is to install the Expertrec smart search bar app from the Shopify app store. This by default creates a Shopify search engine that has auto complete and search results page that you can make changes to suit your website’s needs.
Once you install this app, you will see a search engine similar to the image below that hooks to the existing search box similar to the image below. You can see the voice search icon as well which lets you site visitors search by voice.
It also installs a search results page similar to the image below. It has the following features-
- Sort by popularity.
- Sort by price:low to high, high to low.
- Price slider.
- Filters for categories, product types and more.
Once you install this app, you can customize your search results page inside your control panel.
Customizing the default Shopify search results page
By default, Shopify search redirects you to a /search page. To customize this page, follow these steps:
- Navigate to your admin page at yourStore.myshopify.com/admin
- Using the left menu pane, navigate to Online Store -> Themes
- For the current theme, click on Actions -> Edit Code
- This will open up the code editor. Search for the file search.liquid and open it
- You can modify this file using HTML/CSS to any extent you wish to get the desired customization. If you are not the tech-savvy then you can add the <ci-search-results></ci-search-results> tag that comes with ExpertRec’s Smart Search bar plugin here and do the customization without any coding from the plugins dashboard. In the latter case, no other code is generally required. Of course, if you know what you are doing, then you can add your own code as well!
Creating a new search results page in Shopify
Shopify allows you to create custom pages, but it does not allow easy customization on top of it. Here are steps to create a new search results page in shopify
- Install ExpertRec’s Smart Search bar plugin.
- Login to your shopify admin panel.
- Go to your admin page at yourStore.myshopify.com/admin
- Using the left menu pane, navigate to Online Store -> Pages
- Click on Add Page to open up the page editor.
- Use the <> icon to toggle to HTML mode. You can write HTML code here if you are coder.
- I suggest that you add the <ci-search-results></ci-search-results> tag that comes with ExpertRec’s Smart Search bar plugin here and does the customization without any coding from the plugins dashboard.
- In your ExpertRec dashboard, make sure that you have switched to search results on a different page mode and that you have to set the path to the search results page as page/your-page-path.