How to Improve Custom Search in Your Clients' Storefronts

How to Improve Custom Search in Your Clients' Storefronts
custom search

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 article will outline a number of ways search results can be refined to hide unavailable products or prioritize product pages.

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

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.

  • search.results this 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.
  • Using AND, OR and NOT operators. By default search terms are “ANDed” 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 for sale. This is especially relevant if your client is running a flash sale 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.

custom search: 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, especially if you’re using Slate, 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 Debut, but the same rules should apply to any theme built with Slate.

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.

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 which 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 products 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.

custom search: top

Note: Since the sold out products are only hidden, this customization could have an affect 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 max limit of 50 products per page.

You might also like: The 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 clients’ storefront search results include only products, only pages, or only blog articles.

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.

custom search: classic date

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 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 search results. Once this is added in, the complete search form would look like:

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

custom search: classic

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

Customizing storefront search can be a powerful tool for conversions, enabling customers to access available products easily and filter out unnecessary content.

It is also important to be mindful of what kind of search functionality will suit your different clients, to create a bespoke solution for their requirements. Hopefully with the help of these tutorials, 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!

About the Author

Liam is a Partner Education and Front End Developer Advocate at Shopify. He's passionate about promoting community engagement and developing learner resources. Whenever he’s not reading about code you can catch Liam making friends with cats and collecting records.

Grow your business with the Shopify Partner Program

Learn more