How to Improve Custom Search in Your Clients' Storefronts

Shopify’s online store search function is a fully featured, powerful tool for buyers to search across all of a shop's products, articles, and pages. As your client’s store becomes more complex, they may require a more nuanced search process to filter out certain results, or prioritize products over regular pages. Learn how to optimize your client’s custom search in today’s article.

Announcing Online Store 2.0

Online Store 2.0 is an end-to-end overhaul of how themes are built at Shopify, launched June 2021. While the information in the following article is still correct, it doesn't account for Online Store 2.0 best practices, and may not include references to recent features or functionality. To learn more about how to build with Online Store 2.0, visit our updated documentation.

Visit docs

Shopify’s online store search function is a fully featured, powerful tool for buyers to search across all of a shop's products, articles, and pages. Sometimes, however, your clients may want to optimize their search so that buyers are seeing specific types of results. This is especially relevant if your clients have a large product inventory or a lot of non-product content. As your clients’ stores become more complex, they may require a more nuanced search process to filter out certain results or prioritize products over regular pages. This is where working with custom search options comes into play.

This article will outline a number of ways search results can be refined to hide unavailable products or prioritize product pages.

Searching basics

Before we look at customizing search results, it’s worthwhile to explore some of the important Liquid objects related to search. Being familiar with these variables means that you will be able to build the right search model for your client. Here are a few objects to take note of:

• search.results is a powerful Liquid object which returns an array of matching search result items. The items in the array can be blog articles, regular pages, or products. What is very useful is that it is possible to isolate and access the attributes of individual search objects by using for loops.
• search.terms returns the words which were originally searched for. It’s possible to use the highlight filter to apply a different style to any instances in the search results that match up with search.terms. This is particularly helpful if you want to draw a visitor’s attention to these words.
• and, or and not operators. By default search terms are “and-ed” together, so any results will include all terms searched. or can be used to generate results which contain at least one instance of the search terms, while prefixing a term with a minus sign will remove results with this term.

How to hide sold out products from search results

Displaying sold out products on search results could be a source of buyer frustration for clients, since customers could stumble upon products which are not actually for sale. This is especially relevant if your client is running a flash sale or BFCM promotion, and customers are looking to reach available products quickly.

For example, if I have a number of products which match the term “top” but are sold out, they will still appear in my search results. In this example, I would like to hide the Dark Denim Top and the Floral White Top.

I will be making changes to where my search results are being rendered in a search array. As we saw already, the search.results object returns an array of matching search result items. This is where we will be looking to customize.

In some cases, these changes will be made on the search.liquid file in the templates folder. However, if you’re tweaking an existing theme, you might be making these changes on a section file. For this example, I will be customizing the Debut theme.

Within the search.liquid template file, there are control flow tags that determine how search results render and appear. In our case, we will be focusing on the control flow tags that relate to the object types of the search results.

You might also like: How to Add CSS Text Animation to Custom Themes.

For example, if the search results contain products, then specific classes are applied or a particular snippet is loaded. What we are going to do is edit these conditions to include a rule based on the availability of the searched items.

One of the important lines within the search.liquid file is {% if item.object_type == 'product' %}. This allows the page to display results in a certain format, if the results are products. We can adjust this rule to add an extra condition that will load only items that are available. To achieve this, we would use the and operator with item.available == true. Once this is added, the line would look like:

{% if item.object_type == 'product' and item.available == true %}

This means that if an item in the search results is a product and it has an available variant, then the rest of the product’s data will be loaded. In our case, when this additional rule is applied and a product is available, the product-card-list snippet will be rendered displaying its image, pricing, and other info.

I am also adding another line to ensure that the images for the products render correctly:

{% elsif item.object_type != 'product' %}

Once these two lines have been included, the full container would look like this:

When the for loop runs with a product with no available variants, the product’s data will not be rendered on the browser. In this case, the product becomes hidden if it is sold out. Now when I run the search for “top” again, the sold out products are not visible.

Note: Since the sold out products are only hidden, this customization could have an effect on pagination. For example, if your search page is set to display 20 products, and five of the loaded products are sold out, you will only see 15 results. If you are seeing extreme cases of blank pages within pagination, you could adjust the pagination towards the maximum limit of 50 products per page.

You might also like: The 25 Best Sublime Text Plugins for Front End Developers.

How to restrict storefront search results to product pages

Very often, clients will want to narrow their search results to specific types of pages. With careful use of Liquid, you can adjust the theme code so your client’s storefront search results include only products, only pages, or only blog posts.

For example, merchants may only want to display product pages in search results, and restrict blog posts or regular content pages from appearing. In this way, your clients can funnel buyers straight to their products, and avoid distractions from other content.

For example, if I have products and pages which contain the word “classic”, I will see a mix of pages and products in my search results. Ideally, I want to only display products, so buyers are directed straight to product pages.

To achieve this effect, I will be editing the search form of my theme to specify which types of pages are searched. The search form will always open with <form action=“/search”, and could appear in multiple files within your theme.

In my case, since I am using Debut, the search form appears in the search.liquid template and the search-form.liquid snippet. If you are building a theme from scratch, you can add this in where you think it’s appropriate. If you are tweaking an existing theme, you should look for the search form in any search-related Liquid file.

Once I have located all instances of the search form, I will add a hidden field into the search form. This hidden field would be added before the closing </form> tag and would look like this:

<input type="hidden" name="type" value=“product">

This would restrict any pages other than product pages from appearing within the search results. Once this is added in, the complete search form would look like:

Now when I search for “classic”, only products will appear.

What is also interesting is that the URL of the search page has changed. It now reads: https://liams-test-2018.myshopify.com/search?type=product&q=classic. The custom code we have added has inserted the type=product element into this URL.

Alternatively, If you would like the search results to show only pages or blog articles, you would substitute value=“product” with value=“article”, or value=“page”.

Searching into the future with custom search

Customizing the storefront search can be a powerful tool for improving conversions, enabling customers to access available products easily while filtering out unnecessary content.

It is also important to be mindful of what kind of search functionality will suit your different clients, so that you can create bespoke solutions for each of their requirements. Hopefully with the help of this tutorial, optimizing search will be a little bit faster.

How will you improve custom search in your clients’ storefronts? Let us know in the comments below!