Shopify Tips: Choosing product types for search result filters

Introduction

With Shopify's inbuilt Search & Discovery app you can now quickly and easily add new search filters to your store's search results so that customers can narrow them down based on properties like price, product type, product tags, product colour etc. I decided to add the search filter on product type, but when you do it lists all product types you have set up in your store, even if you don't use them anymore - not what I wanted.

I have changed the products I sell in my store over time (I used to sell tote bags, hoodies and sweatshirts for example). I don't want these old products types, which will yield no search results, displayed in the search filter list - I needed to be able to exclude some product types. This guide takes you through how I edited the Shopify liquid theme code to show just the product types I wanted in the search filter. It is based on the guide I have already published on how to do the same thing to the product tags search filter.

Before you get started

Note: This guide uses the Shopify Dawn version 13 theme. If you have a different theme, or a drastically different version of the theme, things may not match or work as expected!

Before getting started it is always advisable to make it as easy as possible to revert back to the state everything was in beforehand. You then have peace of mind that if anything goes wrong you can instantly undo it! With this in mind I recommend going to your online store themes, clicking on the three dots button next to your current live theme and choosing "Duplicate". You will then have a copy of the current live state of your store which you can revert back to if needed. However, even if you don't do this, Shopify keeps a copy of all your file changes when editing your theme code so that you can revert back to an earlier version on each individual file if need be (when in the code editor, at the top of the code window it says "Recent changes" with "Current" and a drop down list beneath - just choose the file version you want to revert to.

Create the new product type search filter setting

This will add a new setting to your store theme, allowing you to specify a comma separated list of product types your customers can choose from in the product type search filter. It will be added to the Search Behaviour section of theme settings you can find through your theme's "Customize" button. I've called the new setting "Search results product type filter list":

Let's start editing files to achieve this. Go to Online Store -> Themes -> [three dots button] -> Edit code. In the Config area open the file named:

settings_data.json

At around line 336 find this line:

"predictive_search_show_price": false,

Immediately after it add the new line:

"search_results_producttype_filter": "",

Save the file. Now, still in the Config area, open the file named:

settings_schema.json

At around line 1389 find this section:

      {
        "type": "checkbox",
        "id": "predictive_search_show_price",
        "default": false,
        "label": "t:settings_schema.search_input.settings.predictive_search_show_price.label",
        "info": "t:settings_schema.search_input.settings.predictive_search_show_price.info"
      }

Immediately beneath add the following new lines:

      , {
        "type": "text",
        "id": "search_results_producttype_filter",
        "label": "t:settings_schema.search_input.settings.search_results_producttype_filter.label",
        "placeholder": "t:settings_schema.search_input.settings.search_results_producttype_filter.info"
      }

(Note, the comma at the start before the first curly bracket is essential, don't miss it out!)

Save the file.

In the Locales area open the file:

en.default.schema.json

At around line 303 find the section:

        "predictive_search_show_price": {
          "label": "Show product price",
          "info": "Visible when search suggestions enabled."
        }

Immediately beneath add the following new lines:

        , "search_results_producttype_filter": {
          "label": "Search results product type filter list",
          "info": "Comma separated product types"
        }

(Note, the comma at the start before the first double quotes is essential, don't miss it out!)

(Note, you can change the text of "Search results product type filter list" to say something that is more meaningful to you if you like. This is how your setting will be described to you when you go to change your product types list).

Save the file.

Your new setting should be ready for you to fill some data into it. Go to Online Store -> Themes -> Customize button. Choose the settings cog from the left hand vertical menu, then Search Behavior from the list. You should find your new setting with a text box (see previous screenshot). Enter a comma separated list of product types into that box - the spelling must match the spelling of the product types you've assigned your products to, but it is not case sensitive. This is the list of product types your customers will be able to choose from in their search results.

Change the way the product type search filter works

You have your new setting, and you've filled in a list of product types you want the search filter to be limited to using. Now you need to actually make the search filter use your new setting.

(The code provided here ensures it doesn't affect the working of other search filters, and it is also flexible so that it can be extended to work with limiting the product tags search filter aswell if you want to - I've already published a guide on doing that.)

In the Snippets area open the file:

facets.liquid

At around line 201 find these lines of code:

  if value.count == 0 and value.active == false
    assign is_disabled = true
  endif
%}

After that short section of code, which ends with %} you will be adding new lines of code (highlighted in the screenshot below). Use the screenshot to help you locate exactly the right place to insert the new lines of code (which will be provided for you to copy and paste in a moment):

IMPORTANT!

The code you use will depend on if you have already followed my guide on adding a product tags filter or not. You need to use different lines of code if you have (to extend that code) or haven't. The screenshot above shows the code used if you are combining the two guides together, in other words, if you've already done the tags filter and are adding the product types filter. Regardless, the lines of code are put in the same location in the file you are editing.

So, if you HAVE already followed my guide to include product tags, REPLACE that section of code with the following new code which you can copy and paste (you've then finished all the code edits you need to make):

  {% liquid
  assign themeslist = settings.search_results_theme_filter | downcase | split: ", "
  assign producttypeslist = settings.search_results_producttype_filter | downcase | split: ", "
  assign searchtag = value.value | downcase
  assign showfilteroption = false
  if themeslist contains searchtag and filter.label == 'Theme'
    assign showfilteroption = true
    elsif producttypeslist contains searchtag and filter.label == 'Product type'
    assign showfilteroption = true
  endif
  %}
  {% if showfilteroption %}

If you have NOT already followed my guide to include product tags, here are the lines of code to copy and paste:

  {% liquid
  assign producttypeslist = settings.search_results_producttype_filter | downcase | split: ", "
  assign searchtag = value.value | downcase
  assign showfilteroption = false
  if producttypeslist contains searchtag and filter.label == 'Product type'
    assign showfilteroption = true
    elsif filter.label != 'Product type'
    assign showfilteroption = true
  endif
  %}
  {% if showfilteroption %} 

Important: this code opens something that you must later close! You now need to add:

  {% endif %}

...just before the {% endfor %} To help you find the correct location here's another screenshot. The endfor is the very next endfor you will find in the file though, so you could use search to find the next instance of it. (If you have already followed my previous guide then you will already have this endif tag - don't add an extra one!)

Save the file.

(If you haven't already, remember to go into the built in Search & Discovery app -> customize filters and add product types to your list of filters it uses).

You've finished!

Found this useful?

If this guide has helped you please leave a comment to let me know :) If it's really helped you, or you're just feeling generous, please consider buying me a coffee via Ko-Fi as a thank you - or buy an item from this website.

If you want to suggest other things you'd like me to write a Shopify guide about please let me know!

 search (2)