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. 

Customize shopify search results page

 

Talk to us to fix your shopify issues

 

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 type parameter.

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.

The type parameter can include any combination of productpage, and article separated by commas. For example, if you only want to search for product and article results, then the type can be specified as article,product.

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 search.liquid.

<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 last.

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 search.liquid.

<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 snowsnowboard, or snowshoe.

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 none.

If you want to enable partial word matches on the last term, then you can add a hidden field in the search form within search.liquid.

<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-

  1. Sort by popularity.
  2. Sort by price:low to high, high to low.
  3. Price slider.
  4. Filters for categories, product types and more.

Once you install this app, you can customize your search results page inside your control panel.

 

search results page shopify

Customizing the default Shopify search results page

By default, Shopify search redirects you to a /search page. To customize this page, follow these steps:

  1. Navigate to your admin page at yourStore.myshopify.com/admin
  2. Using the left menu pane, navigate to Online Store -> Themesshopify custom search results page
  3. For the current theme, click on Actions -> Edit Codeshopify custom search results page
  4. This will open up the code editor. Search for the file search.liquid and open it
  5. 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!shopify custom search results page

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

  1. Install ExpertRec’s Smart Search bar plugin.
  2. Login to your shopify admin panel.
  3. Go to your admin page at yourStore.myshopify.com/admin
  4. Using the left menu pane, navigate to Online Store -> Pagesshopify custom search results page
  5. Click on Add Page to open up the page editor. 
  6. Use the <> icon to toggle to HTML mode. You can write HTML code here if you are coder.
  7. 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.shopify custom search results pageshopify custom search results page
  8. 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.shopify custom search results page

You may also like