Shopify is a great platform to launch your e-commerce 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:
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 the parameter can include any combination of product, page, 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 snow, snowboard, or snowshoe.
Partial word matches can be enabled by setting an 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>
If you enjoyed this, you might also enjoy these post
