We're hiring

Symmetry and Shopify's search changes

Read the full article for an explanation of who is affected, what changed, and how to fix it.

Kevin Pearce
March 5, 2019
Near the end of 2018, Shopify changed how the search works. This has caused problems with Symmetry's search, particularly with SKUs - read on for an explanation of who is affected, what changed, and how to fix it.

Who is affected?

Stores using a version of Symmetry installed before 19 December 2018 (version 4.4.0).

What changed?

You may have noticed that searches for specific SKUs are no longer showing results, when you know that your products have the correct SKUs assigned.

Before this Shopify search change, you could search for a partial match of a SKU. It looks like this:

/search?q=*bcd*

The asterisks are special characters that mean 'match anything here'. So the search page would show products with SKUs like 'abcd' or 'bcd123', so basically anything with 'bcd' in it somewhere.

The Symmetry theme took advantage of this, converting all searches to partial searches. If you entered '123' into the search box it would actually do a search for '*123*' - to maximise the number of results found.

After this Shopify search update, these results return nothing. If you enter '123' into the search, it converts it to '*123*', but then you get no results.

A partial search at the end is still valid - '123*' will get results, but a partial search at the beginning, like '*123' is not - this will show no results. And when both are combined with '*123*' - it gets no results.

How do i fix it?

The easiest way to fix this is to alter the theme code - so that it does not add an asterisk to the beginning of your search terms. Don't worry if you don't completely understand this code, all that's needed is a quick copy and paste to replace a couple of lines.

If you're not comfortable altering theme code, please find somebody who is, or get in touch with us.

If you do wish to make the changes yourself, don't forget to make a backup copy of your theme first, in case anything goes wrong.

Open up the theme file Assets/theme.js.liquid and hit control+F to open up the search box. Searching the file is the easiest way to find these lines of code.

Search for this (it should be around line 2255 (line 1710 in even older theme versions)):

var term = '*' + $form.find('input[name="q"]').val() + '*';

Change it to:

var term = $form.find('input[name="q"]').val() + '*';

Then search for this (it should be around line 2322):

var term = '*' + val + '*';

Change it to:

var term = val + '*';

If you can't find this second one, you may be running a much older version of the theme (you may wish to consider updating!) you will instead find the following somewhere near line 1775:

var term = '*' + $(this).find('input[name="q"]').val() + '*';

Change it to:

var term = $(this).find('input[name="q"]').val() + '*';

Click 'Save', and you're done. You should be able to search for SKUs again - give it a go!

If you're not comfortable doing this, or don't have a developer to hand, we can send over a collaborator account request and do this for you. Let us know if you'd prefer us to do it.

Have a project for us?

Let's Chat