Shopify Tips: Choosing product tags 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. That all sounds great until you go to actually use them in practice and then you realise quite how limited the settings are for these search filters.

I wanted a search filter based on product tags, but since from the start I have used the behind the scenes product tags to include a wide range of words on my products, that were never meant to be shown to the customer (think synonyms for words, shortened versions of words, acronyms etc, all to enhance search functionality), I assumed you could choose which tags to include in a customer-facing list, but no. If you want a tag filter, it will show a huge list of every single tag you have used for your products, which in my case renders it entirely useless! I needed to be able to exclude tags - most of them!

I therefore edited the Shopify liquid code to make it do what I wanted - to allow me to choose which tags I want to include in a search filter, for customers to select to narrow down their search. In that way I could include a short list of "themes" for my customers to choose from (e.g. science, maths, personalised, valentines).

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 tag search filter setting

This will add a new setting to your store theme, allowing you to specify a comma separated list of tags your customers can choose from in the tag 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 theme filter tags":

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_theme_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_theme_filter",
        "label": "t:settings_schema.search_input.settings.search_results_theme_filter.label",
        "placeholder": "t:settings_schema.search_input.settings.search_results_theme_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_theme_filter": {
          "label": "Search results theme filter tags",
          "info": "Comma separated product tags"
        }

(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 theme filter tags" to say something that is more meaningful to you if you like. This how your setting will be described to you when you go to change your tags 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 tags into that box - the spelling must match the spelling of the tags you've assigned to your products, but it is not case sensitive. This is the list of tags your customers will be able to choose from in their search results.

Change the way the tag search filter works

You have your new setting, and you've filled in a list of tags you want the tag filter to be limited to using. Now you need to actually make the search filter use your tag list 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 type search filter aswell if you want to - I'll be adding a guide on doing that soon.)

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: I called my tags filter "Theme" - you must change the 7th line of code below to use the name you called your tags filter. So if you called your tags filter "Tags" then your line of code below would say this instead:

elsif filter.label != 'Tags'

Here are the lines of code to copy and paste:

  {% liquid
  assign themeslist = settings.search_results_theme_filter | downcase | split: ", "
  assign searchtag = value.value | downcase
  assign showfilteroption = false
  if themeslist contains searchtag and filter.label == 'Theme'
    assign showfilteroption = true
    elsif filter.label != 'Theme'
    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.

Save the file.

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

You are now nearly finished, or completely finished, depending on you. At the moment your tags filter should be just showing the tags you've told it to, but they will be displayed in the way you have written them when assigning them to products. You may be happy with this, but I wasn't because most of my tags were all lower case and sometimes there was a mixture - so for example science was all lowercase but Christmas had a capital letter. I felt this looked messy and unprofessional, so I changed the Shopify code to capitalise the first letter of all tags. If you also want to do this then you will need to make one final change to the code, and it's simply to add this:

| capitalize

...to an existing line of code found between the two changes you just made. It's at around line 264 and you need to change it from this:

{{- value.label | escape }} ({{ value.count }})

to this instead:

{{- value.label | escape | capitalize }} ({{ value.count }})

So you're simply adding that | capitalize after the existing | escape

Here's another screenshot so that you can see exactly where this line of code is in context, to help find the location:

Save the file.

Now you're 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)