Cover image by Drew Patrick Miller
The default search in Shopify doesn't seem to have a lot of depth to it, but if you find the right documentation, you can put together a few options for your power-users, to refine their searches in various ways.
Mannequin's search results template allows your customers to customise their search results using a number of different techniques.
Search by product status
This argument allows you to return all products, or just those which are in stock.
Search by location
Shopify recommends using the type attribute on a hidden input field, to allow you to repurpose the search on your product landing page, and to exclude articles and pages from the search results. You could do the same on your blogs, to show only results from that kind of content.
But what if we put this power into your user's hands? The three types of information which can be custom-searched are:
- Products
- Articles
- Pages
Search by prefix
By default, Shopify searches are strict - a search for cat
will not return a page called cats
. The final advanced search filter allows your users to toggle the search to be less strict. Note that your customer's search string will be considered a prefix. This means that a search for board
will not match surfboard
even if loose search is turned on.
Using advanced search
Most of your customers probably won't use these features, so by default, the advance search filters are hidden inside a details element.
Shopify's search object doesn't expose the original search terms from the user, so Mannequin uses JavaScript to pull them from the querystring. This JavaScript is not particularly fussy about what's in the querystring either: as long as it can match the data in the querystring to a checkbox or radio button on the page, it'll update the status of that input to match whatever is passed through.
If the search fails to return any results, the search results page will apologise and serve all of your store's collections instead.