“Altert : Shopify seems to have changed the way it used to work with the search page parameters. The solution below have stopped working.”
The default search bar of a shopify searches for all products from the store. In one of the project it was a requirement where along with the search bar there was collection dropdown, and it was few years back and that time i drop that feature mentioning client that it isn’t possible. But in this article i’m going to mention about the solution that allows to search products within a particular collection.
Before we jump into the solution lets talk about known search parameters. `q` & `type`.
`q` is a search text parameter which is a user input on search field. And `type` defines the search type. There are three search type page, article and product. The type parameter can be any or combination (in case of combination separated by comma).
yourshopifystore.com/search?type=product,page&q={searchtext}
Until now there isn’t anything that separates products from specific collection. Now look at the url below
yourshopifystore.com/search/collections/{collection-handle}?type=product&q={searchtext}
yourshopifystore.com/search/collections/accessories?type=product&q=bag
In above example we have added /collections/{collection-handle} before sending parameters and this would filter products from collection in search result. The example demonstartes to search bag from accessories collection.
In header to activate the selected collection dropdown after reaching to search result page you can further add parameters like product_cat and supply collection handle like below.
yourshopifystore.com/search/collections/{collection-handle}?type=product&q={searchtext}&product_cat={collection-handle}
yourshopifystore.com/search/collections/accessories?type=product&q=bag&product_cat=accessories
Cheers.
Graduated from 
3 Comments
-
-
-
Jay Gandhi
October 12, 2018
This solution is not working.
Can you please show me some examples or live store that you have implemented the same functionality.
Rose
May 24, 2019
I have used a for loop to display all the collections in a select dropdown list:
Code that I have used:
{% for collection in collections %}
{{ collection.title }}
{% endfor %}
And I have added in this line of code to only search for product types:
How do we pass the selected option to the ‘product_cat’ parameter in the search url to make it look like:
yourshopifystore.com/search/collections/{collection-handle}?type=product&q={searchtext}&product_cat={collection-handle}?
Do I need to modify the code in the theme.js file?
Thanks!
Suman K.C
May 27, 2019
Hi Rose,
Thanks for reaching out. The way shopify used to entertain the search parameters seems to have chnaged. so it might not work at the moment.
Leave a Reply